使用GitHub部署静态博客HEXO：小白向教程
使用GitHub部署静态博客HEXO：小白向教程
本文是一篇详细的Hexo博客部署教程，主要介绍了如何使用GitHub Pages搭建一个完全免费的个人博客网站。文章从环境准备、GitHub账号创建、SSH密钥配置、Hexo安装到最终部署，提供了完整的步骤和详细的截图说明，适合对技术有一定兴趣但又缺乏经验的用户阅读。
1. 前言
1.1 本文讲什么？
本文将详细介绍如何使用Hexo + GitHub搭建免费个人博客网站。使用GitHub Pages来搭建Hexo静态博客网站，其最吸引人的莫过于完全免费使用，并且非常稳定（网络问题除外）。虽然搭建时比较麻烦、有点折腾，但是配置完成后基本不需要操心维护的事，甚至放了几年都忘记了，打开来看文章依然还在。
为了照顾小白用户（第一次使用GitHub和Hexo），本文尽可能写的详细（包括常见的坑和问题都有提示说明），并且多配图片。看起来有点繁杂，捋顺了其实也简单，跟教程走一遍完整操作大概需要30分钟~60分钟（仅估计）。本文仅在Windows11上进行了测试，其他版本的Windows或其他平台不保证可用性。
1.2 GitHub Pages是什么？
GitHub Pages 是由GitHub官方提供的一种免费的静态站点托管服务，让我们可以在GitHub仓库里托管和发布自己的静态网站页面。
1.3 Hexo是什么？
Hexo 是一个快速、简洁且高效的静态博客框架，它基于Node.js运行，可以将我们撰写的Markdown文档快速解析渲染成静态的HTML网页。
2. 准备
2.1 本地环境
你需要在本地电脑上面安装：
- nodejs（>16版本，最新的应该有20版本）：Node.js — Run JavaScript Everywhere
- git（2.44.0）：Git – Downloads
安装的时候无脑next即可。安装完毕以后，可以在cmd里面通过：
node -v
npm -v
git --version
查看安装的版本。正常情况应该有如下输出：
2.2 准备GitHub
我们在GitHub上面注册一个free账号，以admin@yemengstar.com为例子演示（正好以前没有注册过）：
密码自己设置即可，一定设置强密码。
用户名自己设置即可。
后面完成验证码就可以注册成功了。去自己的邮箱接一下验证码，填写进去就可以。
按照自己的情况选择：
我们选择免费free类型的账户：
注册成功~
3. 本地连接GitHub
3.1 配置用户名与邮箱
在某一个盘里面创建一个文件夹，名字叫hexo（好记），然后右键选择Open Git Bash Here：
不出意外的话应该会弹出一个命令行界面
我们在里面输入
git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 邮箱"
3.2 创建SSH密匙
我们在命令行窗口中输入
ssh-keygen -t rsa -C "你的 GitHub 邮箱"
什么都不用管，一路回车就行。然后我们进入
C:\Users\ 用户名 .ssh
目录（勾选显示 “隐藏的项目”）
我们用记事本打开
id_rsa.pub
并复制里面的内容。
3.3 在GitHub中添加SSH密钥
这个时候我们回到GitHub，进入Settings：
选择左边栏的 SSH and GPG keys，点击 New SSH key：
Title随便取，然后把id_rsa.pub里面的内容到复制到Key中，点击Add SSH key：
保存完毕以后，我们可以在本地验证一下连接。
3.4 验证连接
依旧在Git Bash Here界面中输入
ssh -T git@github.com
出现 “Are you sure……”，输入 yes 回车确认。
若出现下图的提示即连接成功：
4. 创建GitHub仓库
我们在自己GitHub的主页repository中点击右上角的New：
填写基本信息
- Repository name中输入
用户名.github.io
，一定要是这个名字！ - 勾选Add a README file
填好后点击Create repository创建仓库。
现在我们访问
https://用户名.github.io
（夜梦的就是yemenghexo.github.io）可以看到默认界面：
5. 本地安装hexo
5.1 安装hexo
我们在已经创建好的文件夹（3.1）内，同样右键点击Open Git Bash Here，然后使用npm安装Hexo。在命令行中输入：
npm install -g hexo-cli
由于网络问题，安装时间可能会有点久。这段时间里面界面不会有任何反应，请耐心等待，安装完成后会提示：
安装成功后，可以通过
hexo -version
查看hexo的版本。成功安装的话看到
5.2 初始化hexo
我们在创建好的hexo文件夹内，再新建一个文件夹用来存放hexo博客程序。比如夜梦这样
然后在上面的命令行窗口（git）中输入：
hexo init # 初始化hexo
npm install # 安装组件
由于网络问题，初始化的时间可能会有点久，耐心等待即可。当出现下图提示的时候，说明已经完成了
初始化完毕以后，我们可以在hexo程序文件夹中（夜梦这里是yemengblog）看到hexo程序文件。
5.3 预览效果
上面的步骤完成后，我们输入下面命令生成页面：
hexo g # 生成页面
生成页面需要等待一会儿，一般一两秒就完成了。
现在生成的是默认的hexo博客（主题），我们可以先本地访问一下看看效果。
hexo s # 启动预览
如果提示是否允许专用网络啥的，直接允许就可以。然后我们访问
就可以访问hexo了：
如果4000端口被占用了（一般不会有这种情况），可以运行
hexo server -p 5000
更改端口号为5000（或者是其他端口）后重试。
6. 上传hexo程序到GitHub
我们需要先安装hexo-deployer-git：
npm install hexo-deployer-git --save
然后修改_config.yml文件末尾的Deployment部分：
修改成如下（修改为你的用户名与仓库名）
deploy:
type: git
repo: git@github.com:yemenghexo/yemenghexo.github.io.git
branch: gh-pages
其实就是通过SSH进行连接，SSH连接地址可以 直接在仓库
Code
里面看到：
修改完成保存后运行
hexo c
hexo d
出现下面的提示说明已经把网站上传到GitHub了：
然后我们需要在库设置（Repository Settings）中将默认分支设置为
_config.yml
配置中的分支名称。
然后在pages页面调整源分支：
不出意外的话是不会出意外的，稍等片刻我们访问
用户名.github.io
（比如夜梦这里就是
yemenghexo.github.io
）就可以看到默认hexo了。
7. 进阶使用
配置YUN主题：
发布文章：
- HEXO系列教程 | 发布文章 | 解决静态图片路径错误问题 | 小白向教程
使用自己的域名：
- HEXO系列教程 | 为HEXO绑定自己的域名 | 小白向教程