GitHub Pages+Hexo搭建静态页面

当你想将自己的博客或静态网站发布到互联网上时，GitHub Pages和Hexo是两个非常不错的选择。GitHub Pages提供了免费的托管服务，而Hexo是一个功能强大的静态网站生成器。结合使用起来，你可以通过Hexo快速构建和发布静态网站，而且很容易将生成的站点通过Git部署到GitHub Pages上，实现免费托管、自动化部署。下面让我们详细介绍一下如何使用GitHub Pages和Hexo搭建自己的静态页面。

¶1.安装nodejs

截至文章发布，本人安装的node版本是16.16.0

Node官网

下载Nodejs，安装

1 2	node -v # 查看nodejs版本 npm -v # 查看npm版本

¶2.安装git

Git官网

下载Git，安装，查看Git版本 git -v

¶3.安装hexo

1 2	$ npm i -g hexo-cli $ hexo -v # 查看hexo版本

¶4.建立本地项目

1
2
3

$ hexo init <folder> # folder是项目文件夹名
$ cd <folder>
$ npm i

现在就是默认的主题和默认的配置，我们可以在本地启动一下，注意，4000端口要确保不被占用

1 2	$ hexo g # 生成 $ hexo s # 本地启动

http://localhost:4000/

¶5.在GitHub上建立仓库

首先，你需要一个GitHub账号，没有的话，可以先去申请一下，GitHub

新建仓库，仓库名是username.github.io, username是你的账号名

¶6.设置GitHub Pages

其实你不需要怎么设置，在你建立仓库之后

点击setting，然后再点击左侧的Pages，你会惊奇的发现，你的网站已经上线

所以说，之后你要怎么继续部署呢，答案是向这个仓库继续推送已经编译好的静态文件

上面这种方式，叫做创建用户站点，每个账号只有一个

其实，还可以创建项目站点，项目站点的数量没有限制

创建仓库
进入仓库主页，点击setting，找到Pages
把分支调成部署的分支，然后你就可以访问https://<username>.github.io/<repo_name>/

¶7.获取GitHub Token

这个地方是在提交的时候，有了token，他就不问你要密码了

点击你的头像
选择Settings
选择Developer settings
选择Personal access tokens
选择Fine-grained tokens
选择Generate new token
填写信息，并且生成，你会得到一个token
把这个token放在主配置文件中

1 2	deploy: token: 'token'

之后就可以无密码提交了

后来，出现了这么个错误

fatal: unable to access 'https://github.com/i-mayuan/i-mayuan.github.io.git/': Recv failure: Connection was reset
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
 at ChildProcess.<anonymous> (D:\projects\ma-yuan-blog\node_modules\hexo-util\lib\spawn.js:51:21)
 at ChildProcess.emit (node:events:527:28)
 at ChildProcess.cp.emit (D:\projects\ma-yuan-blog\node_modules\cross-spawn\lib\enoent.js:34:29)
 at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

出现这个不要慌张，这99.9%程度上来讲是网络的问题

实在不行就在.deploy_git里面执行这两句

1 2	$ git credential store # 启用凭据存储 $ git config --global credential.helper store # 让Git记住密码

或者使用ssh连接

生成 SSH 密钥对

如果您还没有 SSH 密钥对，可以打开终端或 Git Bash，输入以下命令生成密钥对：

1	ssh-keygen -t rsa -b 4096 -C "你的邮箱地址"

其中，-t rsa 表示生成 RSA 加密的密钥对；-b 4096 属性表示生成 4096 位的密钥；-C "你的邮箱地址" 表示在生成密钥时添加注释，这里建议您填写 Github 账户的邮箱地址。

您会看到提示让您输入存储密钥的文件名和密码，一般情况下，直接按 Enter 选择默认值即可。

添加公钥

在生成密钥对后，您可以在命令行终端运行以下命令来查看秘钥：

1	cat ~/.ssh/id_rsa.pub

这个命令将打印出生成的公钥。然后，将这个公钥添加到您的 GitHub 账户中，在 GitHub 网站上点击头像->Settings->SSH and GPG keys，新建 SSH key 后，将刚刚打印出的公钥复制到 SSH Key 字段中。

修改 Git 仓库地址

在 Hexo 配置文件 _config.yml 中找到 deploy 部分，将该部分的值设置为：

deploy:
  type: git
  repository: git@github.com:<GitHub用户名>/<GitHub用户名>.github.io.git
  branch: master

这里主要把 Git 仓库地址改为 SSH 协议的地址，即将 https://github.com/ 更改为 git@github.com: 并添加您的 GitHub 用户名。

测试 SSH 连接

修改后，在命令行中执行以下命令来测试是否可以成功连接：

1	ssh -T git@github.com

其中， git@github.com 是 Git 仓库的 SSH 类型的网址，测试成功的提示信息应该类似于：

1	Hi <GitHub用户名>! You've successfully authenticated, but GitHub does not provide shell access.

至此，您已经成功地设置好了 SSH 连接。在以后的使用过程中，每次进行 Git 仓库操作时，都不需要再输入账户名和密码，而是直接连接到 GitHub 平台进行安全的代码交互操作。

¶8.最佳实践

如果你是博客项目的话，那么你可以设置评论

我使用的评论插件是gittalk

它需要一个GitHub提供的OAuth Apps，其中的Client ID，Client Secret

获取它，很简单

依次点击Settings > Developer settings > OAuth Apps > New OAuth App
填写信息后，你就会得到 Client ID，Client Secret，填写在gitalk里面
你的文章就有评论了

这里讲了这么多，其实在用他写文章的时候，那基本就是如下步骤：

$ hexo new [layout] "title"
# ...写文章。。。
$ hexo g
$ hexo s
$ hexo d

有几处比较重要的：

permalink: :year/:month/:day/:title/ # 设置访问路径
skip_render:
  - "README.md" # 设置 README.md 不渲染，直接放到 public 里面
new_post_name: :year-:month-:day-:title.md # 新建文章时，文件名格式
per_page: 10 # 分页大小
pagination_dir: page # 分页目录
theme: Hacker # 主题

Front Matter

对于单个文章的配置,遵守yaml语法

title: Hello World
date: 2023:06:06
category: cat1 # 一般就一个
tags:
  - t1
  - t2

建议按照以下博客安装插件

数学公式：https://myblackboxrecorder.com/use-math-in-hexo/

表情：https://blog.juanertu.com/archives/f36eea83

markdown支持：https://www.jovi.cc/add-superscript-subscript-footnote-and-other-functions-to-hexo.html/

综上所述，使用GitHub Pages和Hexo可以让你轻松地搭建自己的静态页面，而且操作也相当简单。不仅仅是博客，你还可以使用这个组合来建立教育网站、个人网站、技术文档等各种类型的静态页面。同时，由于它们的便捷性和免费性，这个组合非常适合对技术不是特别了解的新手。