搭建Hexo博客&在GitHub+Gitee双重部署

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

摘要

大致记录了如何快速搭建一个简单的个人博客，并且部署到 GitHub 与 Gitee。中间也碰到了一些坑，记录一下，帮助后面可能会碰到这些问题的同学。

1. 环境准备

这里使用的是 WSL2 的 Ubuntu18.04 系统 首先设置代理，使得可以使用 windows 的 clash 代理。详见 wsl2 子系统代理

- 安装 node.js

在 WSL 2 上设置 Node.js | Microsoft Docs 文档 | Hexo 3.1 npm init 使用 · 通俗易懂的 npm 入门教程

我使用的是微软子系统官方文档里的方法安装 nvm，照着做就行。

- 安装 git

Git - Downloads

- 安装 Hexo

npm install -g hexo-cli

# 验证安装成功
hexo -v

Tips：

这里有个坑，nvm 是用来管理 node.js 版本的。但是当我用 nvm 下载了另一个更新版本的 node.js 并且切换之后，hexo 这个命令就找不到了（应该是因为当时 hexo 安装在旧版的 node.js ），切回之前使用的版本才找得到。所以安装后尽量就不要换 node.js 的版本了。

比如我安装了一个新版的，之前有一个老版的，如下：

➜  inno:[/mnt/w/github_blog] nvm ls
->     v16.13.2
       v16.14.0
