使用 GitHub Pages 搭建静态网站开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

1. GitHub Pages 的原理

官网对于 GitHub Pages 的介绍：

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

只需要在名为 username.github.io 的仓库下编辑文件，就可以得到一个静态网页。那它到底是如何实现的呢？

参考文档docs.github.com/cn/pages

GitHub Pages 其实是一个静态站点托管服务，它从仓库中取得源文件，使用 GitHub Actions 工作流完成构建和部署流程（CI/CD）。

默认情况下 GitHub Pages 使用 Jekyll 静态站点生成器对用户 push 到指定分支的站点文件进行发布，不过也允许用户自定义构建过程和站点生成器，有以下两种选择:

自己编写 GitHub Actions 来自定义站点的构建&发布流程。
在仓库中创建名为 .nojekyll 的空文件来禁用 Jekyll 构建流程，然后使用自己的站点生成器在本地完成构建。

注意，GitHub Pages 不支持服务端语言，比如PHP，Ruby 或者 Python。

作为免费服务，同样也规定了一些限制：站点大小不能超过 1 GB，每月带宽不超过 100 GB，每小时构建次数不超过 10 次，还有一些速率限制等等。

2. 个性化开发方法

2.1 进一步了解 GitHub Actions

参考官方文档

GitHub Actions 是一种持续集成和持续交付 (CI/CD) 平台，可用于自动执行生成、测试和部署管道。

2.2 关于 Node.js

官网对于 Node.js 的介绍是：

Node.js is an open-source, cross-platform JavaScript runtime environment.

其实可以有更加完整的描述，即。

Node.js 是一个基于 V8 引擎的、开源的、可跨平台的 JavaScript 运行时环境。

在服务器上安装 Node.js 可以使用 JS 开发服务端程序。同时 Node.js 也成为了前端开发的基础设施（但最终前端的 JS 代码还是运行于浏览器环境而不依赖Node.js）。

2.3 安装 Node.js

安装最新版的 Node.js 参考官网

下载二进制文件可以从清华镜像站下载，速度更快。

Node.js 在 Linux 系统的安装教程

2.4 安装 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装 Hexo 参考文档

安装 Hexo 时卡在 idealTree:lib: sill idealTree buildDeps 的解决方法：

# 设置为淘宝的镜像源：
npm config set registry https://registry.npm.taobao.org
# 校验
npm config get registry

Hexo 的使用方法

npx hexo init <dir>
cd <dir>
npm install
npx hexo new <title> // 创建新文章
npx hexo server

比较重要的几个文件/目录说明

.
├── _config.yml  // 大部分配置信息
├── package.json
├── scaffolds    // 新建文章时的模板
├── source       // 存放用户资源，markdown 和 html 文件会被解析放到 public 文件夹
|   ├── _drafts
|   └── _posts
└── themes

接下来有两种选择：

通过创建 .github/workflow/xxx.yml 文件来创建一个 workflow，使用 GitHub Actions 来构建部署站点。例如下面的 pages.yml 文件就配置了一个 Pages 构建任务，在 push 到 master 分支时触发，产生的页面会放在储存库中的 gh-pages 分支：

name: Pages

on:
  push:
    branches:
      - master # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 18.x
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        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: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

npx hexo generate // 生成静态文件

2.5 更改 Hexo 的默认主题

这里推荐一个 Next 主题：

github.com/theme-next/…

安装方式最好采用下面这种方式，删除了.git，虽然后续不能直接通过git进行更新，但是可以相对独立的进行修改，保留自己的设置。

$ mkdir themes/next
$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

2.6 自动部署

完成主题站点的相关配置，或者更新博客内容后，可以直接 push 到自己 username.github.io 仓库（如果没有修改过触发分支，一般是 master 分支就可以），会自动触发构建任务和部署流程。