Bun + Vite で GitHub Pages からサイトを公開するときの GitHub Actions

この記事の概要

Bun + Vite で作った静的なサイトを GitHub Pages を使って公開したときの GitHub Actions の内容です。

後から考えたら当たり前過ぎる内容だったのですが、せっかくなので記事にしています。

最終的な内容

name: Deploy static content to Pages

on:
  push:
    branches: ['main']

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Bun
        uses: oven-sh/setup-bun@v1
      - name: Install dependencies
        run: bun install
      - name: Build
        run: bun run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

当初ミスっていた箇所

最初はVite の公式ドキュメントをほぼ丸々コピペしていました。
diff で表示した箇所が別途手を入れた箇所です。

  name: Deploy static content to Pages

  on:
    push:
      branches: ['main']

    workflow_dispatch:

  permissions:
    contents: read
    pages: write
    id-token: write

  concurrency:
    group: 'pages'
    cancel-in-progress: true

  jobs:
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v4
        - name: Set up Node
          uses: actions/setup-node@v4
          with:
            node-version: 20
            cache: 'npm'
        - name: Install dependencies
-         run: npm ci
+         run: bun install         
        - name: Build
-         run: npm run build
+         run: bun run build
        - name: Setup Pages
          uses: actions/configure-pages@v4
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v3
          with:
            path: './dist'
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v4

修正した内容

コピペしただけだったので、Bun を使っているというのに actions/setup-node を使うという愚かなミスをしていました。

  name: Deploy static content to Pages

  on:
    push:
      branches: ['main']

    workflow_dispatch:

  permissions:
    contents: read
    pages: write
    id-token: write

  concurrency:
    group: 'pages'
    cancel-in-progress: true

  jobs:
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v4
-       - name: Set up Node
-         uses: actions/setup-node@v4
-         with:
-           node-version: 20
-           cache: 'npm'
+       - name: Set up Bun
+         uses: oven-sh/setup-bun@v1
        - name: Install dependencies
          run: bun install         
        - name: Build
          run: bun run build
        - name: Setup Pages
          uses: actions/configure-pages@v4
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v3
          with:
            path: './dist'
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v4

参考情報