xusiwei / blackburn

A Hugo theme built using Yahoo's Pure CSS

Blackburn

Blackburn is a clear and responsive theme for Hugo. You can see it in action on my personal website here.

Overview

• Based on Yahoo's [Pure CSS] (http://purecss.io/)
• Fixed sidebar with social links:
  • Twitter
  • Facebook
  • Instagram
  • GitHub
  • Stack Overflow
  • LinkedIn
• Client-side syntax highlighting by Highlight.js
• Web analytics by Google Analytics
• Comments by Disqus
• Icons by Font Awesome

Screenshots

Installation

In your Hugo site directory, run:

$ mkdir themes
$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.git

or download from here.

See Hugo Quickstart Guide for more information.

Configuration

Example config.toml:

baseurl = "http://replace-this-with-your-hugo-site.com/"
title = "Your site title"
author = "Your name"
# Shown in the side menu
copyright = "© 2016. All rights reserved."
canonifyurls = true
paginate = 10

[indexes]
  tag = "tags"
  topic = "topics"

[params]
  # Shown in the home page
  subtitle = "A Hugo Theme"
  brand = "Blackburn"
  googleAnalytics = "Your Google Analytics tracking ID"
  disqus = "Your Disqus shortname"
  # CSS name for highlight.js
  highlightjs = "androidstudio"
  dateFormat = "02 Jan 2006, 15:04"

[menu]
  # Shown in the side menu.
  [[menu.main]]
    name = "Home"
    pre = "<i class='fa fa-home fa-fw'></i>"
    weight = 0
    identifier = "home"
    url = "/"
  [[menu.main]]
    name = "Posts"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight = 1
    identifier = "post"
    url = "/post/"
  [[menu.main]]
    name = "About"
    pre = "<i class='fa fa-user fa-fw'></i>"
    weight = 2
    identifier = "about"
    url = "/about/"
  [[menu.main]]
    name = "Contact"
    pre = "<i class='fa fa-phone fa-fw'></i>"
    weight = 3
    url = "/contact/"

[social]
  # Link your social networking accouns to the side menu
  # by entering your username or ID.
  twitter = "*"
  facebook = "*"
  instagram = "*"
  github = "yoshiharuyamashita"
  stackoverflow = "*"
  linkedin = "*"

Usage

• Write Markdown files in content/post
• Add fixed pages (e.g., about.md) to the side menu by defining them under [menu] in the config.toml:

[[menu.main]]
  name = "About"
  pre = "<i class='fa fa-user fa-fw'></i>"
  weight = 2
  identifier = "about"
  url = "/about/"

License

• MIT