Open5
Deno + Vite + VueでGitHub Pagesにデプロイする
手順はVueだけじゃなくてVanillaでもReactでも同じと思われる。
まずvite initする。
deno run -A npm:create-vite
.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
CI終わったらSettingのPagesタブからブランチをgh-pagesに切り替え。
デフォルトでViteのアセットはルートディレクトリからの配信が前提になっている。
GitHub Pagesにデプロイする場合はbase
を相対パスに変更しなくてはならない。
DenoはどちらかというとBrowser wayでWeb開発をやるぞという気持ちがあるランタイムなので、フロントエンドで完結する場合はDenoだけでやれると気分爽快だったりします。すべてのNode.jsで使っていたワークフローが使えるわけじゃないですが、そういえばViteしか使ってないわみたいなミニマリストだったら大きく困ることはないですね。