Home

Awesome

This repository is replaced by https://github.com/gohugoio/hugoThemesSiteBuilder

Netlify Status

Hugo themes

A collection of all themes that were created by the Hugo community. See a complete listing of all of these themes along with screenshots and demos at themes.gohugo.io. Every theme in this list will automatically be added to the theme site.

Build script

For the curious, here’s how this automatic adding is accomplished.

Installation

Installing all themes

If you would like to install all of the available Hugo themes, simply clone the entire repository from within your working directory with this command:

git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes

Installing a single theme

<pre><code>cd themes git clone <em>URL_TO_THEME</em> </code></pre>

Adding a theme to the list

If your theme doesn't fit into the Hugo Basic Example site, we encourage theme authors to supply a self-contained Hugo site in /exampleSite/, but note that for security reasons the content directory on the Hugo showcase will still be published from the Hugo Basic Example repository.

NOTES

Each theme needs:

  1. To be added to the hugoThemes repo;
  2. To have the right fields in theme.toml;
  3. To have the right images;
  4. A good README;
  5. To include the resources folder if it's using Hugo Pipes to process assets;
  6. To have https://example.com as base url in exampleSite/config.{toml, yaml, json} to avoid the abuse of unused domains.

theme.toml

This file contains metadata about the theme and its creator or creators. Only theme.toml is accepted, not theme.yaml or not theme.json. The following fields are required:

name = "Theme Name"
license = "MIT"
licenselink = "Link to theme's license"
description = "Theme description"
homepage = "Website of your theme"
tags = ["blog", "company"]
features = ["some", "awesome", "features"]
min_version = "0.59.1"

# If the theme has multiple authors
authors = [
  {name = "Name of author", homepage = "Website of author"},
  {name = "Name of author", homepage = "Website of author"}
]

# If the theme has a single author
[author]
    name = "Your name"
    homepage = "Your website"

# If porting an existing theme
[original]
    author = "Name of original author"
    homepage = "His/Her website"
    repo = "Link to source code of original theme"

Note: Hugo started using full semver versions even for main releases in v0.54.0, therefore if your theme has a recent min_version you need to enter it as 0.59.0 and not 0.59.

LICENSE

Themes in this repository are accepted only if they come with an Open Source license, that allows for the theme to be freely used, modified, and shared.

To have a look at popular licenses please visit the Open Source Initiative website.

Note: When porting an existing theme from another platform to Hugo, or if you are forking another Hugo theme in order to add new features and you wish to submit the derivative work for inclusion at the Hugo Themes Showcase, you really need to make sure that the requirements of the original theme's license are met.

If a submission is found to violate the LICENSE of an original theme, it will be rejected without further discussion.

Media

Screenshots are used as theme previews in the list, they should feature a theme's layout (without any browser chrome or device mockups) and have the following dimensions:

Additional media may be provided in that same directory.

README.md

Your theme's README file (which should be written in Markdown and called README.md) serves a double purpose. This is because its content will appear in two places—i.e., it will appear:

  1. On your theme's details page at themes.gohugo.io; and
  2. At GitHub (as usual), on your theme's regular main page.

To ease accessibility for international users of your theme please provide at least an English translation of the README.

Note: If you add screenshots to the README please make use of absolute file paths instead of relative ones like /images/screenshot.png. Relative paths work great on GitHub but they don't correspond to the directory structure of themes.gohugo.io. Therefore, browsers will not be able to display screenshots on the theme site under the given (relative) path.

Example Site

Theme demo content on the Hugo Themes website is typically inherited from the hugoBasicExample repository.

If a theme demo requires its own content structure to function or if it is meant for a specialist use case, we will be more than glad to review your theme and accomodate its demo.

However you will still need to provide generic content that is as neutral as possible in the theme's exampleSite.

From time to time we may audit the demos hosted on the Hugo Themes website. If a demo is found to feature content that is not acceptable it will be disabled.

Resources

If your theme makes use of the Hugo Pipes methods toCSS and / or PostCSS, you need to take additional steps to make your theme compatible with the basic version of Hugo:

Common Permalink Issues

The demo of your theme will be available in a subdirectory of the Hugo Themes website and you need to make sure of the following:

Useful Tips

A Hugo theme may be used in various scenarios and as such it is important to keep it flexible:

Theme Maintenance

Theme Updates

Themes are updated automatically at:

00:00 UTC on the 1, 4, 7, 10, 13, 16, 19, 22, 25, 28 and 31th of every month

Testing a theme with the Hugo Themes website Build Script

To test your theme with the Hugo Themes Site Build Script locally: