HUGO: Migrating the Site to Hextra

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:

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

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/[email protected]

#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

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

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

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:

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

cd themes/hextra/exampleSite
hugo server

theme: hextra

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

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!

• MermaidJS
  • https://mermaid.js.org/syntax/examples.html

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

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
  • https://github.com/shadcn/gatsby-themes

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

• https://github.com/lightvue/light-icons (MIT ❤️)
  • https://icons.lightvue.org/icons

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

How to Add a ChatBot to a HUGO Site

Forget about old school Contact Forms:

• Use a F/OSS ChatBot in your NextJS Site:
  • LangFlow
  • Chatwoot
  • FlowiseAI

How to Monitor a Website Status

#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

pip3 install linkchecker

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

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

𝙃𝙪𝙜𝙚 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…