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 |