Create Personal Website with Hexo and Github Pages

In this post, I will explain the details I build my own Github homepage with Hexo, theme NexT, and Github Pages.

Basically, I followed the steps in this Zhihu answer:
https://www.zhihu.com/question/20962496/answer/1882882782

Install Hexo

Requirements:

Node.js (recommends 12.0 or higher)
Git

1	$ npm install -g hexo-cli

Refer to: https://hexo.io/docs/

Hexo Quick Start

Initialize a Hexo project

1
2
3

$ hexo init <folder>
$ cd <folder>
$ npm install

Refer to: https://hexo.io/docs/setup

In my case, I want to use this Hexo project as my Github homepage:

1
2
3

$ hexo init <your-username.github.io>
$ cd <your-username.github.io>
$ npm install

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Generate static files

1	$ hexo generate

More info: Generating

Remember to perform hexo clean and hexo generate after you modified your site.
Then proceed to hexo server for local test or hexo depoly for deployment.

Run server locally

1	$ hexo server

More info: Server

This runs Hexo locally, so that you can view your site before deploying it to remote sites.
The output is like:

1
2
3

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

Change Hexo config

Modify _config.yml in the site root directory.
This changes global settings for Hexo.

Please refer to Configuration | Hexo for details.

Change Hexo theme

I use theme NexT for my site:

1 2	$ cd <your-hexo-site> $ git clone https://github.com/theme-next/hexo-theme-next themes/next

Modify _config.yml in the site root directory to enable the theme:

1	theme: next

Modify theme/next/_config.yml for theme-specific config.

Please refer to NexT Documentation for details.

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

Github Pages

Install plugin:

1	$ npm install hexo-deployer-git --save

Modify _config.yml in site root dir:

deploy:
  type: git
  repo: git@github.com:<username>/<username>.github.io.git
  branch: master

Then run hexo deploy.
You should be able to see you site at <username>.github.io.

(Optional) Save Site Source Code on Github

$ git init
$ git checkout -b source
$ git add -A
$ git commit -m "init blog"
$ git remote add origin git@github.com:{username}/{username}.github.io.git
$ git push origin source

References

Note that some of them are written in Chinese.

Documentation

Online Posts