使用Hexo创建博客并部署Github上

关键字:Mac、Node.js、Hexo、Github

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)来查看是否部署成功。