Hugo Tutorials & Tips

This wiki contains some tutorials and tips that might help beginners and others alike with Hugo. See Recommended Reading Reference for other tips.

No. Title Description Link
1 Hugo Data, a series This series covers everything there is to know about data manipulation in Hugo. Hugo Data, a series | The New Dynamic
2 Convert Hugo Content Files to Page Bundles A bash script to convert hugo markdown files to page (leaf) bundles. Convert Hugo Content Files to Page Bundles
3 Markdown Tutorial Each lesson introduces a single Markdown concept with an example. Markdown Tutorial - Introduction
4 Audit your published site for problems A bash script to detect conditions that can produce errors in your published site which are not detected during the build. Audit your published site for problems
5 Convert flat content files to page leaf bundles A quick script to convert from a flat Hugo content structure to a leaf bundle, including images. Convert flat content files to page leaf bundles, including images. script
6 Splitting an article into multiple pages A minimal reproducible example showing how to split Hugo content files to multiple pages. (N.B. you may have to modify your list layout template(s)). Splitting an article into multiple pages - #3 by jmooring
7 Hugo search by Title using plain JavaScript How to create a search function/page by page title(s) in your Hugo site using simple HTML and Javascript. Hugo Search by Title using Plain JavaScript
8 Hugo summary from content A partial that allows you to get summary from content without a gap between the last word/character and the ellipsis (e.g amet... instead of amet ...). Create description from summary - #5 by jmooring
9 Templating: a video introduction Learn about Hugo lookup order, content organization and how to build a theme from scratch. Templating: a video introduction
10 Getting set up in Hugo A series of articles to help you get started with Hugo. Getting set up in Hugo | CloudCannon
11 Remove Blank Line in YAML Frontmatter Helpful to remove blank lines in frontmatter for bulk-deleted entry or entries using Notepad++. Remove Blank Line in YAML Frontmatter
12 A simple JavaScript based full text search function A full text search based on a JSON array that contains the website’s content and a JavaScript search function that processes the array. A simple javascript based full text search function
13 Concepts of Hugo This article is an attempt to give Hugo beginners a what is what introduction to Hugo that will make the rest of the learning experience easier. Concepts of Hugo | ΔY
14 Manual related posts Show related posts defined as an array in the frontmatter of your Hugo pages (N.B. Use the file name as the link e.g post-2 in the example from post-2.md). GetPage from URL - #9 by jmooring
15 Limit the number of links in pagination By default there are as many as 9 buttons in Hugo’s internal pagination template. But there’s an alternate ‘terse’ format that reduces that to a maximum of 7 buttons. How to limit the Number of links in pagination
16 Hugo Series A series of (technical) articles/tutorials about Hugo. Blog - Regis Philibert
17 Minimal Analytics (GA v4) A tutorial to add a stripped down version of the Google Analytics v4 library to your Hugo site. Add Minimal Analytics (Google Analytics v4) to Hugo
18 Awesome Hugo A curated list of awesome things related to Hugo, the world’s fastest framework for building websites. Awesome Hugo
19 Search Bar With a JSON Index and Some Vanilla JS In a nutshell, it uses a JSON index to search against, then re-renders the blog list on each keyup event. Build a Search Bar for Your Hugo Blog With a JSON Index and Some Vanilla JS | zwbetz
20 Simple image render hook template This simple image render hook template uses the image title as an optional caption. Simple image render hook template for responsive images
21 Component to display nice notices A theme component providing a shortcode to display nice notices on your Hugo site. Component to display nice notices
22 Hugo modules for “dummies” If you are new to them, this is a step by step guide to help you to get up and running with Hugo modules. Hugo modules for "dummies"
23 How to Build a Fast Static E-Commerce Site How to build a fast e-commerce site with Hugo and Snipcart Hugo Tutorial: How to Build a Fast Static Site for E-Commerce
24 Best choice to add a theme in Hugo Different ways to add Hugo themes explained, including the best choice. Adding a theme as a submodule or clone? - #2 by bep
25 Commenting System An ecosystem of tools available to add comments to your Hugo site Commenting for Jamstack | CloudCannon
26 Primary roles of the language key Explanation for the primary roles of the language key (e.g., the en in [languages.en]) in Hugo Opengraph template locale- fallback to site's locale param · Issue #8296 · gohugoio/hugo · GitHub
27 Adding PostCSS Autoprefixer to Hugo How to configure the postcss/autoprefixer plugin to parse CSS and add vendor prefixes to CSS rules. Adding PostCSS to a Hugo Static Site - TY
28 Getting a filename without the extension Get a filename without extension e.g cover instead of cover.jpg. Getting a filename without the extension - #2 by jmooring
29 Understanding .Data in Page variable An explanation for .Data.Pages. What's .Data in Page variable? - #2 by jmooring
30 Plain text output with line breaks Parse markdown and turn it into text with line breaks. Having trouble with plain text output - #4 by kaushalmodi
31 How to add font select box A font selection option that allows site users to change fonts. How to add font select box to let user to select font - #2 by jmooring
32 Linux script to create year/month/date folders Create year/month/date folders automatically when running hugo new command. Organizing posts according to date - #6 by jmooring
33 Count unique data item values For example, you want to know the number of years when books have been published. Count unique data item values - #2 by moorereason
32 Sparklines for the number of posts, etc. Generate a sparkline with a count of blog posts by month Sparklines for the number of posts etc
33 Range the first x number of categories/tags Limit the list of categories (or tags) to just the first x items . List only the first 15 categories - #7 by jmooring
34 Open the browser on hugo server command Several flag options to open the browser when running hugo server command. Flag option to open the browser when Hugo server
34 Sitemap variables How do add a sitemap variable to your robots.txt file. Sitemap variables unavailable in robots.txt template - #2 by jmooring
35 Different number of posts on first page How to show different number of posts on the first page. Possible? First list page showing 9 items, following showing 10 items - #2 by jmooring
36 Cloak email shortcode component A Hugo theme component to cloak email adresses. Cloak email shortcode component
37 Count posts per author Count posts per author in Hugo. [Howto] Count posts per authors in Hugo - #2 by jmooring
38 Create Hugo Posts With Bash Creating content pages for several products with similar properties. Create Hugo Posts With Bash
39 Simple search for Hugo Requires a JSON index to be generated at build time. Simple search for Hugo (drop-in)
40 Translate Months of the Year How to translate months of the year in multilingual sites. Using i18n for date formatting
41 Client-side search with Fuse.js Search tutorial using Fuse.js A lightweight, fuzzy, client-side search template for Hugo
16 Likes

Wouldn’t it be a good idea to have some of those/the relevant links added at the end of a matching (but often rather sparse) Docs entry?

1 Like

This forum also works as a reference point for the docs, somehow.