本篇我们将教学如何将你的网站仓库推送至Github，

并通过Github Action自动构建并部署你的网站至Github Pages

停更通知

由于多方面因素影响，该栏目停止更新，是否恢复待定。

创建Github账号与仓库

注册账号

  1. 进入官网 https://github.com/

image-20230214115215395

  1. 点击右上角的注册(Sign Up)按钮进行注册

image-20230214115511638

  1. 注册后前往你自己的邮箱，点击链接进行验证

配置Git

打开你的cmd，按照顺序输入下面的指令

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

验证是否配置成功

输入git config -l

image-20230214120043166

2个项目均有值即配置成功

使用VS Code连接至Github

  1. 切换到源代码管理选项卡

image-20230214120358702

  1. 链接你的Github账号

image-20230214120548108

在打开的窗口中登入你刚才注册的账号即可

  1. 开始上传仓库

image-20230214120720418

在弹出的提示框中，选择第二项，并且修改仓库名称为<你的用户名>.github.io

当出现以下提示时，代表你已经成功提交了仓库！

image-20230214120813105

了解Github仓库页面

image-20230214121935069

创建Github Action自动部署

  1. 使用 node --version 指令检查你电脑上的 Node.js 版本，并记下该版本 (例如：v16.y.z)
  2. 在储存库中建立 .github/workflows/pages.yml，并填入以下内容 (将 16 替换为上个步骤中记下的版本)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.github/workflows/pages.ymlname: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - 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
  1. 当部署作业完成后，产生的页面会放在储存库中的 gh-pages 分支
  2. 在储存库中前往 Settings > Pages > Source，并将 branch 改为 gh-pages
  3. 前往 username.github.io 查看网站

如果你不希望将你网站的配置文件上传到Github，你可以继续阅读Hexo 进阶教程来学习

VS Code后续文章书写与提交

你可以仍在VS Code中进行写作，通过VS Code的Github扩展提交更新

image-20230214122313876

提交更新后再次点击推送按钮，将更新推送至Github

image-20230214122501469

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~