This theme is an extreme fast, responsive and feature-rich blog theme for Hugo.

• Features
• Palettes
• Installation
• Configuration
• Parameters
  • Global Parameters
  • Page Parameters
• Comments
• Hooks
• Custom Assets.
• Social Links.
• Various Shortcodes.
• Contribute

• Extreme Fast: Google PageSpeed Insights's score 95-100.
• Built on top of Material Design for Bootstrap 5.
• Responsive.
• Various Palettes.
• Highly Configurable.
• Dark Mode Switcher.
• Multilingual(I18N).
• Search.
• Breadcrumb.
• Archive.
• Lazy Loading Resources, such as image and iframe.
• Table of Contents.
• Comments: supports Disqus and Utterances.
• Custom Assets: custom CSS and JS.
• Hooks: provides ability to add custom code in page, such as head, body, sidebar etc.
• Social Links.
• Various Shortcodes.
• Twitter Cards and Open Graph.

Available palettes: blue, blue-gray, brown, cyan, gray, green, indigo, orange, pink, purple, red, teal, yellow.

$ hugo new site myblog
$ cd myblog
$ git init
$ git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
$ cp -a themes/hugo-theme-bootstrap/exampleSite/* .
$ hugo server

As the example site shown, the configuration are separated into multiple files, this is much clearer than a single configuration file, especially in a multilingual website.

Except the Google webmaster tool, the other webmaster tools cannot work with hugo --minify, because they cannot recognize the minified meta tag.

disqusShortname = "yourdiscussshortname"

disqusShortname is a site's configuration, not a parameter. Place it under the params won't work.

Checkout the Disqus website for details.

Utterances is a lightweight comments widget built on GitHub issues.

[utterances]
  repo = "user/repo"
  #issueTerm = "pathname" # pathname, url, title, og:title.
  #label = "comment" # Optional.
  #theme = "github-light" # github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.

Unlike Disqus, Utterances is a parameter. You should put it under the params.

There are two ways to customize the internal and external assets.

This is the best way to customize the theme's CSS and JS. Just create the files assets/css/custom.css and assets/js/custom.js. These files will be bundled into one for reducing HTTP requests.

Any external CSS and JS resources can be imported by the parameters customCSS and customJS.

Both of customCSS and customJS can also import the internal assets. Just put the files into the static folder.

Hooks are used for adding code on pages.

For using a hook, you need to create an HTML file named with the hook name in the directory layouts/partials/hooks.

For example:

$ echo "SIDEBAR BEGIN" > layouts/partials/hooks/sidebar-begin.html

The social is a set of key value pairs of social links that mapping from platform to user identifier.

Enable social links by creating a file config/_default/social.toml with the following content:

email = "[email protected]"
github = "githubusername"
# ...

Any contributions are welcome.

• ⭐ if you are interested in this theme.
• File an issue
  • Ask questions.
  • Report bugs.
  • Request features.
• Create a PR:
  • Fix issues and bugs.
  • Add new features.
  • Improve documentations.

This theme relies on npm and webpack for development. The source of js and scss are placed in src directory.

Install dependencies

$ npm install

Rebuild assets

$ npm run build

npm run watch rebuild assets on change.

Preview

$ cd exampleSite
$ hugo server --themesDir=../../