Setting up Hexo blog with bootstrap theme

summary

This post described modifying a hexo static blog site server to use a different theme than the default theme. The default theme is landscape. It is replaced with hexo-theme-bootstrap-blog.

I also discuss the motivation for selecting hexo, rather than alternatives.

background

I orginally set up a Wordpress site, but after loading math, code, and a couple of other add-ons the editor stopped working. As I tried to fix that I came to realize that Wordpress was was unduly complex, heavy, and bug prone. Getting the security right on nginx server configuration was also a serious task.

I little testimony browsing educated me. I came to understand that I didn’t need a full fledged dynamic site generator. All I needed was a simple lightweight static site generator.

I found this site gives a good oversight comparing the popular static site generators Jekyll, Hugo, and Hexo. Jekyll is built with Ruby, while Hugo is built on Go. I couldn’t forsee any immediate other ways I would use either of those languages, so Hexo it was. Hexo just uses mostly Markdown for the blogging text, and embedded javascript (EJS) for layout.

According to that comparison, the only disadvantage of Hexo is that “Hexo has a relatively large community but the majority is non-english speakers (from China)”. If that is supposed to mean that most discussion doesn’t take place in English, I can testify that is not true. Well over 90% takes place in English. And I’ve found good tips from enthusiaistic users of all continents. Morever, the reason that Hexo has so many non English speaking users is that it promises multi-language support (although I haven’t used it yet).

Hexo-theme-bootstrap-blog

The hexo-theme-bootstrap-blog demo site is here.
cgmartin adapted bootstrap-blog to use on hexo, resulting in hexo-theme-bootstrap-blog.

The relative advantages of the landscape to hexo-theme-bootstrap-blog theme change are:

  • hexo-theme-bootstrap-blog uses [extended java script EJS template language and CSS style specs, whereas landscape uses swig*.
    • swig is no loger maintained.
    • EJS and CSS are more familiar and are well maintained.
    • using hexo template helper functions works with EJS, but not with swig (despite landscape/swig being the default).
  • bootstrap is an industry standart for cell/pad/monitor cross platform display.

Setup of the theme

I used the myblog branch of hexo-theme-bootstrap-blog bacause it comes setup with a sidebar TOC:

cd .../hexo/themes
git clone git@github.com:cgmartin/hexo-theme-bootstrap-blog.git
git checkout myblog
git pull origin myblog

Modify the configuration files (the top _config.yml) to reference the new theme.

_config.yml
#theme: landscape
theme: bootstrap-blog

Changes

change the icon

The first thing that to be changed was the icon in the blog header. After adding the file

.../source/images/Frog-01.png

I then edited header.ejs:

/layout/_partial/header.ejs
...
<img id="blog-logo" width="80" height="80" alt="my name of whatever" src="/images/Frog-01.png">
...

remove the ad block unless you want it

I was surpised to open the site from a Windows machine and see ads their already. The ads seem to result from this block:

layout/_partial/sidebar.ejs
...
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog-general-responsive-sidebar -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4721191851305300"
data-ad-slot="5846920073"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
...

The adds were removed by wrapping in an if false {…} condition:

layout/_partial/sidebar.ejs
...
<% if (false){ %>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog-general-responsive-sidebar -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4721191851305300"
data-ad-slot="5846920073"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<% } %>
...

Table of contents, and use of <!-- more --> to prevent confusion on home page.

The table of contents for a post is enables by putting

toc: true

in the front matter.

Some possible confusion occurs because the blog landing page lists several posts in serial order. So it seems like the reader is looking at an ordinary post, but there is no TOC visible. It is necessary to access an individual post to see the TOC.

Adding a line

<!-- more -->

after a post summary will allow the summary to be displayed, and if and when the more button is clicked, the individual post will be accessed and the TOC will appear.