2024最新Hexo+GitHubPages搭建个人博客

Hexo是一个快速、简洁且高效的博客框架，有丰富的主题和插件可供使用。这篇文章讲述如何使用Hexo+GitHub Pages搭建个人博客。

1. 环境需求

Hexo是基于Node.js的框架，同时我们要用到git进行部署。

官网地址(推荐安装最新版本)：

• Node.js (nodejs.org)
• Git (git-scm.com)

安装完成后在终端进行验证，按下win+R打开运行窗口

输入cmd，回车，即可打开终端

输入命令验证环境是否搭建成功

若安装过程中遇到问题，可百度解决，这里不做过多讲解

2. 本地搭建Hexo博客

我们现在本地将博客搭建起来，搭建方法可自行到官网查阅官方文档，官网地址：Hexo

小白可依据以下详细步骤搭建：

新建Blog文件夹用来存放博客程序，位置任意。我这里建在D盘下

右键->显示更多选项，点击Open Git Bash here,如果无此选项，请检查环境搭建时候成功

打开后输入以下命令一键安装hexo

npm install -g hexo-cli

可能遇到的问题：

输入命令后长时间卡住无法安装成功，可参考以下解决方案

此时按下Ctrl+C停止当前命令，输入以下命令安装淘宝镜像

npm config set registry https://registry.npmmirror.com

然后重新输入命令安装hexo

完成后输入以下命令初始化并安装组件

hexo init
npm install

可能遇到的问题：

输入

hexo init

后,可能卡在

INFO Install dependencies

不动，此时需按下Ctrl+C停止此命令，继续输入

npm install

即可。

启动服务器（默认情况下，访问网址为：

http://localhost:4000/

）

hexo server

按住Ctrl键，再用鼠标左键点击网址，可在浏览器中打开预览页面

hexo在本地搭建完成，可参考官方文档继续完善。

3. 部署到GitHub Pages

3.1 创建GitHub仓库

在GitHub新建仓库，仓库名为

用户名.github.io

,这里的用户名替换为你自己GitHub上的用户名

比如我的用户名是RationalDysaniaer，新建的仓库名就是rationaldysaniaer.github.io

创建时选择public，推荐勾选Add a REAMD file为仓库创建描述文件

3.2 将博客部署到GitHub

在刚刚创建的文件夹下再次打开git bush，安装hexo-deployer-git插件

npm install hexo-deployer-git --save

打开_config.yml文件，更改最后面的deploy内容,用户名替换为自己的github用户名

deploy:type: git
  repository: https://github.com/用户名/用户名.github.io.git  
  branch: m

生成静态文件

hexo g

上传到GitHub

hexo d

此时出现弹窗：

需输入用户名，出现第二个弹窗，输入密码

这时发现报错，我们看到提示信息

raraxiaremote: Support for password authentication was removed on August 13, 2021

意思是2021年8月13日取消了对密码身份验证的支持，我们需要使用GitHub的个人访问令牌来代替密码

在设置->开发者设置

创建新token

填写Note为hexo，勾选repo授予权限

点击最下方Generate token创建成功后，复制该token

重复之前的上传操作，使用access token代替密码，即可上传成功

3.3 使用ssh密钥链接GitHub

每次上传都需要输入一次用户名和token显然比较麻烦，安全性也较低，配置ssh后就可以更加方便的上传文件

打开C盘，进入Users文件夹，接着打开电脑用户名文件夹，寻找是否有.ssh文件夹，如果有的话需删除掉，没有就继续进行下面的步骤

在该文件夹下右键打开Git Bash，输入以下命令生成ssh密钥，中途需按下三次回车键

ssh-keygen -t rsa -C "github绑定的邮箱"

成功后在该目录下生成了.ssh文件夹，用记事本打开.ssh文件夹下的id_rsa.pub文件，复制里面的内容

在GitHub设置中点击SSH and GPG keys选项，点击New SSH key

出现以下界面

填写Title为hexo，将复制的内容粘贴到Key文本框中，点击Add SSH key后输入GitHub密码，即可添加成功

再次打开Git Bush,输入以下命令验证是否能连接成功

ssh -T [email protected]

如果询问是否继续连接，输入yes即可，如下图出现successfully即为连接成功

最后，配置用户名和邮箱

git config --global user.name "Github上的username"
git config --global user.email "GitHub绑定的邮箱"

恭喜你已经成功配置好了ssh连接GitHub，可以无需在上传时输入用户名密码了。

博客地址：https://用户名.github.io

将用户名替换为你自己的GitHub用户名，就可以通过此网址访问你的博客了，快将自己的博客网址发给你的小伙伴炫耀一下吧！

如果想要时博客更加美观，可以到hexo官网下载博客主题，同时查看官方文档修改配置文件，发表博客文章，一点点完善你的博客。

4. 部署到Vercel加速访问

GitHub在国内需要科学上网，不然就算能访问速度也跟蜗牛一样。如果想把博客分享给朋友，他不会科学上网打不开，岂不尴尬。我们可以通过Vercel加速访问，使你的小伙伴无需翻墙就能看到你的博客。

打开Vercel官网登录页面： Vercel，点击右上角注册按钮开始注册，我们是个人用户所以选择第一项Hobby，输入用户名

选择继续GitHub上，连接GitHub，注册成功

添加新项目

点击Install

选择你的GitHub中博客所在的存储库，Install

点击Import导入

点击Display部署

上传完成后点击Continue to Dashboard跳转到主页

点击上方Setting可进入设置界面更改项目名称

到这里就算完成部署了，可以通过项目主页的的Domains访问你的博客。