Rebuild this blog using Hexo and Theme NexT

Posted on Edited on

Seven years ago, I wrote the first post in this blog to explain how to build this blog. Basically, I still use the Hexo framework for blogging. Here is the summary of how you can rebuild the blog today.

Versions

  • Node.js v17.6.0
  • npm 8.5.1
  • hexo 6.0.0
  • hexo-theme-next 8.10.0

If you use the different versions, things may break.

Create GitHub Repo for the blog folder

It will be convenient to use git to version control your post writings. You can just create an empty private repo. Let’s call the folder as your_blog_folder/

Create Github Repo for hosting blog Github Page

A public repo with the repo name as YOUR_NAME.github.io, YOUR_NAME here is your GitHub account name.

Install Node, Hexo and NexT

Install Node.js with Homebrew

1
brew install node

Install Hexo and NexT with npm

1
2
npm install -g hexo-cli
npm install hexo-theme-next

Initialize Hexo

Make sure you are in the target folder

1
2
3
cd your_blog_folder
hexo init
npm install

Configure Hexo and NexT

your_blog_folder/_config.yml is the config file for Hexo, and you need to copy the config file of NexT at /node_modules/hexo-theme-next/_config.yml to the root folder of your_blog_folder/, rename it to _config.next.yml. So they are now in the same folder. Here are some of the key configuration changes.

For _config.yml

1
2
3
4
5
6
7
8
9
10
11
# Site
timezone: 'America/Toronto'
# URL
url: http://YOUR_NAME.github.io
# Extensions
theme: next
# Deployment
deploy:
  type: git
  repo: https://github.com/YOUR_NAME/YOUR_NAME.github.io
  branch: main

For _config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# Creative Commons 4.0 International License.
creative_commons:
  sidebar: true
  post: true
# Menu Settings
menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
# Sidebar Settings
sidebar:
  position: right
# Social Links
social:
  GitHub: https://github.com/YOUR_NAME || fab fa-github
# Subscribe through Telegram Channel, Twitter, etc.
follow_me:
  RSS: /atom.xml || fa fa-rss
# Misc Theme Settings
codeblock:
  theme:
    light: tomorrow-night-bright
    dark: tomorrow-night-bright
  copy_button:
    enable: true
    style: mac
# Reading progress bar
reading_progress:
  enable: true

Write a post

1
hexo n 'Your_post_name'

And if you are using vscode, you will find the Your_post_name.md in the your_blog_folder/source/_posts/ you can write in markdown.

Generate the post html

1
hexo g

You can view the post locally and make changes if you need.

Deploy the post to GitHub

1
hexo d

It will automatically generate GitHub Page for you which you can see by visiting YOUR_NAME.github.io

When you try to deploy the blog, if you see this message ERROR Deployer not found: git, or other error messages, for example, you need rss feed ready for your blog, please double check if you have all node_modules installed.

1
2
npm install hexo-deployer-git --save
npm install hexo-generator-feed --save

Reminder

If you git clone the private blog repo to write a new post, remember to npm install before you try to deploy it to github. Because the moment you git clone to your local machine, the folder node_modules is empty. It is not sync with git by default as set in the .gitignore generated by Hexo.

1
2
rm -rf node_modules && npm install --force
hexo d -g

Ref:

Hexo
https://hexo.io

Theme NexT
https://theme-next.js.org

hexo-generator-feed
https://github.com/hexojs/hexo-generator-feed