Documentation
Tools for Devs
HUGO Websites

HUGO Websites

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

HUGO Themes

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.

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

  1. If you are using HUGO, embedd 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.

Tweaking HUGO Themes

HUGO is great.

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

And you can make it even better by:

How to add ads.txt to HUGO 📌

  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.

Firebase Custom Domain

Astro Websites