Hugo Bootstrap v4 Blog

A simple but opinionated Hugo theme geared towards blog-style content. Based on the older two-column Bootstrap blog example that was used for several Bootstrap versions, but has now been retired in favor of a "snarky" (their words) new example as of version 4.0.0's final release.

View Demo Download Source

Features

  • Responsive design
  • Uses Bootstrap v4's native system font stack to load quickly and look good on all platforms
  • Excellent structured data (JSON-LD), OpenGraph, and Twitter Card metadata support
  • robots.txt linking to XML sitemap (disabled by default, see Hugo docs)
  • Basic support for multi-lingual content (added in Hugo 0.17) and user interface translation (i18n), including RTL languages like Arabic
  • Supports Google, Bing, and Yandex site verification via meta tags
  • Supports Google Analytics (async version), see Hugo docs
  • Supports Disqus comments, see Hugo docs
  • Can show a message about cookie usage to the user, see exampleSite/config.toml
  • Allow addition of custom <head> code in site's layouts/partial/head-custom.html (see #17)
  • Configurable display of summaries of content in list templates.
  • Configurable keywords for every post

Usage

Clone the repository to your site's themes directory. Refer to exampleSite/config.toml for recommended configuration values.

Content Suggestions

A few suggestions to help you get a good looking site quickly:

  • Keep blog posts in the content/posts directory, for example: content/posts/my-first-post.md
  • Keep static pages in the content directory, for example: content/about.md
  • Keep media like images in the static directory, for example: static/2016/10/screenshot.png
  • If you want an image to be shown when you share a post on social media, specify at least one image in the post's front matter, for example: images: ["/2016/10/screenshot.png"]
  • Use the <!--more--> tag in posts to control how much of a post is shown on summary pages
  • Disable comments on a post by setting comments = false in its frontmatter
  • Disable social sharing icons site wide (or on individual pages/posts) by setting sharingicons = false
  • If your content is stored in git, add enableGitInfo = true to your site config and Hugo will use git history to set a more accurate modification date in page metadata

See the source code and structure of picturingjordan.com to get more ideas.

Building (For Developers)

This theme uses the Bootstrap framework. A static version of this is already included, but if you want to bump the version, tweak the style, etc, you'll need to rebuild the assets. Make sure you have NodeJS >= v6 installed, and then run the following from inside the theme's directory:

$ npm install
$ npm run build

GitHub