Chris Martin

Web Technology, IT Infrastructure, and Other Puzzles

Hexo Theme: Bootstrap Blog

I've published a theme for the Hexo blogging framework creatively named, "Bootstrap Blog". It integrates Hexo with Twitter Bootstrap v3 for us non-designers who like to cheat leverage CSS frameworks.

This site is also using a customized version of the theme.


  • Bootstrap v3 markup
  • Two-column, fully responsive
  • Configurable menu, sidebar widgets
  • Tag, Category, and Archive listing pages
  • Open Graph support
  • Social sharing modal (Twitter, Facebook, Pinterest, and Google+)
  • Fancybox plugin
  • Image gallery in posts
  • Disqus and Google Analytics integration

The included EJS layouts, client-side scripts, and tag/helper plugins have been built to output Bootstrap markup. If you already have a favorite 3rd-party bootstrap template, integrating its stylesheet with this theme should be an easy process.

There are many other great free Hexo themes to choose from. Some have more built-in functionality than others. The goal was to keep this theme simple and relatively feature-consistent1 with the official Landscape default theme so that it is familiar and easy to customize.

1: The search form and sidebar configuration option were removed. Stylus styles converted to standard CSS files.


Here is a tour of the primary files that you'll likely want to customize to make the theme your own:

  • _config.yml : There are a handful of configuration options here that can be used to quickly customize parts of the layout and content (menu links, sidebar widget order, favicon, etc.).
  • source/css/custom.css : You can safely nuke all of the styles within this file and replace with your own look and feel. The other CSS files are certainly fair game, but they are used primarily as baseline component styles to be extended upon. Add more stylesheets to styles.styl for a single bundle.
  • layout/_partial/head.ejs and layout/_partial/inline-scripts.ejs : Control the links to stylesheets and scripts in the <head> and just before the closing </body>.
  • source/js/script.js : jQuery DOM-ready handling and JS library initialization can be found here.


Here is a reference of the components that produce Bootstrap markup with this theme...

Responsive tables


| Table Header 1 | Table Header 2 | Table Header 3 |
| - | - | - |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |


Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

To adjust the table class names, edit the source/js/script.js JavaScript in the // Bootstrap table style section.

In the Markdown front-matter:

- assets/images/HNCK0537.jpg
- assets/images/HNCK6173.jpg
- assets/images/HNCK8229.jpg
- assets/images/HNCK8597.jpg

...outputs a gallery of Bootstrap thumbnails at the bottom of an article.

Example gallery

Bootstrap Callouts

A custom tag for the Bootstrap "callout" style is available for use:

In the Markdown:

{% callout info %}
#### {% fa info-circle %} Info
This is some info content
{% endcallout %}

{% callout warning %}
#### {% fa exclamation-triangle %} Warning
This is some warning content
{% endcallout %}

{% callout danger %}
#### {% fa exclamation-triangle %} Danger
This is some danger content
{% endcallout %}



This is some info content


This is some warning content


This is some danger content

Bootstrap pagination

A custom helper is used to produce Bootstrap pagination markup. It is a drop-in replacement for Hexo's built-in paginator().

In the EJS templates:

<%- bs_paginator({
      prev_text: '<i class="fa fa-chevron-left"></i> Prev',
      next_text: 'Next <i class="fa fa-chevron-right"></i>'
    }) %>


Example paginator

Tag plugins: hexo-tag-bootstrap

Visit Joseph Pan's blog for a demo of additional Bootstrap tag plugins (buttons, labels, badges, alerts, and more).

Available by installing the hexo-tag-bootstrap plugin.


If you run into a problem with the Bootstrap Blog theme, please open a GitHub issue.

If you enjoy it, send me a tweet @c_g_martin!