VitePressにポートフォリオを移行した話

TL;DR

See↓

Vitepressって?

VuejsプロジェクトのSSG(静的サイトジェネレーター)｡マークダウンを用意してビルドすると､おしゃれなサイトが簡単に生成できる｡

推奨環境では､docs/配下にマークダウン(+vitepressのカスタム文法)で作ったファイルをWebページに変換して静的サイトを作ってくれる｡

メリット

• デザイン無理人間にとって内容だけ作れればいいようになっている
  • マークダウン書いてプッシュするだけ(デプロイジョブ自動化はいる)
  • レスポンシブデザイン最初から対応してるのすごくない?
• その気になればカスタムもできる

開発環境

• pnpm: 8.14.1
• node.js: 20.11.0
• vitepress: 1.0.0-rc.40

Codespacesで開発は行いました｡ 学生ライセンスさまさま｡

セットアップ

$ pnpm add -D vitepress

$ pnpm vitepress init

対話型でセットアップができるのでお好みで｡

デプロイ整備をする

公式にかかれているものを参考に｡
あと公式のRepoのAction見るといい感じにかかれているので､あとは最新バージョンとかにあわせつつ

コード全文

name: Deploy Vitepress site to Pages

on:
    push:
        branches: [main]
    workflow_dispatch:

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

concurrency:
    group: pages
    cancel-in-progress: false

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v4
              with:
                    fetch-depth: 0
            - uses: pnpm/action-setup@v2
              name: Install pnpm
              with:
                version: 8
                run_install: false
    
            - name: Get pnpm store directory
              shell: bash
              run: |
                echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
    
            - uses: actions/cache@v3
              name: Setup pnpm cache
              with:
                path: ${{ env.STORE_PATH }}
                key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
                restore-keys: |
                  ${{ runner.os }}-pnpm-store-
            - name: Setup Node
              uses: actions/setup-node@v4
              with:
                node-version: 20
                cache: pnpm
            - name: Setup Pages
              uses: actions/configure-pages@v4
            - name: Install dependencies
              run: pnpm install
            - name: build with Vitepress
              run: |
                pnpm run docs:build
                touch docs/.vitepress/dist/.nojekyll
            - name: Upload artifact
              uses: actions/upload-pages-artifact@v3
              with:
                path: docs/.vitepress/dist
    deployment:
        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

補足

公式でDeploy用のジョブのExampleがあります

https://vitepress.dev/guide/deploy#github-pages

公式は若干バージョンが低かったり､pnpm/action-setupのversion指定必須が書かれていなかったり(これに関してはActionで落ちたときに確認すればいいです､公式でもOptionalがデフォルトなので)

また､依存関係などについてはactions/cacheとか使うといいかもしれないです(そもそも軽量になりやすいVitePressでそんなにキャッシュしなくていいかもしれない)

参考: https://github.com/marketplace/actions/setup-pnpm#version

これでmainブランチへのプッシュが行われる度にビルドしてデプロイしてくれる｡

URLの設定は｢Settings > Pages > Custom Domains｣で設定する｡
設定すると勝手にCNAME用にデプロイJobを走らせてくれる｡

Renovateについて

依存関係の更新を監視して更新PRを切ってくれるRenovateをいれようと思ったけど､きな臭かったので一旦見送り｡今後追加予定｡

移行のきっかけ

自分の元々のポートフォリオの構成はNext.js(App Router)+React-Markdown+ChakraUIだったのだが､フロントに関する知見がなく､平成のクソダサデザインのほうがまだマシだよな視認性になってしまっていた｡

• リンクにカッコつけて文字つけようとして不自然な改行になる
• 正しくレンダリングされないマークダウン
• 英語でカッコつけてて読みづらい
• Blogを作ったはいいものの､なぜかここだけすごい左よりになってる

Hono.jsのドキュメントがかっこよかったので何で作っているんだろうと思って実装見に行ったらVitepressだった｡

今後やりたいこと

全部の内容移行はできてないので､Blogとかもふくめて移行を完了させたい｡

文法の拡張だったり､カスタム性が高いので､自分用のコンポーネントを作っていい感じにしていきたい
a11y対応勉強ついでにしてみたいよね

どのバージョンでもfavicon指定しないの､やめようね()

今困っていること

この通りにmembersのavaterのpng画像を指定したが､正しく表示されない うーむ

参考