~alanorth/hugo-theme-bootstrap4-blog

A blogging-centric Bootstrap v4 theme for the Hugo static site generator.
cb81c781 — Alan Orth 2 days ago
CHANGELOG.md: Add note about dart sass
37e48b1e — Alan Orth 2 days ago
Regenerate static assets
39a9a8fd — Alan Orth 2 days ago
Adjust source/scss for dart sass

clone

read-only
https://git.sr.ht/~alanorth/hugo-theme-bootstrap4-blog
read/write
git@git.sr.ht:~alanorth/hugo-theme-bootstrap4-blog

You can also use your local clone with git send-email.

#Hugo Bootstrap v4 Blog Build Status builds.sr.ht status

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.

Screenshot

See picturingjordan.com for an example of this theme in use.

#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 and Farsi
  • Supports Google, Bing, and Yandex site verification via meta tags
  • Supports GDPR-compliant Google Analytics (script is not even loaded until after the user agrees) with configurable consent banner, see exampleSite/config.toml
  • Supports Disqus comments, see Hugo docs
  • Allow addition of custom <head> code in site's layouts/partials/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 >= v10 installed, and then run the following from inside the theme's directory:

$ npm install
$ npm run build

#Contributing

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

#License

This repository contains SASS and HTML code from the Bootstrap project, which is licensed under the MIT license and CC BY 3.0, and Font Awesome, which uses various licenses.