Blackburn is a clear and responsive theme for Hugo.
This fork has some minor adjustments of the original theme. It's tweaked into using local assets only. The resulting website won't load additional fonts, javascript or css from a cdn. This increases loading speed a lot and improves privacy, as cloudflare, google and others don't see visitors postloading additional stuff anymore.
- Based on Yahoo's Pure CSS (v1.0.0)
- Fixed sidebar with social links:
- GNU social
- Google+
- Tumblr
- Flickr
- 500px
- YouTube
- Vimeo
- Vine
- SlideShare
- Hacker News
- GitHub
- GitLab
- Bitbucket
- Stack Overflow
- Server Fault
- Steam
- MobyGames
- Last.fm
- Discogs
- Keybase
- Client-side syntax highlighting by Highlight.js (v10.6.0)
- Web analytics by Piwik, Google Analytics, or GoatCounter
- Comments by Disqus or Commento
- Icons by Font Awesome (v5.15.2)
In your Hugo site directory, run:
$ mkdir themes
$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.gitor download from here.
See Hugo Quickstart Guide for more information.
Example config.toml:
baseurl = "https://www.example.com/" # Make sure to end baseurl with a '/'
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"
highlightjs_extra_languages = ["yaml"]
dateFormat = "02 Jan 2006, 15:04"
# Include any custom CSS and/or JS files
# (relative to /static folder)
custom_css = ["css/my.css"]
custom_js = ["js/my.js"]
[params.piwikAnalytics]
siteid = 2
piwikroot = "//analytics.example.com/"
[menu]
# Shown in the side menu.
[[menu.main]]
name = "Home"
pre = "<i class='fa fa-home fa-fw'></i>"
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "Posts"
pre = "<i class='fa fa-list fa-fw'></i>"
weight = 2
identifier = "post"
url = "/post/"
[[menu.main]]
name = "About"
pre = "<i class='fa fa-user fa-fw'></i>"
weight = 3
identifier = "about"
url = "/about/"
[[menu.main]]
name = "Contact"
pre = "<i class='fa fa-phone fa-fw'></i>"
weight = 4
url = "/contact/"
[social]
# Link your social networking accounts to the side menu
# by entering your username or ID.
# SNS microblogging
twitter = "*"
gnusocial = "*" # Specify href (e.g. https://quitter.se/yourusername)
facebook = "*"
googleplus = "*"
weibo = "*"
tumblr = "*"
# SNS photo/video sharing
instagram = "*"
flickr = "*"
photo500px = "*"
pinterest = "*"
youtube = "*"
vimeo = "*"
vine = "*"
slideshare = "*"
# SNS career oriented
linkedin = "*"
xing = "*"
# SNS news
reddit = "*"
hackernews = "*"
# Techie
github = "yoshiharuyamashita"
gitlab = "*"
bitbucket = "*"
stackoverflow = "*"
serverfault = "*"
# Gaming
steam = "*"
mobygames = "*"
# Music
lastfm = "*"
discogs = "*"
# Other
keybase = "*"<form action="https://fabform.io/f/{form-id}" method="post">
<label for="email">Your Email</label>
<input name="email" type="email">
<button type="submit">Submit</button>
</form>
- 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/"- Override the theme by linking to custom CSS files or URLs:
[params]
custom_css = ["css/my.css"]- Add new behaviours by linking to custom JS files or URLs:
[params]
custom_js = ["js/my.js", "https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.min.js"]{{< pure_table
"columnName1|columnName2|...|columnName99"
"dataValue1|dataValue2|...|dataValue99"
"dataValue1|dataValue2|...|dataValue99"
"dataValue1|dataValue2|...|dataValue99"
"... and so on"
>}}
where each positional parameter is separated by the vertical bar (i.e., |). The resulting <table> is set to have class="pure-table pure-table-striped".
{{< fluid_imgs
"class|src|alt"
"class|src|alt"
"... and so on"
>}}
where each positional parameter is separated by the vertical bar (i.e., |).
class: specifies a Pure CSS unit class name (required)src: specifies the URL of an image (required)alt: specifies an alternate text for an image (optional)
See here for examples.
{{% fluid_img "/path/to/img" %}}
{{% fluid_img class="pure-u-1-2" src="/path/to/img" alt="img description" %}}
{{% fluid_img class="pure-u-1-3" src="/path/to/img" caption="img description" %}}
class,altandcaptionare optional.- See Pure CSS Grids for possible
classvalues.