Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A CSS-only Hugo theme using the Bulma CSS framework and Font-Awesome icons.

Capsule Corp.


From the base of your website, run:

git submodule add themes/capsule

You can then either build Hugo on the command line and pass the -t capsule flag, or you can add theme = "capsule" to your config.toml file.

Note: Any additional documentation will be added to the Capsule Demo site, not here.


1. Syntax highlighting (via pygments)

For code blocks, pick the highlighter style in config.toml by setting:

pygmentsstyle = "<style>"

For dark highlighter themes, you should rebuild capsule CSS with build/extra/syntax.sass. Uncomment it from the capsule.sass file and run npm run build.

Without that file, the background color will default to Bulma's light background-color, and light colored elements meant to be displayed against dark backgrounds from dark themes will be hard to read.

2. Unused classes in Bulma

Capsule is set to only compile the classes it needs. To enable more Bulma classes, uncomment the relevant sass files in build/bulma/bulma.sass.

3. Enable automatic generation of nav menus

In your config.toml files, set:

SectionPagesMenu = "main"

With this set, capsule with automatically generate a navigation menu in the navbar based on all the sections (the directories inside the content/ directory) present in your site.

4. Add git metadata to your pages

If you host your site on a public git vc server, you can set capsule to build a "Last edited on ..." note to each page that uses git metadata to display the date of the last commit and add a link to its blob on your public repo.

In your config.toml file, set:

enableGitInfo = true

  repo = "<user>/<repo>

The repo variable should point to the url of your repo for your website. The above example uses GitHub, but GitLab and any other site that follows the format of <siteurl>/<user>/<repo>/commit/<hash> will work, too.

5. Add custom javascript or CSS to a page

In the toml header, add:

css = """

js = """

Any CSS or JS specified here will add to the site <head> when Hugo renders the page.

6. Enable table of contents

To generate a table of contents for a specific page, add to the toml header:

toc = true

The table of contents will contain all the header items defined in the markdown. The nesting levels for each match the header weight (h1, h2, etc.).


To (re)build the CSS, you need to have npm and installed. Clone the capsule repository and once in it run:

npm install

and then build by:

npm run build

You can enable/disable sass components by editing build/sass/capsule.sass before building. To use your own customized version of capsule, a) fork this repository and set the Git submodule to use it, or b) make a symlink to your custom build in the Hugo themes/ directory, assuming your build system allows this.