This template is intended for the purpose of creating a new website, and as such, will be occassionally updated to work with the latest version of Hugo. The version used currently is Hugo v0.148.1.
This doesn't mean that it uses all of Hugo's features. In fact, the goal of this starter is to use as few as possible so that the amount of Hugo-specific detail you need to understand is kept to a minimum. Your experience should feel as close to "edit some HTML, write some Markdown" as possible.
To get started, install Hugo and clone this repository. Then cd into the repository and run hugo serve --renderToMemory to view the site.
- Dynamic social media/preview cards
- My recommended CSS file organization:
layout.css– Define styles for the entire site structure (columns, nav bar, CSS reset, etc).typography.css– Consolidated styles for text content elementscustom.css– For declaring CSS variables, and writing page-specific classes
- RSS feed with full post content.
- Shortcodes are avoided because they tie your Markdown to Hugo-specific syntax, it is recommended to just write HTML as much as possible. But Hugo has built-in "embedded" shortcodes for the most common needs. Privacy preservation for those is turned on in
hugo.toml. - Pre-filled
netlify.tomlfile to ease deployment to Netlify (great host, generous free tier). - Hugo-specific .gitignore file
- Custom fonts used, to demonstrate how they ought to be added
This starter tries really hard to be as minimal as possible. But Hugo has a ton of features, some of which you will eventually want to reach for. The following are probably the most important:
- Render hooks: These allow you to control how markdown is converted to HTML, which enables things like adding "external" classes to links that point away from your site, or rendering images within elements.
- Taxonomies: For organizing your content by tags and categories.
- Full-text search
- Sections: Create multiple content sections and give them separate designs and RSS feeds. For example, the riffs section on my site.
- Markdown attributes: Easily add classes and other attributes to markdown elements.
- Image processing pipelines.
- Page bundles: A way to colocate images with the pages where they're used. I personally don't use this because I like my writing to be a flat list of Markdown files.
- Data sources: To load content from local or remote sources (like headless CMSes).