How to use Hexo and deploy to GitHub Pages

发表于 更新于

How to use Hexo and deploy to GitHub Pages

1. Install Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ sudo npm install -g hexo-cli

$ hexo -v
hexo-cli: 1.0.2
os: Linux 4.9.15-x86_64-linode81 linux x64
http_parser: 2.7.0
node: 6.10.2
v8: 5.1.281.98
uv: 1.10.2
zlib: 1.2.7
ares: 1.10.1-DEV
icu: 50.1.2
modules: 48
openssl: 1.0.1e-fips

2. Create a project for your GitHub Pages

1
2
3
4
5
$ hexo init LeionTong.github.io

$ cd LeionTong.github.io

$ npm install

3. Run a test server locally

1
2
$ hexo server
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

4. Set information for your new blog

https://hexo.io/docs/configuration.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ vi _config.yml

~~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Site
title: Leion-Sky
subtitle:
description: LeionTong's personal blog!
keywords:
author: LeionTong
language: zh-CN
timezone: Asia/Shanghai

...
url: https://LeionTong.github.io/
...

5. Set information to use Git

https://hexo.io/docs/one-command-deployment

Install hexo-deployer-git.

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

Edit _config.yml (with example values shown below as comments):

1
2
3
4
5
6
7
8
$ vi _config.yml

~~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
deploy:
  type: git
  repo: git@github.com:LeionTong/LeionTong.github.io.git
  branch: gh-pages
  message: [message]

6. Set “watch” before starting your work

“watch” command can monitor your files.

https://hexo.io/docs/generating.html

1
$ hexo generate --watch

7. Create a new post file

1
2
$ hexo new first-post
INFO  Created: ~/***/LeionTong.github.io/source/_posts/first-post.md

8. Edit the above file with Markdown or Hexo’s Helper

Hexo’s Helper

https://hexo.io/docs/helpers.html

I use Atom with “shift + control + m” when I use Markdown :-)

https://atom.io/

9. Delete “source/_posts/hello-world.md”

It’s not necessary to deploy.

10. Deploy your new blog!!

https://hexo.io/docs/deployment.html

1
$ hexo clean && hexo deploy

After writting the above command, you can see your new blog on GitHub Pages.

http://******.github.io/

11. Change your blog theme

https://github.com/hexojs/hexo/wiki/Themes

For instance, How to use the following theme.
https://hexo.io/hexo-theme-light/ or maybe https://github.com/theme-next/hexo-theme-next ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
## If you're using Hexo 5.0 or later, the simplest way to install is through npm:
$ cd LeionTong.github.io
$ npm install hexo-theme-next

## Or you can clone the entire repository:
$ cd LeionTong.github.io
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

## Set information to use the theme
$ cd LeionTong.github.io
$ vi _config.yml

~~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
theme: next

12. Create a new page file

https://hexo.io/docs/writing.html

1
2
$ hexo new page aboutme
INFO  Created: ~/***/LeionTong.github.io/source/aboutme/index.md

Q&A

Q：运行 hexo 提示 “/usr/bin/env: node: 没有那个文件或目录”

A：由于 Ubuntu 下已经有一个名叫 node 的库，因此 Node.js 在 ubuntu 下默认叫 nodejs ，创建软链接：

1
sudo ln -s`which nodejs` /usr/bin/node

Q: 如果要将源码上传至Github，或者GitLab等云平台，.gitignore怎么写？

A: .gitignore代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# .DS_Store
# Thumbs.db
# db.json
# *.log
# node_modules/
# public/
# .deploy*/
## 上面是Hexo自带的gitignore内容，我注释掉了，换成了我自己的。
## 我这里只需要备份source文件夹下的Markdown笔记和配置信息。
## 另外，我自定义的NexT主题配置项也在NexT官方指导下合并到了Hexo的_config.yml文件里。
## 所以也不需要备份themes文件夹，如果主题改动较大建议将themes那两行取消注释。
## 注意：这里采用排除法，先忽略所有文件，然后再排除，这样就只留下了自己需要git版本控制的文件(夹)。
*
!/source/
!/source/**/*
#!/themes/
#!/themes/**/*
!/_config.yml
!/.gitignore
!/README.md

Q：Github Pages要想自定义域名怎么办？

在 source 目录下新建 CNAME 文本文件，写入购买的域名，然后在域名供应商管理后台配置好域名解析记录。

Q：怎么创建软链接？
使用 WSL，MobaXterm，GitforWindows 等 terminal 工具。

1
ln -sv "/mnt/c/Users/leion/OneDrive/Obsidian Vault/H.exo/source" "/mnt/c/Users/leion/Documents/Tong-Workspaces/Git/Hexo-Blog/source"