Docusaurus 架站步驟

記錄一下本站 Docusaurus 的建立與部署流程。

建立專案

npx create-docusaurus@latest my-website classic

本地開發

npm run start

本地編譯與預覽

npm run build
npm run serve

透過 GitHub 部署到 Cloudflare Pages

1. 建立 GitHub Repository
2. 視需求調整 docusaurus.config.js
3. 推送到 GitHub git push origin master
4. 建立 Cloudflare Pages 並連結到 GitHub Repository，部屬方式選「Docusaurus」

透過 GitHub Actions 部署到 GitHub Pages

1. 建立 GitHub Repository
2. GitHub Repository 設定部屬方式：「Settings」→「Pages」→「Source」→「GitHub Actions」
3. 視需求調整 docusaurus.config.js
4. 新增 /.github/workflows/deploy.yml 部屬流程
5. 觸發部署 git push origin master

deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - run: npm ci
      - run: npm run build

      - uses: actions/upload-pages-artifact@v3
        with:
          path: build

  deploy:
    needs: build
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages

    steps:
      - uses: actions/deploy-pages@v4