Hexo 配置逻辑及其应用于 GitHub Pages

Hexo + GitHub Pages 配置

这份文档主要介绍如何部署 Hexo 的配置逻辑，网上分享怎么配置 Hexo 个人博客的教程很多，但很少有记录为什么要这样配置，以及这么做的逻辑是什么：

1.为什么固定为 username.github.io 这种格式？

GitHub Pages 要求仓库名称为 username.github.io 这种格式，因为这是 GitHub Pages 的工作方式。GitHub 使用这种格式来确定哪个仓库应该被用来构建和发布 GitHub Pages 网站，简而言之，这是规定。

2. 如何将 md 文件转化为在 GitHub Pages 上显示的 HTML 文件？

Hexo 是一种基于 Node.js 的静态网站生成器，能够使用 Markdown（md）作为网站的源代码，并将其渲染成 HTML，以便在网页浏览器中显示。

以下是 Hexo 将 md 文件转化为可以在 GitHub Pages 上显示的 HTML 文件的基本步骤：

  1. 解析 Markdown：Hexo 使用一个叫做 marked 的库来解析 Markdown 文件。

  2. 应用主题和布局：Hexo 使用 EJS 模板引擎将解析后的 HTML 插入到主题的相应布局中，生成最终的 HTML 文件。

  3. 生成静态文件：Hexo 将最终的 HTML 文件以及任何相关的 CSS 和 JavaScript 文件写入到 public 目录中。

  4. 部署到 GitHub Pages：Hexo 使用 hexo-deployer-git 插件将 public 目录中的所有文件推送到 GitHub Pages 仓库。

当文件被推送到 GitHub Pages 仓库后，GitHub Pages 服务将这些静态文件提供给访问 username.github.io 或者配置的自定义域名的用户。

3. 配置了 DNS 解析后，为什么还需要 CNAME 文件？

  1. CNAME 文件在这个过程中起到了“桥梁”的作用。当用户的请求导向到 username.github.io 后，GitHub 会查看仓库中的 CNAME 文件，确定正确的自定义域名，并确保自定义域名正确显示在浏览器的地址栏中。CNAME 文件并不含有任何服务器的信息，只是一个包含自定义域名的文本文件。

  2. 当使用自定义域名并且在 DNS 服务商那里将自定义域名解析到 username.github.io 时，GitHub Pages 在接收到请求后，会查看请求的 Host Header（即自定义域名），并尝试在所有的 GitHub Pages 仓库中寻找一个 CNAME 文件与之匹配的仓库。如果找不到一个与自定义域名匹配的 CNAME 文件，GitHub Pages 无法确定应显示哪个仓库的页面，因此会返回 404 错误。这我看来这本质上是一个权限控制的问题，控制只有你所允许的自定义域名才能访问这里，正如github设置栏所言 Custom domains allow you to serve your site from a domain other than XXX.github.io.

因此，当使用自定义域名时，需要在 GitHub 仓库中添加一个 CNAME 文件。CNAME 文件起到了将自定义域名与 GitHub Pages 仓库关联起来的作用。

部署 Hexo 并设置 GitHub Pages 以及个人域名映射到 Hexo

前期准备

安装 Node.js 和 Git 是必需的，因为 Hexo 是基于 Node.js 的，而 Git 则用来部署到 GitHub Pages。

安装 Hexo

可以在终端中输入以下命令来安装 Hexo：

1
npm install -g hexo-cli

创建一个新的 Hexo 项目：

1
2
hexo init blog
cd blog

然后，安装项目依赖：

1
npm install

运行以下命令来启动 Hexo 服务器：

1
hexo server

现在，在浏览器中通过 http://localhost:4000 可以查看 Hexo 站点。

配置 GitHub Pages

创建一个新的 GitHub 仓库，命名为 username.github.io，其中 username 是 GitHub 用户名。注意，这个名字必须完全匹配，包括大小写。

在 Hexo 项目的根目录下，打开 _config.yml 文件，找到 deploy 部分并进行如下配置：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/username/username.github.io
  branch: main

然后，安装 hexo-deployer-git 插件：

1
npm install hexo-deployer-git --save

使用以下命令可以部署 Hexo 网站到 GitHub Pages：

1
2
hexo clean
hexo deploy

设置个人域名映射

购买一个喜欢的域名，并在 DNS 解析设置中添加一个 CNAME 记录，将其指向 username.github.io。

在 Hexo 项目的 source 文件夹下，创建一个名为 CNAME 的文件（没有扩展名），文件内容是个人域名，例如 www.yourwebsite.com，或者可以通过 GitHub 的设置标签页，找到 Pages，在 custom domain 处设置，GitHub 会自动添加 CNAME 文件。

重新部署 Hexo 网站：

1
2
hexo clean
hexo deploy

现在，应可以通过个人域名访问 Hexo 网站。

部署 Hexo 并设置 GitHub Pages 以及个人域名映射到 Hexo

前期准备

首先，你需要安装 Node.js 和 Git，Hexo 是基于 Node.js 的，Git 则是用来部署到 GitHub Pages 的。

  1. 安装 Node.js
  2. 安装 Git

安装 Hexo

打开终端并输入以下命令来安装 Hexo：

1
npm install -g hexo-cli

创建一个新的 Hexo 项目：

1
2
hexo init blog
cd blog

然后，安装项目依赖：

1
npm install

运行 hexo server 来启动 Hexo 服务器：

1
hexo server

现在，你应该可以在你的浏览器中通过 http://localhost:4000 来查看你的 Hexo 站点。

配置 GitHub Pages

在你的 GitHub 账户中创建一个新的仓库，名为 username.github.io，其中 username 是你的 GitHub 用户名。注意，这个名字必须完全匹配，包括大小写。

在你的 Hexo 项目的根目录下，打开 _config.yml 文件，找到 deploy 部分并进行如下配置：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/username/username.github.io
  branch: main

然后，安装 hexo-deployer-git 插件：

1
npm install hexo-deployer-git --save

现在，你可以使用 hexo deploy 命令来部署你的 Hexo 网站到 GitHub Pages：

1
2
hexo clean
hexo deploy

设置个人域名映射

购买一个你喜欢的域名，并在 DNS 解析设置中添加一个 CNAME 记录，将其指向 username.github.io。

在你的 Hexo 项目的 source 文件夹下，创建一个名为 CNAME 的文件（没有扩展名），文件内容应该是你的域名，例如 www.yourwebsite.com，或者可以通过github的setting标签页，找到Pages,在custom domain处设置，github会自动添加CNAME文件。

重新部署你的 Hexo 网站：

1
2
hexo clean
hexo deploy

现在，你应该可以通过你的个人域名访问你的 Hexo 网站。