Hugo Bootstrap v4 Blog
A simple Hugo theme based on the Bootstrap v4 blog example.
See picturingjordan.com for an example of this theme in use.
- Responsive design
- Uses Bootstrap v4’s native system fonts to load quickly and look good on all platforms
- Basic 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)
- 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
- Allow addition of custom
<head>code in site’s
- Configurable display of summaries of content in list templates.
Clone the repository to your site’s
themes directory. Refer to
exampleSite/config.toml for recommended configuration values.
A few suggestions to help you get a good looking site quickly:
- Keep blog posts in the
content/postdirectory, for example:
- Keep static pages in the
contentdirectory, for example:
- Keep media like images in the
staticdirectory, for example:
- 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:
- Use the
tag in posts to control how much of a post is shown on summary pages
- Disable comments on a post by setting
comments = falsein 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 = trueto 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 or v7 installed, and then run the following from inside the theme’s directory:
$ npm install $ npm run build
There are several ways to help with the development of the theme:
- Open an issue on GitHub if you have problems or feature requests
- Alternatively, tackle one of the existing issues on the issue tracker
- Fork the repository on GitHub, add features on a “feature” branch like
update-bootstrap, and then send a pull request with your changes
Otherwise, the contents are GPLv3.