用Github Pages和Hexo搭建博客

环境准备

安装 node.js 和 git。

然后再注册一个 github 账号。

搭建博客

选择目录

随便找一个目录，新建一个文件夹，比如我这里就在 E 盘根目录下新建了一个 blog 文件夹，然后进入这个文件夹，右键，选择 git bash here 打开 git bash。

安装 Hexo

在 git bash 中输入:

npm install -g hexo-cli

装好之后是这样：

Hexo 初始化和本地预览

初始化并安装所需组件：

hexo init
npm install

如果命令执行失败可以尝试科学上网。

执行完之后的样子：

这时候我们就有一个最基础的博客了，可以输入下面的命令在本地预览

hexo generate # 生成页面, 可以缩写为 hexo g
hexo server # 在本地启动预览服务器, 可以缩写为 hexo s

这时候在浏览器里打开 http://localhost:4000 ，出现 Hexo 默认主题的页面，本地博客安装成功!

效果图:

添加/修改文章

写文章可以在 Hexo 根目录下的 /source/_posts/ 里写文章，里面有个默认的 hello-world.md，我们尝试修改它，比如我把它修改成:

然后在 git bash 中输入:

hexo g
hexo s

刷新页面可以看到修改效果:

如果想添加一篇新的文章可以直接在 /source/_posts/ 目录里新建markdown文件，写好之后还是输入 hexo g 和 hexo s 即可在本地预览效果。

我们看到 hello-world.md 里开头有这么一段:

---
title: Hello World
---

这部分由三个 - 包围的部分是 markdown 的 yaml 格式设置部分，其中 title: 后面的东西是博客中看到的文章标题名(注意不是文件名)。

部署 Hexo 到 Github Pages

前面的部分都是在本地搞，想让别人看到还得上传到网上，这里选择免费的 Github Pages，我们需要先做一些准备，才能将博客上传至 github.

首先连接 Github：在 git bash 中设置用户名和邮箱:

git config --global user.name "Github用户名"
git config --global user.email "Github邮箱"

创建 SSH key：在 git bash 中输入下面的命令然后一路回车:
ssh-keygen -t rsa -C "Github邮箱"
生成完成后去 C:\users\用户名\.ssh 目录(需要勾选"显示隐藏的项目")，用文本编辑器打开 id_rsa.pub 文件并复制里面的内容。
在 Github 中添加 SSH key：登录 Github, 点击自己的头像，进入 Settings 页面，选择左边的 SSH and GPG keys，点击 New SSH key，随便起个 title, 然后把复制的内容填到 Key 里面，最后点击 Add SSH key，输入密码后确认即可添加成功。

其中第二个是我刚刚添加的 SSH key. (第一个是我之前配过的)
验证连接: 打开 git bash, 输入 ssh -T git@github.com 出现 “Are you sure…”，输入 yes 回车确认。如果出现 Hi xxx! 等字样即连接成功。
创建 Gthub 仓库：登录 github, 点击头像，选择 Your repositories，点击 New，在 Repository name 一栏中填入 用户名.github.io，然后点 Create repository 即可创建仓库。
以这个名字创建的仓库会默认部署到 Github Pages, 无需多余操作，我们也可以检验一下是否部署到了 Github Pages: 点开刚刚创建的仓库，点击右上角的 Settings(在star下面)，在右边选择 Pages, 如果看到 Your site is live at https://用户名.github.io，即代表已经部署成功。

现在有了仓库了，我们就可以将博客上传了。

安装上传工具：在 git bash 中输入:
npm install hexo-deployer-git --save

修改 Hexo 根目录下的 _config.yaml 文件末尾的 Deployment 部分，修改成如下:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: main