Published: August 16, 2019

Hugo CSS theme with Bulma

Create a responsive static site without JavaScript, using the Bulma CSS framework.


If you want to avoid JavaScript in your website, but still provide a responsive experience for users, modern “CSS only” frameworks are magical. Combining this with a static site generator creates a modern, fast, and secure website.

In order to build this website, I dug into several CSS frameworks and almost went with PureCSS before stumbling across Bulma. I found Bulma to be easier to use, more robust, and well documented. After trying it out, it did everything I needed right off the bat and this entire site was designed over the course of a week.

I’ve built other static websites using site generators including both Jekyll and Hugo. The plugin support for Jekyll is great, but ultimately the speed of Hugo made it my go to. Hugo, as well, is easy to use, robust, and well documented.

Building a Theme for Hugo

Setup

Installing Hugo is a breeze. Just follow the instructions at https://gohugo.io/getting-started/installing/.

Once Hugo is installed, you can create a new site:

$ hugo new site css-theme

Congratulations! Your new Hugo site is created in /home/user/path/css-theme.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Verify everything worked as expected by serving up your the new site.

$ cd css-theme
$ hugo server

                   | EN  
+------------------+----+
  Pages            |  3  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 5 ms
Watching for config changes in 
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Create a new theme

Stub out a new theme for Hugo

$ hugo new theme css-only-theme

Creating theme at /home/user/path/css-theme/themes/css-only-theme

Hugo stubs out a few default directories and files.

$ ls themes/css-only-theme/

archetypes  layouts  LICENSE  static  theme.toml

Now, update config.toml to use the new theme.

Note, also update the baseURL property as indicated.

baseURL = "localhost:1313"
languageCode = "en-us"
title = "My New Hugo Site"

theme = "css-only-theme"

Download the Bulma (minimized) Stylesheet

You can download the current stylesheet from Bulma’s Github repo here: https://raw.githubusercontent.com/jgthms/bulma/master/css/bulma.min.css

Save the file into the theme “static” directory at: themes/css-only-theme/static/css

cp bulma.min.css themes/css-only-theme/static/css/

Alternatively, you could reference the hosted stylesheet at: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css

Check out https://bulma.io/documentation/overview/start/ for a full breakdown of the options.

Update Hugo Templates

Index.html

Create an index page at themes/css-only-theme/layouts/index.html

<!DOCTYPE html>
<html>
  {{ partial "head" . }}
  <body>
    <h1 class="title is-1 has-text-success">Home page</h1>
  </body>
</html>

Now that the theme can access the local stylesheet, update the Hugo “head” partial template to reference it.

The template is located at: themes/css-only-theme/layouts/partials/head.html

Note: The variable {{ $.Site.BaseURL }} is the variable updated in the config.toml file earlier and allows for easy absolute referencing

<head>
	<link rel="stylesheet" href="{{ $.Site.BaseURL }}css/bulma.min.css">
</head>

Serve and Validate

Serving the site should now display the text on index.html using the prescribed bulma CSS styles:

Hello