Hexo + GitHub Pages 搭建个人博客详细教程

喜欢ヅ旅行 2023-10-14 19:14 125阅读 0赞

### 背景 ###

计算机作为一个技术更新迭代速度非常快的行业，只有不断学习才不会被时代抛弃，但是对新技术的学习还有进行积累并输出才可以学习更加透彻，因此每个人都应该有自己的积累和输出方式。

GitHub 提供的 Pags 功能可以用来作为静态博客的展示，因此我们可以借助 GitHub 平台挂载资源，实现个人的静态博客，记录一些日常积累。

### 创建 GitHub Pages ###

作为开发或热爱上网的人士，GitHub 是必不可少的网站，可谓是集学习、娱乐、摸鱼、交友于一身的大型社交平台，如果还没有 GitHub 账号的话，那我们就要赶紧注册一个加入进来，xdm 就等你了！

#### GitHub 注册登录 ####

GitHub 官网地址：[https://github.com/][https_github.com]

进行博客搭建要借助 GitHub 为我们提供的仓库服务，并借用 GitHub 的仓库 Pages 功能来实现静态页面的显示，因此需要有一个 GitHub 账号，没有的话就去 [GitHub 官网][https_github.com] 注册一个账号。

如果 GitHub 网站无法正常打开，可以参考 [解决国内 GitHub 访问慢的问题！！][GitHub] 进行处理

#### 初始化 GitHub Pages 仓库 ####

1.  点击新建一个仓库，名称使用 `[yournamer].github.io` ，初始化一个 readme.md 文件，并完成仓库的创建

*  \[yourname\] 代表自己 GitHub 账户名称，GitHub Pages 使用的仓库必须是 `[yournamer].github.io` 格式，其他仓库名称不可用

![创建 GitHub 仓库][GitHub 1]

1.  进入当前仓库的 `Setting` 页面，左侧选择 `Pages` ，右侧展示为 `GitHub Pages` 页面，在页面中可以对 GitHub Pages 进行配置，可以尝试切换主题，然后点击链接，跳转到 \`\[yournamer\].github.io\`\` 页面

*  出现自己仓库的 readme.md 页面信息后表示创建成功

![设置 GitHub Pages][GitHub Pages]

GitHub Pages 即 GitHub 提供了用来展示用户个人项目静态资源信息的页面，用户可以使用 GitHub 支持的功能进行修饰静态页面。

参考文档可见官网地址：[https://pages.github.com/][https_pages.github.com]

### 本地安装 Hexo 环境 ###

#### 安装 Node.js 环境并配置国内镜像 ####

GitHub Pages 博客使用 Hexo + GitHub Pages 实现，而 Hexo 博客是基于 node.js 的，因此需要在本地安装 node.js 环境。

1.  下载安装 node.js 并进行安装，下载地址：[node.js 官网][node.js]， [node.js 国内下载地址][node.js 1]
2.  下载到本地后，双击应用进行安装，按照默认安装完成并配置本地 node.js 环境变量，具体安装步骤参考：[Node.js 安装与配置][Node.js]
3.  安装完成后，windows 本地打开控制台窗口，使用 `node -v` 命令查看本地 node.js 版本信息，输出版本信息说明安装成功

![node-version][]

1.  node.js 安装成功后，后续可以使用 npm 命令安装相关模块，由于 node.js 源服务在国外，为了增加 node 资源包下载速度，可以使用国内阿里云镜像下载：`npm config set registry https://registry.npm.taobao.org`
2.  设置完成后，可以使用 `npm config get registry` 命令查看当前资源镜像地址，返回结果如下表示设置成功。

![设置 node.js 资源镜像][node.js 2]

#### 安装 Git 环境 ####

为了能够在本地与 GitHub 更好的进行文件资源的上传和下载，使用 Git 软件进行操作，需要下载并安装 Git 环境。

1.  下载与本机系统匹配的 Git 客户端并完成安装，下载地址：[https://git-scm.com/downloads][https_git-scm.com_downloads] ，安装教程：[https://blog.csdn.net/mukes/article/details/115693833][https_blog.csdn.net_mukes_article_details_115693833]
2.  安装完成后，命令行中使用 `git --version` 查看到本地 git 版本号，输出版本信息则说明安装成功

![git --version][]

1.  windows 进入文件浏览器任意目录，鼠标右键打开 **Git Bash Here** 进行本地 Git 信息的配置
    
     *  使用 `git config --global user.name "name"` 配置本地用户信息，name 为自定义 git 账户名
     *  使用 `git config --global user.email "eamil@xx.com"` 配置本地邮箱信息
     *  使用 `ssh-keygen -t rsa -C "eamil@xx.com"` 命令在本地生成私钥和密钥信息

![本地生成密钥][c261fbdd7386e3b896c1ca9a1472a0ff.png]

1.  密钥生成后，在本地 `~/.ssh` ，即用户路径的 .ssh 目录下找到 Git 的密钥和公钥 id\_rsa.pub 文件
2.  在 GitHub [个人设置页面][Link 1]，选择左侧 SSH and GPG keys 内容，右侧新增一个 SSH key ，上一步公钥文件内容作为 SSH 密钥添加到 GitHub 中完成 Git 与 GitHub 的授权认证

![配置 github ssh key][github ssh key]

1.  远程 GitHub 中添加了本地 SSH 密钥后，使用控制台命令 `ssh -T git@github.com` 检查是否可以与远程通信，如果出现 Hi… 你的 GitHub 账户名称的内容，说明链接成功

![ssh 通信][ssh]

### 初始化 Hexo 博客项目 ###

#### Hexo 项目下载安装 ####

本地 node 等环境准备好后，就可以进行 Hexo 博客的初始化安装，安装过程中使用 Git 控制台工具。

1.  首先，选择一个本地存放 Hexo 博客文件的位置，如 `D:\Blog`
2.  进入到目录中，右键选择 `Git Bash Here` 打开 Git 命令窗口
3.  在命令窗口中使用命令 `npm i hexo-cli -g` 下载安装 Hexo 项目
4.  安装完成后使用 `hexo -v` 查看是否成功，输出版本信息说明安装成功

![hexo 版本信息][hexo]

#### 初始化本地 Hexo Blog ####

安装 Hexo 后，在同目录下初始化博客网站文件，并进行本地运行效果预览。

1.  仍然是在 Git 控制台窗口中，使用命令 `hexo init` 初始化 hexo 文件夹
    
     *  初始化完成后，本地有了 hexo 的目录，之后的操作都在根目录下的 Git 命令窗口中
     *  初始化时可能会报错，要注意是否使用了管理员权限进行操作
2.  使用命令 `npm install` 安装必备的组件
3.  使用命令 `hexo g` 生成静态网页
4.  使用 `hexo s` 打开本地服务器，开启后可在浏览器 `localhost:4000/` 查看本地博客效果

![hexo 博客页面][hexo 1]

1.  查看完后，可以使用 `ctrl + c` 退出服务

#### 本地 Hexo 连接远程 GitHub Pages 对应仓库 ####

本地 hexo 安装完成，并在远程 GitHub 新建仓库，之后就可以通过 Git 访问远程 GitHub 仓库，在此之前，还需要最后一步将本地 hexo 和远程仓库进行关联，实现博客的一键部署。

1.  打开 hexo 目录下的 \_config.yml 文件，修改配置内容

# [yourName] 即 GitHub 中的账户名称
    # 绑定完成后，可以将本地内容部署到 GitHub 远程仓库中
    deploy:
        type: git
        repository: https://github.com/[yourName]/[yourName].github.io
        branch: master

1.  使用 Git 命令安装 hexo 部署插件；`npm install hexo-deployer-git --save`
2.  `hexo clean` 命令清理项目生成文件
3.  `hexo g`命令重新生成文件
4.  `hexo d` 命令部署项目到远程仓库
5.  部署完成后，我们可以通过访问 `[yourname].github.io` 网址查看博客内容

### 开放的博客页面 ###

本地博客项目和远程仓库绑定后，就可以将本地文件内容部署到远程，并通过 GitHub Pages 进行网络访问。

对于后续的博客书写，则可以在本地使用 markdown 文档记录内容，并使用 hexo 命令部署到远程仓库中。

#### 创建新的文件 ####

写一篇新的博客时，在 Hexo 博客根目录下，使用 `git bash` 打开 Git 命令界面，在控制台界面操作

*  `hexo new post "title"` 新增一篇名为 title 的博客，文件格式为 `title.md`
 *  本地文章生成在 `D:\Blog\source\_posts` 目录下，资源文件都会在 source 文件夹下
 *  可以使用本地 markdown 编辑器进行博客内容的书写

#### 博客发布 ####

本地 markdown 文档记录完成后，将文章部署到远程仓库步骤如下：

1.  使用markdown操作完文件后，使用 `hexo g` 生成静态网页
2.  使用 `hexo s` 可以开启本地服务器，在 `localhost:4000/` 预览效果
3.  使用 `hexo d` 上传到 GitHub 仓库，并部署博客网站，此时可以使用 `[name].github.io` 网络地址访问

#### 最后 ####

一个使用 Hexo + GitHub Pages 个人博客就部署成功了，可以用作平时一些工作生活的记录，不断学习积累，厚积而薄发。

个人的 GitHub Pages 地址，欢迎访问指教：[https://shonee.github.io/][https_shonee.github.io]

[https_github.com]: https://github.com/
[GitHub]: https://mp.weixin.qq.com/s?__biz=MzI5NTM3MDk4Mg==&mid=2247484115&idx=1&sn=031c4ff5164e3874e6361ca58d17edc3&chksm=ec55eb5adb22624c2ae0ee97d991ee2266155b469c9a255b8c494c45d8aadcd8a746958e6c6c&token=555493906&lang=zh_CN#rd
[GitHub 1]: https://img-blog.csdnimg.cn/img_convert/0a3730d9082ad7a9873ec6ba77427c7d.png
[GitHub Pages]: https://img-blog.csdnimg.cn/img_convert/dc8adc6f22f38e4dfeb2aef8bd8a79dd.png
[https_pages.github.com]: https://pages.github.com/
[node.js]: https://nodejs.org/en
[node.js 1]: https://nodejs.cn/download/
[Node.js]: https://blog.csdn.net/qq_42006801/article/details/124830995
[node-version]: https://img-blog.csdnimg.cn/img_convert/78c184911bf010450d09acdd41b12f06.png
[node.js 2]: https://img-blog.csdnimg.cn/img_convert/c01a5b0ceb87a21ce4555ed4c5fc5ca4.png
[https_git-scm.com_downloads]: https://git-scm.com/downloads
[https_blog.csdn.net_mukes_article_details_115693833]: https://blog.csdn.net/mukes/article/details/115693833
[git --version]: https://img-blog.csdnimg.cn/img_convert/fcd21d8016e2c80e21c9c44faf471209.png
[c261fbdd7386e3b896c1ca9a1472a0ff.png]: https://img-blog.csdnimg.cn/img_convert/c261fbdd7386e3b896c1ca9a1472a0ff.png
[Link 1]: https://github.com/settings/keys
[github ssh key]: https://img-blog.csdnimg.cn/img_convert/399035b89fd9f4b410decf5c6396cc99.png
[ssh]: https://img-blog.csdnimg.cn/img_convert/ca39b74aaf478ab9f1d09adc1e9fa19a.png
[hexo]: https://img-blog.csdnimg.cn/img_convert/273d762dae085e422fc585ce93a34df6.png
[hexo 1]: https://img-blog.csdnimg.cn/img_convert/e02673d4328299012d949652f3916bf8.png
[https_shonee.github.io]: https://shonee.github.io/