HUGO is amazing.

I migrated previously this site from a SelfHosted Wordpress to HUGO, and went with the PaperMOD Theme.

But now I feel like the content ive created so far needs some other kind of HUGO theme.

It is time to migrate between HUGO Themes.

But first, a recap on HUGO:

HUGO Logo
Feature Description
Source Code Hugo on GitHub
License Apache License 2.0
Lightning-fast performance ⚡️ HUGO generates static websites quickly, resulting in speedy load times for visitors.
Flexible content management 🧩 Easily manage your content; with HUGO, you can write in markdown.
Extensive theme library for customization 🎨 Choose a theme and customize the look/feel of your website to suit your needs.

Star History Chart

Pretty awsome, right?

How to Setup a HUGO Website

Artifacts for HUGO

sudo snap install go

go version
#go version go1.22.6 linux/arm64
And..that’s pretty much it - Install HUGO! ⏬

If you have more than go version 1.20, you can build HUGO with:

CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest #took for me ~5minutes
#time CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest
#time CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@v0.127.0

You could also get a specific version from the releases:

#https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb
wget https://github.com/gohugoio/hugo/releases/download/v0.108.0/hugo_0.108.0_linux-amd64.deb
sudo dpkg -i hugo_0.108.0_linux-amd64.deb
#hugo version

Or just get it from apt or snap repositories:

apt show hugo #this is older 0.92
snap info hugo
sudo snap install hugo --channel=extended/stable #this is 0.131.0

hugo version
#hugo v0.92.2+extended linux/arm64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
# hugo v0.131.0-bfbee17932ff24009008aa94cdd75c0c41f59279+extended linux/arm64 BuildDate=2024-08-02T09:03:48Z VendorInfo=snap:0.131.0

You can run your HUGO site locally and see your changes with:

hugo server #will be localhost and 1313 by default
#hugo server --bind=192.168.3.200 --baseURL=http://192.168.3.200 --port=1313

If you are getting something like this, you are good to go:

hugo version
# hugo v0.131.0-bfbee17932ff24009008aa94cdd75c0c41f59279+extended linux/arm64 BuildDate=2024-08-02T09:03:48Z VendorInfo=snap:0.131.0

Choosing HUGO Theme

Ok, so now we are ready to go, but as we are not web developers - we need a HUGO THEME.

If i’d like to have a photo centered HUGO Blog - id go with this HUGO Theme

Where to find HUGO Themes
HUGO Official Themes A collection of F/OSS HUGO themes
Jamstack The JamStack Site
Statichunt The StaticHunt Pages Official Site
Built at Lightspeed The builtatlightspeed Page

From PaperMod to HUGO Hextra

After few years of using the HUGO PaperMod Theme (with some personal tweaks)…

…I decided that it is time to migrate this website to a more ‘doc like theme’.

I made this decision based on Umami analytics:

  • Most of my viewers are using non-mobile devices
  • I will keep a blog section to share what I discover
  • But will have a better summary overview in docs section of some F/OSS how-to-guides

This is why i felt in love with Hextra:

Quick spin to a HUGO Theme ⏬
hugo new site fossengineer --format=yaml
cd fossengineer

git init
git submodule add https://github.com/imfing/hextra.git themes/hextra
#git submodule add -b v0.8.0 https://github.com/imfing/hextra.git themes/hextra

Test the sample theme

cd themes/hextra/exampleSite
hugo server

Add to the hugo.yaml (or config.yaml) the following to specify the theme to be used:

theme: hextra

Create some content:

hugo new content/_index.md
hugo new content/docs/_index.md

#hugo server
hugo server --bind=192.168.3.200 --baseURL=http://192.168.3.200 --port=1313

You could update it at any point with:

git submodule init
git submodule update
git clone https://github.com/imfing/hextra
#git clone https://github.com/imfing/hextra-starter-template

cd ./hextra/exampleSite
hugo server --bind=192.168.3.200 --baseURL=http://192.168.3.200 --port=1313

Isn’t it beautiful?

You can also try with this fork.

and you will require additionally packages to make work PostCSS at: /css/helix.css

node --version
npm --version
npm install -D postcss postcss-cli

