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,
npm install -g hexo-cli
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 is your GitHub user name. For me, the user name is
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
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
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 "email@example.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 "firstname.lastname@example.org" # 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:
ssh -T email@example.com
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)?
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.
Install NexT theme
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
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,
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!
License CC BY-NC-ND 4.0