Installation and Overview

Jul 1, 2017 5 min.

Capsule is a CSS-only theme for Hugo sites that uses the Bulma CSS framework and Font-Awesome icons. Installation To install Capsule, you can add it as a submodule in the themes/ directory, or you copy the files manually. If you use Git to version your site, you can easily add Capsule as a submodule. From the base of your website repository, run: git submodule add themes/capsule If you would instead prefer to manually install the theme, copy over the contents of the static/ directory to your site.

Hosting on GitLab Pages

Feb 22, 2018 2 min.

Hugo sites can be hosted for free on GitLab. To add a theme to a site, you could always copy over the files into the themes/ directory and add them directly into the git tree, but using git submodules are easier for pulling theme updates. Unfortunately, building with submodules is a bit tricky with GitLab’s CI system. The following instructions will allow you to use the capsule theme as a submodule when building the site.


Jul 31, 2017 4 min.

Capsule provides three shortcodes for embedding images, responsive images, and groups of images with relevant metadata. img The {{< img >}} shortcode simply adds an img tag with the following parameters: align: aligns the image and wrap text around (‘right’ or ’left’) alt (or caption): set the alt text for the image class: adds CSS classes to the img tag link: wraps the img in anchor tags so that the image has a clickable link.


Jul 30, 2017 2 min.

Use the {{< blockquote >}} shortcode to highlight blocks of text and also add metadata. Parameters: author: source author, appears as the title in the blockquote footer source: book, context, etc. where the text is derived, appearing as a subtitle below the author in the footer date: also appears as subtitle in the footer Note You can specify whether the content inside the notification is rendered as plain HTML or Markdown by using {{< >}} or {{% %}}, respectively.


Jul 30, 2017 2 min.

The {{< banner >}} and {{< banner-fluid >}} shortcodes use the Bulma hero class to display banners that can either fill the entire container width or the entire viewport width, respectively. Parameters: title: the text to be displayed prominently in the center of the banner class: string of classes to add to banner subtitle: smaller text displayed under the title img: url to background image mode: how the image is used to fill the banner space (‘stretch’ or ‘repeat’) Text to display in the body of the banner goes in between the {{< banner >}} tags.


Jul 30, 2017 1 min.

The message shortcode is a simple wrapper for the Bulma message class. The syntax is: {{< message class="<class>" title="<title>" >}} content {{< /message >}} your title your content Replace <title> with the title of the message and <class> with a Bulma class. The class markup is taken directly from the names of the Bulma classes: is-dark is-primary is-info is-success is-danger is-warning If no class is specified, the message will default to something similar to the dark version.


Jul 29, 2017 1 min.

This shortcode wraps text within a Bulma notification class. They will occupy the container width. Given that no JS is included, notifications cannot be dismissed unless you add your own custom functions. These only really function to highlight text. To use, follow this syntax: {{< notification <class> >}} notification content {{< /notification >}} The available classes correspond to the class names available in Bulma: is-dark is-primary is-info is-success is-warning is-danger Note You can specify whether the content inside the notification is rendered as plain HTML or Markdown by using {{< >}} or {{% %}}, respectively.

Table of Contents

Jul 29, 2017 1 min.

Capsule can automatically generate a table of contents for each page. Simply set in the front matter (toml):

toc = true

The title from every # is used to generate each item in the table. The lesser the header is in the page hierarchy, the more it will be nested. See below.

Built-in Shortcodes

May 8, 2017 1 min.

Hugo comes with several built-in shortcodes. Some examples of them are displayed below. For a full list of available shortcodes, go to the Hugo website.

Syntax Highlighting

Feb 8, 2017 3 min.

Syntax highlighting works out-of-the-box via Hugo. Set the highlighter style in config.toml: 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 gulp. 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. Use ``` braces to add code blocks.