跳到主要内容

将 Docusaurus 部署到 GitHub Pages

参考官方文档

生成静态文件​

yarn run build

运行后将在 /build 目录中生成静态文件

可以将站点部署到 GitHub Pages 上

在部署前，先在本地测试

yarn run serve

部署到GitHub Pages​

Docusaurus 提供了一种发布到 GitHub Pages 的简便方法

修改 docusaurus.config.js 中的相关配置​

  url: 'https://github.com/username/projectName/',
  baseUrl: '/projectName/',
  organizationName: 'username', // Usually your GitHub org/user name.
  projectName: 'projectName', // Usually your repo name.
  deploymentBranch: 'master',
名称描述
organizationNameGitHub用户名
projectNameGitHub存储库的名称
urlGitHub页面的URL
baseUrl项目的基本URL，填 /projectName/
deploymentBranch部署时的分支
提示

这里 projectName 的储存库一般为 username.github.io，如果你有自己的域名，可以去仓库的 settings 里设置 GitHub Pages 的自定义域名，记得在自己的域名控制台添加一条解析规则

都配置好之后，就可以将 Docusaurus 部署到 GitHub Pages 上了，执行

GIT_USER=<GITHUB_USERNAME> yarn deploy

等待运行完成就部署完成了，就可以通过你配置好的 url 访问你的页面了

利用 Git Action 实现自动部署​

GitHub Actions 允许在存储库中自动化，自定义和执行软件开发工作流程

假设我们的源文件储存在 rcxxx/sinnammanyo.cn 仓库中，而页面部署在 rcxxx/rcxxx.github.io 中，可以参考以下配置流程

  1. 生成一个新的 SSH key
ssh-keygen -t rsa -C "your_email@example.com"

执行后一路默认，将在用户根目录生成 ssh key，linux 将会生成在 ~/.ssh/， windows 将生成在 /c/Users/username/.ssh/

  • id_rsa.pub 为公钥

需要添加到部署仓库中，Setting -> Deploy keys -> Add Deploy key

  • id_rsa 为私钥

需要添加到源仓库 github.io 中，Setting -> Secrets -> Actions -> New repository secret

注意这里 secret 的 Name 需要记住，可以直接取名为 GH_PAGES_DEPLOY，后续的自动化工作流中将会用到这个 Name

  • 在你的源仓库中创建 .github/workflows/deploy.yml 工作流文件
.github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  pull_request:
    branches: [main]
  push:
    branches: [main]

jobs:
  test-deploy:
    if: github.event_name != 'push'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: yarn
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Test build website
        run: yarn build
  deploy:
    if: github.event_name != 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: yarn
      - uses: webfactory/ssh-agent@v0.5.0
        with:
          ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}
      - name: Deploy to GitHub Pages
        env:
          USE_SSH: true
        run: |
          git config --global user.email "actions@github.com"   # 修改为你的邮箱地址
          git config --global user.name "gh-actions"            # 修改为你的用户名
          yarn install --frozen-lockfile
          yarn deploy

git config --global user.email "actions@github.com" 修改为你 GitHub 的邮箱 git config --global user.name "gh-actions" 修改为你 GitHub 的用户名

一切就绪之后，当你向源仓库中推送文档的变更时，GitHub Action 将自动识别工作流，并执行站点的部署

参考​