GitHub Pages 上使用 Hexo 搭建静态博客

[TOC]

背景

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

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

创建 GitHub Pages

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

GitHub 注册登录

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

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

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

初始化 GitHub Pages 仓库

登录 GitHub 账号后，如果想要为 Hexo 进行静态资源托管，则要创建一个名称有格式要求的仓库进行使用，操作步骤如下

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

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

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

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

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

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

本地安装 Hexo 环境

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

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

1. 下载安装 node.js 并进行安装，下载地址：node.js 官网， node.js 国内下载地址

2. 下载到本地后，双击应用进行安装，按照默认安装完成并配置本地 node.js 环境变量，具体安装步骤参考：Node.js 安装与配置

3. 安装完成后，windows 本地打开控制台窗口，使用 node -v 命令查看本地 node.js 版本信息，输出版本信息说明安装成功

4. node.js 安装成功后，后续可以使用 npm 命令安装相关模块，由于 node.js 源服务在国外，为了增加 node 资源包下载速度，可以使用国内阿里云镜像下载：npm config set registry https://registry.npm.taobao.org

5. 设置完成后，可以使用 npm config get registry 命令查看当前资源镜像地址，返回结果如下表示设置成功。

安装 Git 环境

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

1. 下载与本机系统匹配的 Git 客户端并完成安装，下载地址：https://git-scm.com/downloads ，安装教程：https://blog.csdn.net/mukes/article/details/115693833

2. 安装完成后，命令行中使用 git --version 查看到本地 git 版本号，输出版本信息则说明安装成功

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

4. 密钥生成后，在本地 ~/.ssh ，即用户路径下找到 Git 的密钥和公钥 id_rsa.pub 文件

5. 在 GitHub (个人设置页面)[https://github.com/settings/keys]，选择左侧 SSH and GPG keys 内容，右侧新增一个 SSH key ，上一步公钥文件内容作为 SSH 密钥添加到 GitHub 中完成 Git 与 GitHub 的授权认证

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

初始化 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 Blog

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

1. 仍然是在 Git 控制台窗口中，使用命令 hexo init 初始化 hexo 文件夹

   • 初始化完成后，本地有了 hexo 的目录，之后的操作都在根目录下的 Git 命令窗口中
   • 初始化时可能会报错，要注意是否使用了管理员权限进行操作

2. 使用命令 npm install 安装必备的组件

3. 使用命令 hexo g 生成静态网页

4. 使用 hexo s 打开本地服务器，开启后可在浏览器 localhost:4000/ 查看本地博客效果

5. 查看完后，可以使用 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

2. 使用 Git 命令安装 hexo 部署插件；npm install hexo-deployer-git --save

3. hexo clean 命令清理项目生成文件

4. hexo g命令重新生成文件

5. hexo d 命令部署项目到远程仓库

6. 部署完成后，我们可以通过访问 [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/