Websites 2024 Consolidation

Blogs

December 17, 2024

It all started few years ago with my own blogs.

My Travel Adventures

I can write and also create interesting photo galleries about my travel experiences

Photo Gallery Blog

Made with HUGO and Photo centered

ℹ️

And there is a new and very special website! http://entreagujaypunto.com/ Built with GH + Cloudflare Pages https://github.com/JAlcocerT/EntreAgujayPunto 💻 Similar to this

I got the domain at PorkBun and changed the NameServer to Cloudflare ones.

Log into porkbun -> NS -> Change Authoritative Name Server to the ones provided by CF:

# curitiba.ns.porkbun.com
# fortaleza.ns.porkbun.com
# maceio.ns.porkbun.com
# salvador.ns.porkbun.com

Cloudflare WnP Custom Domain

CF Custom Domain 1

CF Custom Domain2

CF Custom Domain 3

After it syncs, you will be able to go to Workers & Pages -> Custom Domains and have the website ready.

Photo Galleries

As described here - https://jalcocert.github.io/JAlcocerT/creating-photo-centric-blog-with-hugo/

Cycling There Photo Gallery Travel Addict Photo Blog Portfolio Aguja&Punto

See some sample blogs:

My Travel Adventures

I can write and also create interesting photo galleries about my travel experiences

Punto Photo Gallery

A Photo centered Web for Punto

And then I saw people close to me, who needed help.

But what can you do when there are many unknown unknowns?

Maybe…Clarify with an AI Powered Presentation

Custom Websites

Then…started customizing websites:

Content Creator Blog

For an instagramer who loves knitting

Health Care Site

Because the brain is as important as the body

Real Estate Official Site

A Real Estate Business Site for Spain

Scale Modelling Blog

Fantastic Blog with ~1K Posts about Modelling

Personal Business Landing

Landing Page for a well Known English Teacher

Travel Adict Photo Gallery

Because Photo & Travel lovers need something more than instagram

All your Links

Sleek collection of important Links

Doctor Consultation

Landing and WebApp for Scheduling Doctor Appointments

All powered by HUGO & Astro 📌

#npm run dev #for astro

#hugo server
hugo server --bind="0.0.0.0" --baseURL="http://192.168.0.171" --port=1319

The baseURL if you are doing dev in a server

For production, always check for HUGO the hugo.toml file and tweak the baseURL parameter

See also:

For CSS: /assets/css/custom.css to tweak the light/dark themes colors.

You can choose the default for each folder by adding:

params:
  theme: light #dark ##ffffff #dee2e6

Which references: --surface-1-light: #ffffffb2;

For favicons, i have used: https://github.com/ruisaraiva19/favycon

The theme automatically created public/images/favicon.png

Which it is referenced at layouts/partial/head.html

  <link rel="icon" type="image/svg+xml" href="{{ "images/favicon.svg" | relURL }}" />
  <link rel="icon" type="image/png" href="{{ "images/favicon.png" | relURL }}" />
  <link rel="apple-touch-icon" sizes="180x180" href="{{ "images/apple-touch-icon.png" | relURL }}" />

To use the favicons generated by favycon I needed to add the generated to public/images and make the proper reference with the html tags provided in the readme.txt at the head.html

Images are referencing to public/images

<link rel="apple-touch-icon" sizes="57x57" href="images/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon-192x192.png">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favicon-144x144.png">
<meta name="msapplication-config" content="images/browserconfig.xml">

Deploying to WnP via CLI

And just using Cloudflare Workers and Pages to deploy it with the CLI wrangler

#npm install wrangler
npx wrangler pages project create #this will install wrangler CLI the first time
npx wrangler pages deploy public #<BUILD_OUTPUT_DIRECTORY>

#npx wrangler pages project list #this are the ones you uploaded already
#npx wrangler pages deployment list
#npx wrangler pages project delete your_project_name

CF Wrangler CLI

Next Steps

Making a better LinkTree or linkbio

At the moment of writing, they are charging 5$/m for the first paid tier.

It goes to 9$/m to have newsletter and web analytics…or customize the UI.

ℹ️

A cool UI is mostly a matter of CSS

Helping local places get a better website - https://menu.cocolounge.pl/
- https://cocolounge.pl/
- https://www.dotnpixel.pl/about.html

Themes To Try

https://github.com/oxygenna-themes/foxi-astro-theme/

Scaling Ideas

These are some ideas of whats coming next.

Making websites 1 by 1…its kind of slow.

But there are very well known services that provide interesting service without human interaction.

Examples, this artist profile and this awsome designer profile
- And somethin’ like:

ℹ️

Like we did at the Social Media Project!

Automatic Invoices
- With Stripe as payment gateway, they create the invoices for your product/services automatically
- There are some project to create invoices with open software - Serverless Invoices worked great for me!

ServerLess-Invoices Setup 🚀

Create and manage invoices in your browser. Serverless Invoices is a free invoicing tool for freelancers and small businesses.

Made with Vue.js.

git clone https://github.com/mokuappio/serverless-invoices.git
#https://github.com/JAlcocerT/serverless-invoices

cd serverless-invoices
#rm -rf .git

docker build . -t mokuappio/serverless-invoices
#docker run -p 89:8080 -d --rm mokuappio/serverless-invoices
docker run -p 89:8080 -d --rm --name serverlessinvoices mokuappio/serverless-invoices

There is an awsome Dockerfile example on how to bundle a Node App for Production

You can print to pdf, add your logo, taxes, CSS…

…and import/export the json with all your created invoices

Or use their Saas: https://app.mokuapp.io/login

FAQ

Creating an Interface For Hugo Theme Gallery

https://github.com/JAlcocerT/EntreAgujayPunto

HUGO + HUGO Theme Gallery
FileBrowser
NGINX
A server

FileBrowser x HUGO

EDITING FROM THE FUTURE: To make adding photos more intuitive, combine HUGO + Filebrowser. You will just need to commit the changes (or put some cron job), then CI/CD will do the rest and push it to your domain.

If you setup filebrowser

services:
  filebrowser:
    image: gtstef/filebrowser #docker pull gtstef/filebrowser

    container_name: filebrowser
    ports:
      - 8081:80
    volumes:
      - /home/Docker/FileBrowser/config:/config
      - /home/datafolder/Z_BACKUP_DATA/data1:/srv #tweak this
    restart: always       

For filebrowser quantum you will login with: admin/admin for the original one with ‘admin/console logs’

To make it more intuitive, you can create an user and put that their path is directly ./content which maps to the place where HUGO Theme Gallery loads all the photos.

alt text

Provide access with

alt text

And as you are logged in already, show the analytics for motivation :)

alt text

Before pushing changes, I had to do provide this git CLI:

git config --global --add safe.directory /home/jalcocert/EntreAgujayPunto

SelfHosting Python AI Apps - My 2024 Favs Testing new AI projects with Python: Conda, venvs, containers...