Documentation
Tools for Devs
HUGO Websites

HUGO Websites

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?

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

ℹ️
New to SSGs and HUGO? See the 101 HUGO Guide

HUGO Themes

    • _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

    ℹ️
    You can do host HUGO for free with Github Pages

    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.

    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

    MermaidJS and ChartJS

    Math with Katex

    As see 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.

    How to add ads.txt to a HUGO Website 📌

    1. Create an ads.txt file in your Hugo project’s static directory. The static folder in Hugo is where you put any files you want to be copied directly to the root of your build output.

    2. Add your content to the ads.txt file:

    google.com, pub-123456, DIRECT, abcdef123456

    1. Build your Hugo site:

    2. Verify the output by checking the public directory (Hugo’s default output folder). You should find the ads.txt file in the root of public:

    3. Deploy your site as usual. The ads.txt file should now be available at https://yourdomain.com/ads.txt.

    This method ensures that ads.txt is part of your site’s root directory in the final build output, as required by ad networks.

    HUGO adsense txt

    Astro Websites