Skip to content
A theme for Hexo based on Bootstrap.
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A theme for Hexo based on Bootstrap. Allows for interchangeable Bootstrap themes. Features minimal dependencies and a clean design.


  • Syntax highlighting w/ Highlight.js
  • Bootstrap UI with easily changeable bootstrap.min.css
  • Copy buttons for code blocks to copy code directly into user's clipboards
  • projectpage for displaying code projects
  • download page for previewing file downloads

How to use

First, make sure you have Hexo installed (Instructions here)

Now, create your Hexo site

Note: hexo_site refers to the folder you create your Hexo site in (Hexo docs)

$ mkdir C:/hexo_site
$ cd C:/hexo_site
$ hexo init
$ npm install

Adding this theme to your site

$ git clone C:/hexo_site/themes/bootstrap-theme

Next, open up c:/hexo_site/_config.yml and change theme's value (which is landscape by default), to bootstrap-theme.

Now check it out

$ hexo generate
$ hexo serve

And your site should be located @ http://localhost:4000

Configure this theme


This theme has it's own _config.yml located in themes/bootstrap-theme/_config.yml. You can use it to modify:

  • The Bootstrap theme in use. Leave it blank for the default. If you need a theme, I recommend
  • Theme color used in <meta name="theme-color">
  • Favicon
  • Navbar items


CSS can be modified @ bootstrap-theme/source/css/styles.css

Javascript can be added @ bootstrap-theme/source/js/main.js

Add links to your own scripts/stylesheets @ bootstrap-theme/layout/partials/head.ejs and bootstrap-theme/layout/partials/scripts.ejs.

Site content

To add content of your site to this theme, take a look at these partials located in themes/bootstrap-theme/layout/partials

  • modal.ejs - the modal dialog displaying info about a post
  • extra_post_info.ejs - info displayed after the main post info in the 'Post details' dialog box on a blog post
  • head.ejs - add stylesheets here
  • navbar.ejs - modify the navbar here
  • scripts.ejs - add your own Javascript here

Types of pages


A regular Hexo post hexo new post-name


A regular Hexo page hexo new page page-name


A page for previewing a downloadable file

hexo new page my-download-file

Then navigate to C:/hexo_site/source/my-download-file/

In the Frontmatter, modify the following

  • layout - change to download
  • permalink - If you don't want the page at the site root, change this to something like downloads/my-download-file/index.html so the download link will look like
  • filename - the name of the file (Ex. test.exe)
  • filetype - the type of the file. You can give a description for the user too (Ex. .exe (a Windows executable)
  • summary - a description of the file
  • moreinfolink - a link to more information about the file being downloaded
  • downloadlink - the link to the file download

And you can edit the content of the page to write a longer description/installation instructions/etc about the file.


A page for showing a project

hexo new page my-project

Then navigate to C:/hexo_site/source/my-project/ In the Frontmatter, modify the following

  • layout - change to projectpage
  • projectname - the name of the project
  • permalink - If you don't want the page at the site root, change this to something like projects/my-project/index.html so the URL will look like
  • sourceurl - a link to the source code
  • downloadurl - A link to the download
  • subtitle - A short description

And you can edit the content of the page to write a longer description about the project.

Other info


This theme requires the following items to be located inside partials/head.ejs and partials/scripts.ejs (they are there by default, just don't remove them)

  • Bootstrap & its dependencies
  • Highlight.js

To do

  • Make highlight.js syntax highlighting theme an option in _config.yml
  • Run through hexo-unit-test and make necessary changes
  • Add more detail to index.ejs
You can’t perform that action at this time.