default -> v16.13.2
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.14.0) (default)
stable -> 16.14 (-> v16.14.0) (default)
lts/* -> lts/gallium (-> v16.14.0)

安装新版之后，每次默认启动的都是新版的，所以 hexo 是找不到的，要切回之前版本：

nvm use v16.13.2

切回后可以使用。

为了避免每次都要切换 node.js，更改默认版本：

nvm alias default v16.13.2

2. 搭建仓库

2022.11.15 后记 最近换了 Mac 发现 SSH 的添加与 Windows 不太一样，多了一步添加钥匙链。 因此所有生成 SSH Keys 参考官方文档 Generating a new SSH key and adding it to the ssh-agent - GitHub Docs 以下内容不再确保实效性。

- 生成 SSH Keys

ssh-keygen -t rsa -C "你的邮箱账号" # 不带双引号

全部默认，四次回车，显示以下则建立成功。

Generating public/private rsa key pair.
Enter file in which to save the key (/home/inno/.ssh/id_rsa):
Created directory '/home/inno/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/inno/.ssh/id_rsa.
Your public key has been saved in /home/inno/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:llz0nPfP************Ua0/as4********I9g4 
The key's randomart image is:
+---[RSA 2048]----+
|         .=      |
|         *****   |
|        = * B .  |
|       ***** + . |
|        E *.o . o|
|       . * *o. +o|
|          O. +o o|
|         *****+ .|
|        ..S**+.o |
+----[SHA256]-----+

查看 ssh 密钥并且复制到 Github：

cd ~/.ssh

ll
# 目录文件如下
	drwx------ 2 inno inno 4096 Jan 24 16:44 .
	drwxr-xr-x 9 inno inno 4096 Jan 24 16:49 ..
	-rw------- 1 inno inno 1675 Jan 24 16:44 id_rsa
	-rw-r--r-- 1 inno inno  399 Jan 24 16:44 id_rsa.pub

# vim 打开 id_rsa.pub 文件
vim  id_rsa.pub

# 全选复制 然后粘贴到 GitHub 的 [SSH keys](https://github.com/settings/keys) / Add new

检查 ssh 是否绑定成功：

ssh -T git@github.com

Success：

The authenticity of host 'github.com (20.205.243.166)' can't be established.
ECDSA key fingerprint is SHA256:p2QAM********trVc98/R1*****3/L*******M.
Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added 'github.com,20.205.243.166' (ECDSA) to the list of known hosts.
Hi 1nnoh! You've successfully authenticated, but GitHub does not provide shell access.

- 新建仓库

- Github

在 GitHub 新建一个仓库（public），命名如下： - 我的仓库地址是: 1nnoh/1nnoh.github.io - 仓库命名规则为 前面是用户名（GitHub用户名，点击右上角头像即可看到: signed as xxx），后面为 .github.io

更详细的内容可以看 Reference 里初级建站那个视频。

- Gitee

在 Gitee 新建仓库（开源或私有都可以），命名如下： - 仓库名称：可以随便填，比如 blog - 仓库路径：填入用户名，跟 GitHub 一样，只是后面不用加 .github.io。至于为什么这样设置，可以自己试试其他的路径，然后看看 服务选项中 Gitee Pages 服务 生成的网站地址的区别。 - 开启 Gitee Pages 服务：进入仓库选择 服务，选择 Gitee Pages。第一次使用需要身份验证，一般半天可以通过人工审核。选取 强制使用 HTTPS，然后生成网站。 - Tips：Github 的 Pages 服务可以自动更新，但Gitee 的 Pages 服务不能自动更新（开启的话需要付费）。所以每次从本地部署网站到线上之后，需要在 Gitee Pages 服务 中更新网站。

3. 本地生成博客内容

进入想要生成博客内容的目录，然后生成：

# 初始化 hexo 博客
mkdir hexo-blog
hexo init

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

随后本地生成 hexo 界面：

hexo s # hexo server 启动本地服务器

# Output 点击链接可以进入
# INFO  Validating config
# INFO  Start processing
# INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

Press Ctrl+C 点击生成的本地地址即可访问初步建好的 Hexo博客。或者将 http://localhost:4000/ 复制到浏览器地址栏打开。

4. 发布到 GitHub 与 Gitee

- 修改 _config.yml

进入上节生成博客的目录，打开 _config.yml 文件（或者在上节中生成博客的目录中找到该文件，用记事本或 VS Code 等代码编辑器打开）：

vim _config.yml

修改文档末尾的 deploy 设置：

# 只配置 Github
# Deployment
# Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/1nnoh/1nnoh.github.io.git
  branch: main # GitHub 的分支改成 main 了， Gitee 是 master

# Github 与 Gitee 一起部署
deploy:
 type: git
 repository:
	 gitee: git@gitee.com:innoh/innoh.git,master
	 github: https://github.com/1nnoh/1nnoh.github.io.git,main
Tips： - repository 是 GitHub 上建立的博客仓库 - 进入仓库后，点击 Code 即可看到 https 地址（就是 clone 的地方）。

更改完成后保存。

- 安装依赖

npm install hexo-deployer-git --save

部署：

# hexo generate
# hexo deploy 部署到服务器
hexo clean && hexo g && hexo d

# 输入 GitHub用户名 与 token（是用户名，不是邮箱；是token，不是登录密码！）

重点！！！：输入密码的时候，去 GitHub 生成 token，把 token 作为部署时登录密码

==以后每次推送的时候，如果需要输入密码，记得也是输入令牌！！！==

进入 GitHub 的 Settings / Developer settings: 选择 Personal access tokens

生成 tokens，权限全选。生成令牌后复制，并粘贴输入密码。

token 备份

ghp_DIvVJ*******************83i

==这个 token令牌 是有一个有效期的，默认为 30 天，所以每三十天记得更新一下令牌权限，否则推送的时候会出现错误！！！另外，每次更新之后，令牌也会变，记得重新复制保存！==

- 检验发布

到博客仓库 1nnoh / 1nnoh.github.io 进入 Settings。

最下面有一个 GitHub Pages：Pages settings now has its own dedicated tab! Check it out here!

点击即可进入博客网站。

Gitee 则是从 Gitee Pages 服务 中生成的网站地址进入。

5. 修改主题

我使用的是一款简约整洁的主题： - GitHub - next-theme/hexo-theme-next: 🎉 Elegant and powerful theme for Hexo.

还有其他比较优秀的主题比如： - GitHub - blinkfox/hexo-theme-matery: A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com - GitHub - fluid-dev/hexo-theme-fluid: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo - GitHub - jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly

后面这三款会有更加丰富的一些外观设计。

6. 后记

最近两天打算在 Gitee 和 Github 同时推送，但 Github 一直推送不成功，还以为是 _config.yml 里 deploy 那一块儿的格式问题。

报错：

fatal: Authentication failed for 'https://github.com/1nnoh/1nnoh.github.io.git/'
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (/mnt/w/github_blog/node_modules/hexo-util/lib/spawn.js:51:21)
      at ChildProcess.emit (node:events:390:28)
      at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

找了两天原因，最后才发现，推送的时候输入的是 GitHub 的用户名与 token，而 token 默认是只有 30 天的有效期，过期了之后要重新生成，并且 token 也会变，需要重新复制保存。

当时美化 Next 主题也是花了很多时间，因为 Hexo 和 Next 经历好多版本的更新，很多老一点的教程都是不适用的。调各种细节，增加一些统计或者评论的模块，都还蛮繁琐的。我就不重复造轮子了，在 References 里贴出一些我参考的教程。

References

初级建站：【2021最新版】保姆级Hexo+github搭建个人博客_哔哩哔哩_bilibili

后续更改主题可参考：建站经历 | Twilight Hexo主题推荐 - 哔哩哔哩

查找适合主题：Themes | Hexo

Hexo 官网：文档 | Hexo

主题美化：

https://theme-next.js.org/docs/theme-settings/

https://www.techgrow.cn/posts/755ff30d.html

https://iitii.github.io/2021/05/28/1/

https://happyseashell.gitee.io/2021/09/26/hexo3/#%E4%B8%BB%E9%A2%98%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE