2024-01-17

博客框架-Hexo►开发工具

【实操】基于 GitHub Pages + Hexo 搭建个人博客

一、引言

相信很多学习技术的读者朋友们，都梦想能创建一个属于自己的个人博客。现在，这将不是梦想，下面跟着 Huazie 一起利用 GitHub Pages + Hexo 搭建一个属于自己的个人博客吧。

二、接入 Node.js

2.1 下载并安装 Node.js

Node.js 官方下载地址

注意：Hexo 官方建议使用 Node.js 12.0 及以上版本

笔者本地下载的是 20.11.0 LTS，这对大多数用户来说已经足够了

笔者的 Windows 系统，下载完了是如下的 msi 安装包【其他系统自行去官网下载即可】：

这里直接双击安装即可，安装完了就可以去配置相关的环境变量了。

2.2 环境变量配置

现在，Huazie 以 windows 11 系统为例，介绍下配置环境变量，如下：

右击 Window 图标，打开下图并选择系统：

点击 高级系统设置，打开系统属性页面，点击 环境变量 ：

找到 Path 系统环境变量，配置上面你的 Node.js 的安装目录进去：

环境变量配置好之后，我们就可以通过 CMD 命令行，检查：

npm -v ：查看当前安装的 npm 的版本号
node -v : 查看当前安装的 Node.js 的版本号

三、接入 Git

3.1 下载并安装 Git

Windows 下载地址，其他可参考【Hexo 官方文档里的安装 Git】

笔者本地下载的版本如下【大家从上述地址下载的版本比我本地的高些】：

这里也是一样直接双击安装即可，安装完了就可以去配置相关的环境变量了。

3.2 环境变量配置

我们先来看看 Git 的安装目录：

在上述的 bin 和 cmd 目录，我们都可以看到 git.exe，按需配置，我本地环境配置的是 cmd 目录。

参考上面 Node.js 环境变量配置，配置好之后，我们就可以在命令行输入如下命令查看：

四、接入 Hexo

4.1 安装 Hexo

接入 Node.js 和 Git 之后，我们就可以使用 npm 安装 Hexo。

1	npm install -g hexo-cli

上述安装成功后，提示我 npm 有新的小版本更新，于是我进行了更新：

npm install -g npm ：更新到最新版本
npm install -g npm@<version> ：更新到特定的版本

这时我再查看当前安装的 npm 的版本号：

注意：上述更新不强制，大家按需更新即可

当然，对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

1	npm install hexo

安装 Hexo 以后，可以使用以下两种方式执行 Hexo：

npx hexo <command>
Linux 用户可以将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>：
1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

4.2 建站

1 2	# 没有设置 folder 参数，Hexo 默认在当前文件夹下创建网站 hexo init <folder>

我们需要选个本地文件夹，然后输入上述命令，用于在指定文件夹下初始化一个本地网站。

下图即为 Huazie 本地在 E:\fleaworkspace\blog 目录开始初始化一个博客网站：

因为要从 GitHub 克隆项目，这一步可能需要花点事件，请慢慢等待，不要关闭窗口

等待一会，如果如下图显示，就表示 hexo 初始化网站成功了。

接着我们切换到上述初始化的网站目录，当然如果按笔者上述操作，当前目录就是我们的网站根目录。

接着我们输入 npm install 命令，用来下载我们网站必要的依赖包。

npm install 命令的作用包括：

从 npm 注册表下载包：npm install 会从 npm 注册表（一个在线仓库）中查找并下载指定的包。你可以指定包的名称和版本号，以获取正确的包版本。
解析依赖：npm install 会解析项目中的 package.json 文件，读取其中的 dependencies 和 devDependencies 字段，确定需要安装的依赖项及其版本。它会下载并安装所有必要的依赖项，以确保项目的正常运行。
安装本地缓存：npm install 会将下载的包和依赖项安装到项目的本地缓存中，这样其他开发者也可以共享相同的依赖项版本，确保项目的可移植性和一致性。
生成 node_modules 目录：在安装完成后，npm install 会生成一个 node_modules 目录，其中包含所有安装的包和依赖项

上述操作完成之后，可以查看我们初始化的网站目录，如下所示：

有关上述文件，我们这里简单介绍下：

_config.yml ：网站的配置信息。
package.json ：应用程序的信息。
scaffolds ：模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来创建文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改 scaffold/post.md 中的 Front-matter 内容，那么每次新建一篇文章时都会包含这个修改。
source ：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes ：主题文件夹。Hexo 会根据主题来生成静态页面。

4.3 本地启动服务器

我们可以在本地启动服务器。如下所示：

执行完之后，不要关闭命令窗口，直接在浏览器打开 http://localhost:4000/，如下图所示：

当然还有很多其他的命令，感兴趣的小伙伴，请查看官方指令文档。

五、接入 GitHub Pages

5.1 初识 GitHub Pages

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，（可选）通过构建过程运行文件，然后发布网站。可以在 GitHub Pages 示例集合中看到 GitHub Pages 站点的示例。

你可以在 GitHub 的 github.io 域或自己的自定义域上托管站点。有关详细信息，请参阅“配置 GitHub Pages 站点的自定义域”。

GitHub Pages 站点的类型，有三种：

项目：项目站点连接到 GitHub 上托管的特定项目，例如 JavaScript 库或配方集合
用户：用户站点连接到 github.com 上的特定帐户。若要发布用户站点，必须创建名为 <username>.github.io 的个人帐户拥有的存储库。
组织：组织站点连接到 github.com 上的特定帐户。若要发布组织站点，必须创建名为 <organization>.github.io 的组织帐户拥有的存储库。

除非使用的是自定义域，否则用户和组织站点在 http(s)://<username>.github.io 或 http(s)://<organization>.github.io 中可用。

GitHub Pages 使用限制：
2016 年 6 月 15 日后创建并使用 github.io 域的 GitHub Pages 站点通过 HTTPS 提供服务。如果您在 2016 年 6 月 15 日之前创建站点，您可以为站点的流量启用 HTTPS 支持。有关详细信息，请参阅“使用 HTTPS 保护 GitHub Pages 站点”。

可以在将更改推送到特定分支时发布站点，也可以编写 GitHub Actions 工作流来发布站点。对于在 GitHub Pages 上部署 Hexo，请查看《官方文档》，它就是使用 GitHub Actions 部署至 GitHub Pages。

5.2 在 GitHub Pages 上部署 Hexo

下面 Huazie 来简单总结下：

在你的 GitHub 上建立名为 <你的 GitHub 用户名>.github.io 的仓库。这里参考《GitHub Pages 快速入门》即可。
使用 GitHub 客户端 克隆上述新建的仓库，并将 4.2 中初始化的目录内容 全部复制到新克隆的仓库中，或者像官方那样自己推送到远端【参考《在 GitHub Pages 上部署 Hexo》】。

在上面新克隆的仓库目录下，新建立 .github/workflows/pages.yml 【目录如果没有自己新建即可】

pages.yml 中填入以下内容 (注意下面的 Node.js 的版本，我这里是 20，大家以自己本地安装的版本为准)：

name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

使用 GitHub 客户端将上述仓库新增的文件推送到远端。
前往 GitHub 仓库，按下图顺序 Settings > Pages > Source ，并将 Source 改为 GitHub Actions。
接着等待 GitHub 自动部署，然后就可以通过 https://你的GitHub用户名.github.io/ 访问了

六、总结

本篇 Huazie 带大家利用 GitHub Pages + Hexo 搭建了能访问的个人博客。一步步实操下来，相信大家都能见到实际的效果。当然要想做好个人博客，可不止这么一点点，Huazie 这里也只是抛砖引玉，后续的深入使用，需要发挥各位的主观能动性了。

Huazie

一半诗意一半烟火