Go to file
Hugo Poi 2f7a0351f1 feat: can add blog post in nav 2022-12-03 16:47:16 +01:00
.github/ISSUE_TEMPLATE Update issue templates 2019-02-13 09:19:10 -06:00
archetypes Remove unused archetype 2019-02-18 15:39:38 -06:00
assets do not set main style on small viewport 2022-09-20 10:31:19 -05:00
data Reorganize 2019-01-31 18:19:20 -06:00
exampleSite fix 71 2022-05-30 21:33:30 -05:00
i18n use hugo's toc 2021-09-12 14:24:53 -05:00
images Add theme screenshots 2019-02-15 11:24:23 -06:00
layouts feat: can add blog post in nav 2022-12-03 16:47:16 +01:00
static feat(prism): custom prism scripts for mooore languages 2022-12-03 16:46:57 +01:00
.gitignore Ignore resources dir 2019-02-25 20:20:23 -06:00
LICENSE Reorganize 2019-01-31 18:19:20 -06:00
README.md allow nav title text 2021-10-17 21:54:41 -05:00
local_git_config.sh script to setup local git config 2020-06-10 19:51:33 -05:00
netlify.toml update hugo version to 0.83.1 2021-05-19 21:06:01 -05:00
task_regen_toc.sh allow nav title text 2021-10-17 21:54:41 -05:00
task_serve.sh config option to show theme switcher 2021-01-10 13:36:21 -06:00
theme.toml update min hugo version 2021-05-25 13:51:55 -05:00



Netlify Status

An accessibility-friendly Hugo theme, ported from the original Cupper project.

Table of contents



Minimum Hugo version

Hugo version 0.81.0 or higher is required. View the Hugo releases and download the binary for your OS.


From the root of your site:

git submodule add https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme


From the root of your site:

git submodule update --remote --merge

Run example site

From the root of themes/cupper-hugo-theme/exampleSite:

hugo server --themesDir ../..


Copy config.yaml from the exampleSite, then edit as desired.

  • The navTitleText param will be checked in your config file. If this param exists, the text value will be used as the nav title
  • Otherwise, a logo will be used as the nav title. Place your SVG logo at static/images/logo.svg. If you don't provide a logo, then the default theme logo will be used


Upload your image to RealFaviconGenerator then copy-paste the generated favicon files under static.


See the full list of supported shortcodes.

Syntax highlighting

Syntax highlighting is provided by Prism. See this markdown code fences example.

By default, only a few languages are supported. If you want to add more, follow these steps:

  1. Select the languages you want from https://prismjs.com/download.html
  2. Download the JS file, then copy it to static/js/prism.js
  3. Download the CSS file, then copy it to static/css/prism.css

Enable Table of Contents for a Blog Post

Set toc to true. For example:

title: "My page with a few headings"
toc: true


The strings in the templates of this theme can be localized. Make a copy of <THEME_BASE_FOLDER>/i18n/en.yaml to <YOUR_SITE_FOLDER>/i18n/<YOUR_SITE_LANGUAGE>.yaml, and translate one by one, changing the translation field.

Here is a tutorial that goes more in depth about this.

Custom CSS and JS

You can provide an optional list of custom CSS files, which must be placed inside the static dir. These will load after the theme CSS loads. So, static/css/custom_01.css translates to css/custom_01.css.

You can provide an optional list of custom JS files, which must be placed inside the static dir. These will load after the theme JS loads. So, static/js/custom_01.js translates to js/custom_01.js.

See the example site config file for sample usage.

Default to Dark Theme

In the site config file set the param defaultDarkTheme to true.

E.g. for config.yaml

  defaultDarkTheme: true

Note that the default of light or dark theme only applies to the first visit to a site using this theme. Once the site is visited the choice of dark or light theme is stored in 'local storage' in the browser.

To reset to a 'first visit' scenario (e.g. for testing), one needs to either browse in private mode (aka Incognito/InPrivate/etc) or delete 'local storage' for this site. The easiest way to do that, but which affects other sites as well, is to use the 'Clear History' feature of the browser.

Check your browser's help or documentation for details.

Non-Git Repo

If your site is not a git repo, then set enableGitInfo to false in your config file.

Getting help

If you run into an issue that isn't answered by this documentation or the exampleSite, then visit the Hugo forum. The folks there are helpful and friendly. Before asking your question, be sure to read the requesting help guidelines.


Thank you to Heydon Pickering and The Paciello Group for creating the original Cupper project.