【VitePress】ローカルではなくGitHub PagesにActionsでデプロイしよう

やること

• VitePressでつくったページをGitHub Pagesにデプロイする

前提

VitePress

VitePressは、Vue.jsベースの静的サイトジェネレーター（SSG）です。MarkdownファイルをHTMLに変換し、かっちょいいドキュメントサイトを生成します。

• 高速なビルド（Viteベース）
• Markdownの拡張機能
• Vueコンポーネントによってカスタマイズ可能
• 検索機能のサポート
• TypeScriptのサポート

実は、前述したVitepressの公式サイト自体もVitepressベースで作られています。要は、そういう雰囲気のサイトを作れるんだってことですね。

Github Pages

GitHub Pagesは、GitHubが提供する無料の静的サイトホスティングサービスです。GitHubとの連携のしやすさ（特にactions）が売りなんじゃないでしょうか。

• ブランチから直接自動デプロイ
• 無料ホスティング
• セキュアなHTTP接続

手順

公式ドキュメントに記載の手順に従ってやってみます。

GitHubの設定を変える

GitHub Actionsの設定

レポジトリの設定の「Actions」から「Actions permissions」を設定してください。

今回は、「Allow Enokisan, and select non-Enokisan, actions and reusable workflows」を選んで、必要な外部アクションが発生する際には個別に承認するようにします。

GitHub Pagesの設定

レポジトリの設定の「Pages」から「Build and deployment」の「Source」を「GitHub Actions」に変更してください。

VitepressのbaseUrlの設定を変える

公式サイト曰く、

WARNING

Make sure the base option in your VitePress is properly configured. See Setting a Public Base Path for more details.

とのことです。

GitHub Pagesでは、レポジトリの名称でサブパスを区切ります。ので、このタイミングでbaseの設定をしていない場合はしておいてねってことです。

config/base.jsをつくる

// docs/.vitepress/config/base.js
export const base = '/eno-adr/'

baseUrlを参照するために外出ししておきます。（もっといいやり方あれば教えてください）

config.mjsの修正

// docs/.vitepress/config.mjs
import { defineConfig } from 'vitepress'
import { base } from './config/base.js'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  base,
  title: "eno-adr",
  description: "A sample site for adr",
  // ..
})

VitePressの設定をまずは変えましょう。base設定を加えます。

urlを返却する関数の修正

VitePressの標準機能でうまく解釈される部分がほとんどで、もともとbaseを気にしていなくても、baseの値をちゃんとprefixにおいて遷移してくれる部分もあります。（mdファイル内のリンクとかはうまくいくので、html化されるときにVitePressがよしなにやってくれている・・・？）

自作関数でリンクを生成する部分については、この補完がうまく効かなかったので修正しました。

// scripts/getAdrList.js
import { base } from '../.vitepress/config/base'
// ..

link: `${base}pages/adr/${file.replace('.md', '')}`,
// ..

deploy.ymlを作る

公式ドキュメントの内容をまるパクりで基本的にはOKです。

npmではなく、yarn派の場合は以下のようにすればいいです。

# https://vitepress.dev/guide/deploy#github-pages
name: Deploy VitePress site to Pages

on:
  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
  # using the `master` branch as the default branch.
  push:
    branches: [main]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Not needed if lastUpdated is not enabled
      # - uses: pnpm/action-setup@v3 # Uncomment this block if you're using pnpm
      #   with:
      #     version: 9 # Not needed if you've set "packageManager" in package.json
      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: yarn # or pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: yarn install # or pnpm install / yarn install / bun install
      - name: Build with VitePress
        run: yarn docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

ここまでできると、mainブランチにpushされるたび、デプロイされるようになります。

できた

超簡単にGitHub Pagesへデプロイできました！

まとめ

publicレポジトリでとりあえずできたぞ！

privateでもできたら会社とかで使えそうだな・・・。いずれ試します。

参考