In this post, I will describe the complete step to install both Hexo and theme NexT on Windows.

Install Hexo and deploy your post#

First, we need to install the Hexo framework. The main steps are as follows:

Install Node.js and Cmder#

We need to install Node.js and git for Windows. You can skip installing git for Windows if you choose to install Cmder(highly recommended on Windows). Choose the Full package if you decide to install Cmder (only the full package contains git for Windows).

Set up the blog frame#

Install the Hexo command line tool,

Then, we need the build the frame of our blog. Go to a directory where you want to set up your blog, for example, d:/. Use the following command:

hexo init hexo-blog
cd hexo-blog
npm install

The above command will create a directory named hexo-blog and set up the frame of your blog.

Replace the default renderer#

This step is optional. But it is highly recommended.

Change the default renderer shipped with Hexo. The renderer is used to translate your markdown file to HTML files. But it has weak functionality and does not support LaTeX style equations. We need to remove it first:

hexo uninstall hexo-renderer-marked --save

We can use the Pandoc renderer which is more powerful. Make sure that you have installed Pandoc , and then use the following command to install the Panodc renderer,

hexo install hexo-renderer-pandoc --save

Set up the GitHub pages#

Set up your GitHub pages and choose to set up a user site (see image below). The name of the newly created repo must have the format username.github.io, where username is your GitHub user name. For me, the user name is jdhao.

Create website pages#

This is discussed thoroughly in Official documentation. We are going to create 4 more pages for our blog site and they are tags, categories, archives and about page. Use the following command to create the 4 pages:

hexo new page "tags"
hexo new page "categories"
hexo new page "archives"
hexo new page "about"

Write posts and preview your site#

You can write your personal introduction in file source\about\index.md. In the command line, you can use

`hexo new post "some_post"`

to initialize a new template post named some-post.md, which is located in directory source\_posts under the Hexo root directory.

The template post will only include a yaml format header, which is used to configure the post meta info. A sample header is shown below:

---
title: How to Install Hexo and Theme NexT from Scratch on Windows
date: 2017-02-26 15:52:00 +0800
lastmod: 2018-02-08 15:42:00 +0800
tags: [Markdown, NexT, Hexo, LaTeX]
categories: [technique]
---

Then you can write your post in this file using your favorite editor. After finishing your post, you can use hexo generate to generate your blog website locally.

To preview your blog website, you can use hexo server to set up a local http server. Then you can preview your website in the browser by using the local address localhost:4000.

Deploy your blog#

In order to deploy your blog to GitHub, you need to install the deployer,

npm install hexo-deployer-git --save

Then we need to configure our GitHub user name and email. My configuration is as follows:

git config --global user.email "jdhao@hotmail.com"
git config --global user.name "jdhao"

Change the command above to suit your need. In the file hexo-blog\_config.yml, we need to configure the address of your GitHub pages repo.

deploy:
  type: git
  repo: https://github.com/jdhao/jdhao.github.io
  branch: master

You can use hexo d -g to generate and deploy your blog to GitHub. You will be prompted to input your email and password to confirm your identity. After that, your site will be deployed to GitHub. Anyone will be able to visit your blog.

Generate your ssh key#

You can generate your ssh key to avoid inputting email and password every time. First, use the following command to generate your key,

ssh-keygen -t rsa -C "jdhao@hotmail.com" # please use your own email address

The above command will generate two file: one (file name is id_rsa) for your private key and the other (file name is id_rsa.pub) for your public key. The files are located in C:/Users/jdhao/.ssh (look for something similar on your system). Open the file id_rsa.pub and add your public key to GitHub.

After adding the public key, we need to confirm it is successfully configured:

You will see something like:

The authenticity of host ‘github.com (IP ADDRESS)’ can’t be established. RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8. Are you sure you want to continue connecting (yes/no)?

Input yes and press Enter, and you will see the following output:

Hi jdhao! You’ve successfully authenticated, but GitHub does not provide shell access.

This message will confirm that your setting is correct. You do not need to input your email and password from now on.

Now, it is all set. You can start writing your posts.

Go to the blog root D:/hexo-blog and execute the following command to install the latest NexT theme,

git clone https://github.com/theme-next/hexo-theme-next themes/next-new

NexT theme has its own configuration files, it is located in themes/next-new/_config.yml. You can customize as you wish. There are several plugins which is useful.

Estimate post word count and read time.#

The plugin hexo-symbols-count-time can be used to calculate the post word number and estimate your read time. Install this plugin

npm install hexo-symbols-count-time --save

In the Hexo configuration file, use the following setting:

symbols_count_time:
  symbols: true
  time: true
  total_symbols: false
  total_time: false

Local search#

Install the plugin hexo-generator-searchdb to add the local search feature:

npm install hexo-generator-searchdb --save

Edit the Hexo _config.yml file and add the following settings:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Also, you need to edit the theme Next configuration themes/next-new/_config.yml, and change the setting for local search,

local_search:
  enable: true

Compress your blog#

Install the plugin hexo-filter-optimize to compress your blog,

npm install hexo-filter-optimize --save

In the Hexo _config.yml file, add the following setting,

filter_optimize:
  enable: true
  # remove static resource query string

  #   - like `?v=1.0.0`

  remove_query_string: true
  # remove the surrounding comments in each of the bundled files

  remove_comments: false
  css:
    enable: true
    # bundle loaded css file into the one

    bundle: true
    # use a script block to load css elements dynamically

    delivery: true
    # make specific css content inline into the html page

    #   - only support the full path

    #   - default is ['css/main.css']

    inlines:
    excludes:
  js:
    # bundle loaded js file into the one

    bundle: true
    excludes:
  # set the priority of this plugin,

  # lower means it will be executed first, default is 10

  priority: 12

After using this plugin, you may find some of the icons are not displayed correctly. This issue has been raised here. The solution is to edit the theme NexT configuration file and use custom CDN address for fontAwesome,

fontawesome: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Show related posts#

It would be nice to show related posts in the post page. Just install the hexo-related-popular-posts,

npm install hexo-related-popular-posts --save

Use the following setting in the theme NexT configuration file,

related_posts:
  enable: true
  title: Related posts
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

Now, you have have finished all the configurations. Happy writing!