Diagrams with Hugo Hextra

I love the open source diagramming tools out-there.

Now, with Hextra I will be able to include mermaid diagrams in my posts!

Keeping the Blog Section

One of the reasons I started this journey was to document my learning process.

And keeping the blog section is essential to me.

Still I Prefer PaperMod Because…

PaperMod has Search Page with Fuse.js and Tags section which i Love.

Hextra uses FlexSearch

…which has to be properly configured:

Hosting HUGO Websites

Platform Pros Cons More Info
Cloudflare Pages - Fast and secure global distribution. - Built-in CDN and SSL/TLS encryption. - Limited to static sites only. - Beta stage, may have limited features. Host a HUGO Static Web with Cloudflare Pages
Firebase - Scalable hosting with integrated services. - Easy setup and management. - Limited customization options. - May not be suitable for high traffic websites. Host a HUGO Static Web with Firebase
GitHub Pages - Free hosting with seamless integration with GitHub. - Good for personal projects. - Limited to static sites only. - Limited customization options. Host a HUGO Static Web with GitHub Pages

SelfHosting HUGO Website

If those platforms (Big Techs) stop being generous…

… you can always Self-Host HUGO

  • HTTPs with an Nginx Server in a VPS
  • From any old laptop / SBC at home with Cloudflare Tunnels
  • These options give you full control and are a great choice if you prefer fully open-source solutions and more control 💡

Oh yea, SelfHosting HUGO

Conclusions

I hope this new version will help all of you to find useful F/OSS content and ideas!

You might want to have a look to other SSG’s like:

Build your own site as well!

Star History Chart

When I said that HUGO is fast, it means that this sites is generated in ~2 seconds!

This also mean that HUGO websites tend to be low in carbon emisions as well - https://www.websitecarbon.com


FAQ

Website Free SVGs for HUGO
SVG Repo A collection of free SVG icons and vectors
Font Awesome A popular icon set and toolkit
Font Awesome Search Search for specific icons within Font Awesome
Tool Tools for Choosing HEX Colors License
Colorpicker A minimal but complete colorpicker desktop app MIT
Colorpicker Online Online version of the Colorpicker app -
Rickrack Generate harmonious colors freely MIT
Huey A color palette generator -
Leonardo Generate colors based on a desired contrast ratio Apache-2.0
Leonardo (GitHub) GitHub repository for the Leonardo color tool Apache-2.0

add this to your css

@import "../../node_modules/light-icons/dist/light-icon.css";

Handpicked collection of premium & light-wighted icons as font

  • Just use Real Fav Icon Generator 😍 and place in the the proper folder (where the default icons are on your Theme).

  • Or with Favycon- A favicon generator tool (MIT Licensed)

  • Cool FavIcon with: https://favicon.io/favicon-converter/ - You can upload an image, then you will get the favicon.ico and other artifacts to make the web icons look amazing in any device.

  1. go to the theme folder
  2. add a /static folder
  3. add the files generated with the website
Name Description License
Tabler Icons A set of over 1500 free MIT-licensed high-quality SVG icons for you to use in your web projects MIT
Bootstrap Icons Official open source SVG icon library for Bootstrap MIT
Iconoir A library of 900+ SVG icons for designers and developers MIT
Open Iconic A family of icon sets with 223 marks in SVG, webfont, and raster formats MIT
Feather Icons Simply beautiful open-source icons MIT
Dashboard Icons 2000+ icons for dashboards MIT

Contact Forms and Newsletters for HUGO websites

Open Source Newsletter Tool.

TBC ⏬
# This docker-compose file is intended for local testing and NOT intended to be
# production ready.

version: "3"

services:
  keila:
    image: pentacent/keila:latest
    ports:
      - "4000:4000"
    depends_on:
      - mariadb
    build:
      context: ../
      dockerfile: ops/Dockerfile
    environment:
      SECRET_KEY_BASE: "${YOUR_SECRET_KEY}"
      DB_URL: "mysql://root:password@mariadb/keila"
      URL_HOST: "${YOUR_URL_HOST}"
      MAILER_SMTP_HOST: "${YOUR_MAILER_SMTP_HOST}"
      MAILER_SMTP_USER: "${YOUR_MAILER_SMTP_USER}"
      MAILER_SMTP_PASSWORD: "${YOUR_MAILER_SMTP_PASSWORD}"

  mariadb:
    image: mariadb:latest
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: keila

How to Add a ChatBot to a HUGO Site

Forget about old school Contact Forms.

How to Monitor a Website Status

Name Description License
UptimeKuma A self-hosted monitoring tool like “Uptime Robot” MIT ❤️
Upptime Open-source uptime monitor and status page, powered entirely by GitHub MIT ❤️
PageSpeed Insights Free online tool by Google to analyze and optimize web page performance Google
LinkChecker Project with Python. look if all referenced links are working GPL v2
Cachet. 🚦 The open-source status page system. MIT
Cachet. 🚦 🏓 The open-source synthetic monitoring platform 🏓// Astro Theme + Cloudflare Pages aGPL v3
How to use LinkChecker with 🐋👇

We will be using their GHCR Image

#podman run --rm -it ghcr.io/linkchecker/linkchecker:latest --verbose https://fossengineer.com > linkchecker_output.txt

docker run --rm -it -u $(id -u):$(id -g) ghcr.io/linkchecker/linkchecker:latest --verbose https://www.example.com

Or with the python Package:

pip3 install linkchecker

Check links in web documents or full websites

You will get a report with what’s link working and what not when it comes to Links in your Site.

You might be interested to have a look to web-check or its SelfHosted Fork - Both MIT Licensed

🕵️‍♂️ All-in-one OSINT tool for analysing any website. Self-Hosted Edition!

version: "3.9" #https://mariushosting.com/how-to-install-web-check-on-your-synology-nas/
services:
  webcheck:
    container_name: Web-Check
    image: lissy93/web-check
    mem_limit: 4g
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    restart: on-failure:5
    ports:
      - 6160:3000

Thanks to web-check, you will be able to see the Social Tags of your site, if it returns a sitemap index… among other interesting stuff!

F/OSS Web Analytics for HUGO

  • Umami - it’s MIT AND cookieless! ❤️
  • Plausible
  • Matomo
  • Swetrix - also cookieless :)

Interesting for Devs

Headless CMS for HUGO

CMS License Primary Use Pro Con
Contentful Proprietary Cloud-based headless CMS Rich feature set and strong integrations Pricing can be high for large volumes
Strapi Open Source (MIT) Self-hosted headless CMS Highly customizable and open-source Requires self-hosting and maintenance
Sanity Open Source (MIT) Cloud-based headless CMS Real-time collaboration and flexible schema Can be complex to configure
Netlify CMS Open Source (MIT) Git-based headless CMS Easy to integrate with Git repositories Limited to static site generation
Ghost Open Source (MIT) Headless CMS with blogging focus Good for both content management and blogging May need custom setup for static sites
Front Matter MIT Headless CMS right in your code editor Thanks to NickGracilla Post

You can also try with TinaCMS and how to build hugo pages from an API

TW-Elements

TailWind Elements - MIT Licensed

A set of free, open-source components for Tailwind CSS

Name Description License
TW Elements - Gallery Documentation for the Gallery component in TW Elements -
TW Elements - Carousel Documentation for the Carousel component in TW Elements -
TW Elements - Testimonials Documentation for the Testimonials component in TW Elements -
TW Elements - Carousel Overview Overview documentation for the Carousel component in TW Elements -

𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎

Outro

If you are looking for a F/OSS alternative to linktree and dont mind having DB’s involved…

…you can try the linkstrack project - https://github.com/LinkStackOrg/LinkStack - aGPL v3 Licensed

LinkStack - the ultimate solution for creating a personalized & professional profile page. Showcase all your important links in one place, forget the limitation of one link on social media. Set up your personal site on your own server with just a few clicks.

If you still want to avoid DataBases - you can try with HUGO Lynx.

Oh, jpanther also made another awsome HUGO theme…

Name Description License
Congo A powerful, lightweight theme for Hugo built with Tailwind CSS MIT
Blowfish Personal website & blog theme for Hugo MIT
TailBliss A Hugo starter theme built on TailwindCSS 3 and Alpine.JS Apache-2.0