Switched Hexo Theme to Apollo


I’ve been using the well-developed NexT theme for this Hexo blog since I built it. The old theme was fantastic, with a broad header, strong local search, neat, animated two-column layout and various comment systems including valine1 and gitment2. However, it’s a two-edged sword to have so many features binded, and more importantly, presented right within such a simple layout. Eventually, I realized that I actually don’t need the spacious header or the animated sidebar (I do, though, need local search, and we’ll return to that below). After exhaustively browsing the Hexo theme list, eventually I chose Apollo.


Pull from the master’s branch on GitHub.

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive
git clone themes/apollo


Then, in the _config.yml under Hexo’s root directory,

theme: apollo
  per_page: 0
  yearly: false
  monthly: false
  daily: false

and match your logo, favicon and Google Analytics API in the _config.yml under theme/Apollo.



There’s no Gitment support in original Apollo and I have to manually embed it. First, apply here for a new OAuth Application. Make sure the callback URL is the url of the blog. You’ll get a client ID and client secret after successfully finish this step. Next, in theme’s _config.yml, add

  enable: true
  owner: {{Your GitHub account}}
  repo: {{Name of your repository for comments storage}}
  client_id: {{Your client ID from the step above}}
  client_secret: {{Your client secret from the step above}}

In layout/partial/comment.jade, add

if theme.gitment.enable
    - var date =
    link(rel='stylesheet', href='')
        var gitment = new Gitment({
            id: '#{date}',
            owner: '#{theme.gitment.owner}',
            repo: '#{theme.gitment.repo}',
            oauth: {
                client_id: '#{theme.gitment.client_id}',
                client_secret: '#{theme.gitment.client_secret}',

You can now log into your GitHub account and initialize the comments on any page of post.

Local Search

The powerful local search is probably my favorite feature on theme NexT, but Apollo does not support such functions. I referred to this repo which already implemented this feature using Tipue Search. To successfully enable local search, go to the root directory of your blog and

npm install hexo-generator-tipue-search-json --save
hexo new page search

In the you just generated, add

<form id="search-form" style="text-align:center;">
  <i class="fa fa-search tipue_search_icon"></i>
  <input  type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="Type, Enter and Search" />

<div id="tipue_search_content"></div>

Meta Configurations

There are also several things I customized, e.g. color palette, font families and post width. They are not trivial if you’re really keen on turning your blog into a feast of the eyes but I won’t discuss in detail which properties I changed (it’s pointless remember all of them). They’re all in the source/css/apollo.css and all you need is some basic knowledge about HTML. However, I do want to recommend the CSS Format package of Sublime Text. It allows you switch painlessly between compact, compressed, expanded CSS styles and even more. It literally saved my day.

  1. Valine works fine and has powerful database support. However, it is strange that they require arithmatic verification as long as you enable the email notification function. Also, Valine has too large a space beneath it and it makes the webpage ugly. ↩︎
  2. No.1 comment system so far in my preference list. The only concern is that it requires a GitHub account if someone wants to comment under my posts which is very often not the case, e.g. my mom. Though, it’s been interesting to introduce her the GitHub world. ↩︎