How to setup a hexo-based blog: Part 2

Previously we have setup and published the hexo-based blog. The article source code and the hexo configuration files are under git version control.

Config theme, the wrong way

As most hexo tutorials, the next step is to change the default theme. There are lots of themes that you can choose from. However, most of the theme simply ask you to clone itself under the themes folder.

In this case, we will use the popular theme NexT. Its document specified follow below steps:

  • Install

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next
  • Update the _config.yml to use this theme

    1
    theme: next
  • Pull the theme update when it is needed

    1
    2
    cd theme/next
    git pull

The problem

For most of themes (including NexT), we will have to modify the theme’s _config.yml file which is under the theme folder, in order to:

  • change the configuration on the theme level, such change theme style
  • update personal information
  • setup Google Analytic key
  • integrate with 3rd party commenting plugin
  • future customize the theme the way you want

Naturally, you would like to have above modifications also under version control, so you check them in and push to Git.

Now, if you head to Github source code page, you will find an interesting grayed-out folder named “Next”
Grayed-out folder in github
You also lost the possibility to browse the theme source code there.

Root cause

Technically we created a nested git repository structure: there is a git repository “Next” underneath of git repository “Blog-Hexo”. This git document has a good explanation about this.

The right way

As our customized theme became an independent component component of the blog system, it requires proper version control of it.

  1. Fork theme project
    By doing this, you can properly version control your modification of your theme, but still have the possibility to keep it up-to-date. The fork version is https://github.com/linkcd/hexo-theme-next.

  2. Create Git submodule which named “next-linkcd” (means it’s our own version of NexT theme), and points to https://github.com/linkcd/hexo-theme-next.

    1
    2
    cd blog-hexo
    git submodule add https://github.com/linkcd/hexo-theme-next themes/next-linkcd
  3. Ask hexo to use our own theme

    1
    theme: next-linkcd
  4. Now you have 2 separated repositories, one for your blog-hexo, and one for your own theme. You can run below command to see the relationship.

    Next-linkcd git submodule in command line

    It also works in Github webpage

    Next-linkcd git submodule in Github

    Please note that the “git stamp” is d82e379 for both place.

Customize theme

Now you are free to modify your theme. To push theme changes back to Github, follow below:

  1. Git add, commit and push in next-linkcd folder
  2. Git add, commit and push in blog-hexo folder, even you have not modify anything in your blog.

Sync between two PC

1
2
3
cd blog-hexo
git pull
git submodule update

Restore your blog in a new PC

  1. Restore source code from Github

    1
    2
    3
    git clone https://github.com/linkcd/blog-hexo.git
    cd blog-hexo
    git submodule update --init
    Restore blog
  2. Re-install hexo program.
    There is no need to re-install plug-ins.

    1
    2
    3
    cd blog-hexo
    npm install hexo
    npm install
  3. Done

Share Comments