Documentation
Tools for Devs
Websites - HUGO

Websites - HUGO

Why bother with HUGO SSG?

Well, you just write markdown and when you get tired of a theme, you can just change to another HUGO theme and keeping all your data as is: flat files.

Pretty awsome, ah?

This means that you wont have to worry about databases, their hosting neither their backup.

Well, I havent mentioned yet that potentially, you dont have to pay for hosting these sites.

Just SSG - Github ↗ Create a DIY website with Astro

HUGO Themes

New to SSGs and HUGO?

ℹ️
See the 101 HUGO Guide

This is the typical file structure of a HUGO Theme:

    • _index.md
      • _index.md
      • introduction.md
      • introduction.fr.md
  • hugo.toml

    • Blogs

    1. https://github.com/statichunt/geeky-hugo

    MIT Geeky is a Personal Hugo blog theme focused on high speed. Geeky is fully responsive, Superfast, and powered by Bootstrap v5.

    1. Tweaked HUGO HEXTRA - This site!
    ℹ️
    You can clone this HUGO site and run it locally with HUGO v0.117

    Presentations with HUGO

    1. https://github.com/joshed-io/reveal-hugo
    What I like about RevealJS with HUGO 📌

    MIT | 📽️ Create rich HTML-based presentations with Hugo and Reveal.js

    Links

    1. https://github.com/jpanther/lynx

    MIT | A simple links theme for Hugo built with Tailwind CSS.

    FAQ

    Deploying HUGO Static Sites

    Select any of these website deployment methods

    For example, you can do host HUGO for free with Github Pages

    NGINX on VPSNGINX on VPS
    Free Static hosting vs VPS hosting
    Cloudflare x GitlabCloudflare x Gitlab
    Deploying Astro with CI/CD

    See how easy is to deploy HUGO sites inside containers:

    HUGO SSG Static Hosting | Docker Config 🐋 ↗

    HUGO with Github Pages & CICD

    Its very important to know the HUGO Version that makes the theme work.

    Like when you are using this sample Github Actions Workflow.

    ℹ️
    The workflow configures the base path to work properly as per your repo name

    This Hextra Theme, as it is, for example, runs fine with v0.117.0:

    hugo v0.117.0-b2f0696cad918fb61420a6aff173eb36662b406e+extended linux/amd64 BuildDate=2023-08-07T12:49:48Z VendorInfo=gohugoio

    But not with higher versions, like v0.124.

    ℹ️
    Dont forget to Setup HUGO properly!

    HUGO Shortcodes

    Shortcodes for HUGO are like components for Astro.

    They help us provide interesting funcitonality to our themes.

    So you create them once, and reuse forever.

    1. If you are using HUGO, embed your images with this shortcode

    2. You can also embed GISTS with this shortcode

    Remember that shortcodes are .html files to be placed at /themes/theme_name/layouts/shortcodes/gist_file.html

    Just use it like so in your markdown ,example with the gist:
    • First parameter (jalcocert): This is the GitHub username or organization that owns the Gist.
    • Second parameter (879fecd6ae9bccaa0175d1c180a032cd): This is the unique Gist ID.
    • Third parameter (“RStocks - PayoutRatioEvolution.JPG”): This is the specific file within the Gist that you want to load.

    1. You can also bring cool charts, thanks to shortcodes

    2. Even bring mastodon info: https://magnus919.com/notes/embed-mastodon-shortcode/

    3. Pull info from .yml into your .md posts with such shortcode

    4. Bring audio via ttps://github.com/JAlcocerT/JAlcocerT/blob/main/layouts/shortcodes/audio.html as seen here

    MermaidJS and ChartJS

    Math with Katex

    Katex is similar to Latex.

    You can bring cool formulas to HUGo with Katex.

    See an example on this HUGO Hextra post

    Tweaking HUGO Themes

    HUGO is great.

    The HUGO Setup was the first SSG that I could get working back in the days.

    Websites - Astro