Open5

Deno + Vite + VueでGitHub Pagesにデプロイする

hashrockhashrock

手順はVueだけじゃなくてVanillaでもReactでも同じと思われる。

まずvite initする。

deno run -A npm:create-vite

hashrockhashrock

.github/workflows/deno.ymlを作成(ファイル名はなんでもいいのだが)

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# This workflow will install Deno then run `deno lint` and `deno test`.
# For more information see: https://github.com/denoland/setup-deno

name: Deno

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

permissions:
  actions: write
  checks: write
  contents: write

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Setup repo
        uses: actions/checkout@v3

      - name: Setup Deno
        # uses: denoland/setup-deno@v1
        uses: denoland/setup-deno@61fe2df320078202e33d7d5ad347e7dcfa0e8f31  # v1.1.2
        with:
          deno-version: v1.x

      - run: deno task build

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

hashrockhashrock

CI終わったらSettingのPagesタブからブランチをgh-pagesに切り替え。

hashrockhashrock

デフォルトでViteのアセットはルートディレクトリからの配信が前提になっている。
GitHub Pagesにデプロイする場合はbaseを相対パスに変更しなくてはならない。

hashrockhashrock

DenoはどちらかというとBrowser wayでWeb開発をやるぞという気持ちがあるランタイムなので、フロントエンドで完結する場合はDenoだけでやれると気分爽快だったりします。すべてのNode.jsで使っていたワークフローが使えるわけじゃないですが、そういえばViteしか使ってないわみたいなミニマリストだったら大きく困ることはないですね。