【个人博客搭建之路】使用Hexo创建博客并部署Github上

发表于 更新于 分类于 阅读次数：
本文字数： 5k 阅读时长 ≈ 5 分钟

1. 下载安装Node.js

在这里插入图片描述
在mac的命令行输入一下命令查看是否安装好Node.js：

1
2
3
4
5
6
7
8
9
10
################################################
# 进入root
$ sudo su

################################################
# 查看node和npm版本
sh-3.2# node -v
v14.16.1
sh-3.2# npm -v
6.14.12

2. 安装hexo

用npm安装hexo (依然在root下)

1
sh-3.2# npm install -g hexo-cli

查看hexo版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sh-3.2# hexo -v
hexo-cli: 4.2.0
os: Darwin 20.3.0 darwin x64
node: 14.16.1
v8: 8.4.371.19-node.18
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 83
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1k
cldr: 37.0
icu: 67.1
tz: 2020a
unicode: 13.0

3. 配置Hexo

为博客创建新文件夹，这里以/Users/用户名为例，这个用户名是你电脑的用户名。

1
2
3
4
5
sh-3.2# cd /Users/<用户名>
sh-3.2# pwd
/Users/<用户名>
sh-3.2# mkdir myblog
sh-3.2# cd myblog

在新建文件夹下面初始化Hexo

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
29
30
31
32
33
################################################
# 查看是否位于正确的文件夹
sh-3.2# pwd
/Users/<用户名>/myblog

################################################
# 以管理员身份初始化Hexo
sh-3.2# sudo hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 190 packages from 160 contributors and audited 196 packages in 6.046s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

################################################
# 查看生成的目录结构
sh-3.2# ls -l
total 144
drwxr-xr-x    3 root  staff     96 May  2 16:27 .github
-rw-r--r--    1 root  staff     65 May  2 16:27 .gitignore
-rw-r--r--    1 root  staff      0 May  2 16:27 _config.landscape.yml
-rw-r--r--    1 root  staff   2441 May  2 16:27 _config.yml
drwxr-xr-x  165 root  staff   5280 May  2 16:27 node_modules
-rw-r--r--    1 root  staff  57414 May  2 16:27 package-lock.json
-rw-r--r--    1 root  staff    615 May  2 16:27 package.json
drwxr-xr-x    5 root  staff    160 May  2 16:27 scaffolds
drwxr-xr-x    3 root  staff     96 May  2 16:27 source
drwxr-xr-x    3 root  staff     96 May  2 16:27 themes

4. 生成第一篇博客

初始化Hexo以后其实就可以生成博客了。

1
2
3
4
5
6
7
8
9
################################################
# 启动本地博客页面 hexo s或者hexo server
sh-3.2# hexo s
INFO  Validating config
INFO  Start processing
Deprecated as of 10.7.0. highlight(lang, code, ...args) has been deprecated.
Deprecated as of 10.7.0. Please use highlight(code, options) instead.
https://github.com/highlightjs/highlight.js/issues/2277
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

这时我们用浏览器打开http://localhost:4000就能看到Hexo为我们准备的默认博客页面了。

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
################################################
# 创建新博客 hexo n或者hexo new
sh-3.2# hexo n "我的第一篇博客"
INFO  Validating config
INFO  Created: /Users/kangyangwu/myblog/source/_posts/我的第一篇博客.md

################################################
# 为新的博客生成静态文件 hexo g或者hexo generate
sh-3.2# hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 88 ms
INFO  Generated: 2021/05/02/hello-world/index.html
INFO  Generated: 2021/05/02/我的第一篇博客/index.html
INFO  Generated: archives/2021/05/index.html
INFO  Generated: archives/2021/index.html
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  6 files generated in 27 ms

################################################
# 启动本地博客页面
sh-3.2# hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

5. 部署Github Pages

首先进入github主页，选择创建新的仓库 (New repository)。
在这里插入图片描述
仓库名(repository name) 一定要填写<github用户名>.github.io。**
在这里插入图片描述
在这里插入图片描述
下面开始配置博客，将之与刚创建好的github网站连接起来。

1
2
3
################################################
# 安装hexo-deployer-git
sh-3.2# npm install hexo-deployer-git --save

修改配置文件_config.yml最后一项，记得改成你自己的github个人网站

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/wukangyang/wukangyang.github.io.git
  branch: master
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
29
30
31
32
33
34
35
36
37
38
################################################
# 部署网页 hexo d或者hexo deploy
sh-3.2# hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master d553892] Site updated: 2021-05-02 17:47:15
 Committer: System Administrator <root@Kangyangs-Mac.local>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly. Run the
following command and follow the instructions in your editor to edit
your configuration file:

    git config --global --edit

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 9 files changed, 900 insertions(+), 6 deletions(-)
 create mode 100644 2021/04/29/kruskalMST/index.html
 create mode 100644 2021/05/02/使用ffmpeg合并多个mp4文件/index.html
 create mode 100644 archives/2021/04/index.html
Username for 'https://github.com': yangzaiky
Password for 'https://yangzaiky@github.com': 
Counting objects: 24, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (15/15), done.
Writing objects: 100% (24/24), 13.77 KiB | 2.29 MiB/s, done.
Total 24 (delta 8), reused 0 (delta 0)
remote: Resolving deltas: 100% (8/8), completed with 3 local objects.
To https://github.com/YangzaiKY/yangzaiky.github.io.git
   6fe509f..d553892  HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/YangzaiKY/yangzaiky.github.io.git'.
INFO  Deploy done: git

在浏览器打开https://wukangyang.github.io(https://<你的github用户名>.github.io)来查看是否部署成功。