基于 Hexo 和 GitHub Pages 的博客建站教程

本文将介绍和总结我参考 Web 上的教程来配置 GitHub Pages 和 Hexo 框架建立博客的大致方法。

1. 建站原理

搭建类似本站博客的原理主要有以下四个部分：

1. 博客框架（将用户的输入快速生成由 HTML CSS JavaScript 组成的前端界面，可以对博客进行快速且简便的设置）

   常见的博客框架：Hexo WordPress Jekyll

2. 代码托管平台（为用户提供访问和修改的接口，将博客所需的文件、代码存放在云端）

   常见的平台：GitHub Gitee

3. 站点部署服务（将博客网站目录部署到互联网以便访问浏览）

   常见的部署服务：GitHub Pages Netify

4. 访问加速服务（CDN 加速，通过多节点缓存来提高网络内容的解析和访问速度）

   常见的加速服务：Cloudfare Alibaba Tencent

2. Hexo 环境配置

2.1 新建站点仓库

首先在 Github 中新建仓库，详细信息请参阅：”为站点创建仓库“。

❗ 注意仓库命名格式 - <user>.github.io

2.2 Git 安装

Git 是一个用于管理源代码的分布式版本控制系统。版本控制系统会在您修改文件时记录并保存更改，使您可以随时恢复以前的工作版本。
🧲 下载链接

• Windows 平台正常选择 64-bit Git for Windows Setup 即可。
• 安装完成后任意路径运行 Git Bash 终端，设置 Git 用户名和邮箱。

git --version # 验证版本号是否成功安装
git config –global "user_name” # 双引号内替换用户名
git config –global "user_email" # 双引号内替换个人邮箱

2.3 配置 SSH 公匙

• Git Bash 运行以下代码生成 SSH 密匙，详细信息请参阅：”生成新 SSH 密钥“。

ssh-keygen -t ed25519 -C "your_email@example.com" # 双引号内替换个人邮箱

• 生成成功后，将 SSH 公钥复制到剪贴板。

clip < ~/.ssh/id_ed25519.pub

• 将复制到的 SSH 公匙添加到账户设置，详细信息请参阅：”向你的帐户添加新的 SSH 密钥“。

• 到此即完成 Git 的安装和配置，后续可以开始使用 SSH 方式来进行 Git 连接。

✅ 推荐使用 SSH 方式，HTTPS 方式每次连接均需要输入用户名和密码。

2.4 Node.js 安装

Node.js（通常简称为Node）是一个用于构建服务器端和网络应用程序的运行时环境。Node.js是基于 Chrome V8 JavaScript 引擎构建的，它允许您使用 JavaScript 编程语言来创建高性能和可伸缩的网络应用程序。

🧲 下载链接

• 正常选择 LTS 稳定版本或最新版本 msi 安装包下载安装。
• 安装完成后终端运行以下命令检查是否成功返回版本号，即代表安装成功。

node -v
npm -v

3. Hexo 安装

Hexo 是一个快速、简单且强大的静态博客生成器，基于 Node.js 开发。它允许用户使用 Markdown 格式的文本来撰写博客文章，然后将这些文章转换成静态 HTML 页面，方便发布在网站上。Hexo 的目标是提供一个轻松管理和发布博客内容的解决方案，同时具备高度可定制性。

• 所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo，详细信息请参阅：”Hexo 文档“。

npm install -g hexo-cli

• 安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

• 本地运行 Hexo 并预览效果

hexo clean # 清理缓存
hexo g # 生成静态文件
hexo s # 运行本地服务器

• 本地使用浏览器打开 http://localhost:4000 即可以显示初始化的 Hexo 主题。

4. Hexo 使用

4.1 创建文章

运行示例代码创建第一篇博客文章，详细参阅：”写作 | Hexo“。

hexo new <post_title> # 替换博客标题

✅ 编辑器推荐使用 VS Code，VS Code 是开源免费的且推荐配合以下两个插件使用：

• Markdown All in One
• markdownlint

✅ Markdown 语法参阅 - Markdown 官方教程

4.2 资源文件组织化

这里推荐更改 Hexo 配置文件 _config.yml 中的 post_asset_folder 选项属性为 true。

开启此选项后，每次运行上面创建文章的示例代码时，Hexo 会自动创建一个同名资源文件夹，那么后续将需要引用的图片资源文件都可以放进该文件夹，写作时就可以通过使用相对路径引用资源，这个方法便于更好地管理资源文件。

假设我已经将文件名为 1.jpg 的图片放入同时生成的资源文件夹中，那么引用图片的示例代码如下：

{% asset_img 1.jpg [title] %}

至此 Hexo 安装和基本使用均介绍到此，后续就可以按照个人喜好开始配置主题和自定义网站，这些需要一定时间去深入探索。