Blackburn

Blackburn is a Hugo blog theme built on Yahoo's Pure CSS that delivers a clear, responsive layout with a fixed sidebar of social links for personal and content sites.

What is Blackburn?

Blackburn is a Hugo theme built on Yahoo's Pure CSS (v1.0.0) that turns a folder of Markdown files into a responsive blog or personal website. You write posts in the content/post directory, define menus and social links in the site's config.toml, and the theme renders a home page plus the side menu with a fixed sidebar. It was created by GitHub user yoshiharuyamashita and is open-sourced under the MIT license.

Key Features

Blackburn packs a range of features into a single Hugo theme, all configurable from the site configuration.

• Pure CSS foundation — Built with Yahoo's Pure CSS v1.0.0, a lightweight CSS framework that provides responsive grids and base styling without a heavy framework.
• Fixed social sidebar — The sidebar links to 26 networks, including Twitter, GitHub, GitLab, LinkedIn, Instagram, Reddit, YouTube, Stack Overflow, and Steam, all set via the [social] section of config.toml.
• Highlight.js code highlighting — Client-side syntax highlighting is powered by Highlight.js v10.6.0; you can set a theme name like androidstudio and add extra languages such as YAML.
• Three analytics providers — Choose Piwik (with siteid and piwikroot), Google Analytics, or GoatCounter through params.
• Disqus or Commento comments — Comments are handled by Disqus or Commento, depending on which shortname or URL you configure.
• Font Awesome icons — Menu items and social icons use Font Awesome v5.15.2, giving 1,500+ icon choices.
• Custom CSS and JavaScript — Extend or override the design with custom_css and custom_js arrays, accepting local files or CDN URLs (e.g. a zooming library).
• Built-in shortcodes — The pure_table shortcode creates striped Pure CSS tables, and fluid_imgs arranges images in responsive Pure CSS grid columns.

Who is it for?

Blackburn targets people who want a simple, fast personal blog or portfolio on Hugo with minimal dependency on JavaScript frameworks.

• Personal bloggers get a clean two-column layout and a persistent sidebar that surfaces their social presence.
• Hugo developers use it as a starter theme they can fork, restyle with custom CSS, and extend with custom JS behaviors.
• Technical writers benefit from built-in syntax highlighting and straightforward Markdown workflows for publishing code-heavy posts.

What can you do with it?

Blackburn's concrete features enable several common content workflows.

• Bloggers: Publish Markdown posts in content/post and show recent posts on a home page that also displays the site subtitle and brand name.
• Developers: Add a contact form without writing backend code by inserting the Fabform HTML snippet included in the theme documentation, which posts form data to a Fabform endpoint.
• Visual storytellers: Use fluid_imgs to build responsive image grids for photo essays or portfolios, with per-image alt text and Pure CSS unit classes.

How does it work?

Install the theme by cloning the repository into the themes directory and then configure everything from config.toml. Content is written as Markdown, with fixed pages like About added to the side menu through the [menu] block. The theme also lets you define a dateFormat, pagination count, and copyright line directly in the config.

Pros and cons

• Pros: The theme stays lightweight by relying on Pure CSS, configures a huge set of social links without extra setup, and bundles two practical shortcodes for tables and image layouts.
• Cons: Some social platforms listed in the config (Google+ and Vine, for example) are no longer active, so those sidebar entries may link nowhere; the theme also pins an older Pure CSS version and does not appear to get frequent releases.

FAQ

Is Blackburn free?

Yes, Blackburn is released under the MIT License, so you can use, modify, and redistribute it freely, including for commercial projects.

How do I add a contact form?

The theme documentation includes a Fabform snippet. You paste the HTML form into any Hugo page, replace the form ID in the action URL, and submissions are sent to your Fabform account.

Which analytics services does it support?

Three options are available: Piwik (configured with siteid and piwikroot), Google Analytics (via a tracking ID), and GoatCounter. Only one provider is enabled per site.

What shortcodes are included?

Blackburn provides pure_table for striped Pure CSS tables and fluid_imgs for responsive image grids. The older fluid_img shortcode is marked obsolete but still works for simple images.

Does Blackburn have built-in syntax highlighting?

Yes. The theme loads Highlight.js v10.6.0 and lets you choose a theme name (such as androidstudio) plus extra languages like YAML for code blocks written in your Markdown.