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:
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. |
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:
- https://github.com/gohugoio/hugo/releases
- A Particular one - https://github.com/gohugoio/hugo/releases/tag/v0.127.0 (with very interesting http catching)
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.
- I have been using HUGO PaperMOD
- But now, ill be switching to Hextra
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:
- https://imfing.github.io/hextra/docs/guide/configuration/#search-index
- https://gohugo.io/content-management/summaries/
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 💡
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:
- NextJS
- Astro
- Jekyll
- Gatsby! Another MIT Licensed React Framework - https://github.com/gatsbyjs/gatsby
Build your own site as well!
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.
- go to the theme folder
- add a
/static
folder - 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
- Keila https://github.com/pentacent/keila - aGPL
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.
- Use a F/OSS ChatBot in your NextJS Site:
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 | |
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 |