前言废话

总算是用 Hexo + Github Pages 搭建完了自己的个人博客!不得不说其实 Github Pages 挺好用的,但是 Hexo 官方文档就是依托答辩,我根本没看懂,还有那个似人 Jekyll 也是 ~~(是你懒得照着上面的文章弄吧?) ~~
总之,这些话题不是我们今天这篇文章要讨论的,我们要讨论的是如何使用 Hexo + Github Pages 搭建个人博客😋

Step 0

也就是准备时间咯!

  1. 一个聪明的大脑
  2. 一个 GitHub 账户
  3. Node.js 下载
  4. Git 下载

将以上物品安装好后,我们就可以开始了。

Step 1 设置万恶的 npm

在 D 盘新建一个文件夹,用来存放博客文件。(文件夹名示例:blog,尽量不要用中文,否则可能会出现编码错误)

就像这样,创建一个文件夹

进入文件夹,在路径输入框输入 cmd

在这里输入

然后在弹出的 命令提示符 窗口输入

1
npm install -g hexo-cli

(如果转圈没有反应,或者爆网络错误,可以打开梯子再试一下,你们应该看得懂英文吧?)

这里因为我安装过了所以不放图了,但是鬼知道 npm 会出什么幺蛾子,有问题欢迎咨询 QQ 3313851085(逃

Step 2 初次部署 Hexo

在我们亲爱的 命令提示符 输入

1
hexo init main

运行效果:

1
2
3
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
INFO Start blogging with Hexo!

如果遇到了 GitHub 报错 妈耶你梯子不带开全局的是吧我要骂人了(不是

接下来输入 cd main 打开 main 文件夹(这里是我们博客的主文件夹),再输入以下指令检查 Hexo 是否部署成功(意为搭建一个本地服务器查看效果):

1
hexo server

运行效果:

1
2
3
4
D:\Blog\main>hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

等待出现以上的运行效果之后,我们去浏览器访问 http://localhost:4000/ 查看效果

正确效果

好耶!让我们回到命令提示符,按 Ctrl+C 停止运行服务器。

Step 3 将 Hexo 部署到 罪大恶极的 GitHub

由于此章节至关重要,所以这个章节将使用 h2 作为分步副标题。

3.1 让我们来到 Github 干一些事情

登上账号后建一个仓库:仓库名格式为 你的用户名.github.io

(只有这样,将来要部署到GitHub的时候,才会被识别,也就是xxxx.github.io,其中xxxx就是你注册GitHub的用户名.)

3.2 生成 ssh

回到 命令提示符,执行如下命令:

1
2
git config --global user.name "替换成你的 GitHub 用户名"
git config --global user.email "替换成你的 GitHub 注册邮箱"

顺便一提,请不要傻到抄作业把你借来的作业主人的名字也给抄上去,你应该看得懂上面命令引号里面的字。

防止输错可以检查:

1
2
git config user.name
git config user.email

如果再次检查无误之后可以继续。

再次打开一个命令提示符,然后让我们 cd 到我们用户的目录,就是 C:\Users\你的 Windows 用户名 的目录,具体 cd 指令为

1
cd C:\Users\你的 Windows 用户名

比如我的是

1
cd C:\Users\Orange

打开这个目录之后,我们输入

1
ssh-keygen -t rsa -C 替换成你的 GitHub 注册邮箱

再说一遍,请不要傻到抄作业把你借来的作业主人的名字也给抄上去,你应该看得懂上面命令 “-C” 字符后面的字。

然后敲三遍回车,注意是敲三遍回车,其他的内容禁止输入。(解释:你可能会不知道为什么加了个密钥什么的,反正你只要不泄露出去你的这个密钥文件就可以。)

运行效果范例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
D:\Blog>ssh-keygen -t rsa -C donotbethisboring
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\Orange/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\Orange/id_rsa
Your public key has been saved in C:\Users\Orange/id_rsa.pub
The key fingerprint is:
SHA256:sEoW+fwlCRGLYeDW0z8fHB4myXdWs3BUBbcQ7FdjEEg donotbethisboring
The key's randomart image is:
+---[RSA 3072]----+
| ..o o. .E+*Xo=|
| . o = + . . =.*o|
| o * = + = + o.o|
| . = = B = . . |
| o + S = . |
| o . . = . |
| . . . |
| |
| |
+----[SHA256]-----+

接着就会发现你的用户文件夹下多了一个.ssh目录,打开后有一个公钥,一个私钥。id_rsa.pub是公钥,我们需要打开它,复制里面的内容。不要泄露私钥,不要泄露私钥,不要泄露私钥

3.3 将 ssh 添加进 GitHub

进入 GitHub,登录后点击右上角头像,点进 Settings,打开 SSH and GPG keys,在 SSH Keys 右侧有一个绿色按钮,叫做 New SSH Key,点击。

图示步骤:

登录后点击右上角头像,点进 Settings

打开 SSH and GPG keys

在 SSH Keys 右侧有一个绿色按钮,叫做 New SSH Key,点击

接下来我们将 Title 输入框改为 blog,Key 处粘贴我们刚刚复制的公钥,最后点击 Add SSH key

图示:

将 key 的各项信息输入

3.4 修改 Hexo 的配置文件

这一步,我们需要修改配置文件,让 Hexo 乖乖的将它部署的文章传到你的仓库中。

打开你博客文件夹(忘了吗?D:\blog\main,不用谢),使用记事本打开 _config.yml,翻到最最最最后,通常会有这样一段内容:

1
2
deploy:
type: ''

接下来我们直接将这段内容替换为:

1
2
3
4
deploy:
type: git
repo: 替换为你得来的 SSH 地址
branch: main

在这里可以获取 SSH 地址:

(进入仓库。点进 Code,再点击 SSH,将下面的复制之后直接替换)

示例图片:

(进入仓库。点进 Code,再点击 SSH)

总算是修改好了!

3.5 部署到 GitHub

回到我们亲爱的命令提示符,先用 npm 安装一个包:

1
npm install hexo-deployer-git --save

安装好之后一次执行以下命令:

1
2
3
hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)

注意有几次 deploy 的时候会让输入一个 Yes,记得看看。

当最后输出 INFO Deploy done: git 字样时,就说明上传部署成功啦!

现在就可以使用 orangezscb.github.io 来访问你的博客啦

例如:我的用户名是 orangeZSCB,那么我的博客地址就是orangezscb.github.io

下一期出域名绑定……