Published: August 16, 2019
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.
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
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"
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.
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>
Serving the site should now display the text on index.html using the prescribed bulma CSS styles: