VitePressの環境構築をしてGitHubPagesへ展開する

この記事は何

VitePress環境構築ログをまとめたものです。

まずは成果物

https://github.com/watame/vite_press_demo

できること

• 下記環境でVitePressがホットリロード状態で起動
  • ローカルのnode
  • Docker
• GitHubActionsを利用したGitHubPagesへのドキュメント展開

VitePressって？

VitePress Vite & Vue Powered Static Site Generator

• Vueで作成されている静的サイト生成フレームワーク

個人的な推しポイント

• Markdownのファイルを元にHTMLコンテンツを作ってくれる
  • 文書管理に利用したいので、内容にだけフォーカスできるのがGood
• GitHubPagesに簡単にデプロイできる
  • GitHubでのPRレビューをしてOKだったら、即座に文書として確認できる環境を構築できるのがGood

なぜ使いたいと思ったの？

ドキュメント管理を制する 陳腐化を防ぐための実践事例 Lunch LT 内で紹介されていて、Markdownでサクッとドキュメントかけるのが便利そうだと思ったから。

資料紹介のPost

• https://x.com/wako00sa/status/1732242359193317639?s=20
• 発表者 Yuhei FUJITA さんの資料
  • https://github.com/YuheiFUJITA/slide-20231206-findy?tab=readme-ov-file
  • VitePressのサンプルも作成いただいているので、最高にわかりやすくて親切な資料です

環境構築のおはなし

VitePressの構築 / GitHubPages展開 いずれも公式ドキュメントのページを見ればすぐにできました。
（公式ドキュメントが丁寧すぎて震えました ）

一部ドキュメントを探すのに苦労した箇所があったので、ちょっとだけメモを残します。

GitHubPagesへの展開

GitHubPagesへの展開自体は GitHub Pages を本当にそのまんまやればできます（すごい）

ただ、GitHubPagesではレポジトリの名称でサブパスが区切られるため、追加で base 設定を行う必要があります。

• 参考：site-config base

VitePressの ./vitepress/config.mts に base 設定を追加し、レポジトリ名を設定することで正常に表示することができました。

import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  base: '/GitHubPagesを展開するレポジトリ名/', // <- これを追加しないとGitHubPagesで正常に表示されない
  title: "VitePress Demo",
  description: "A VitePress Site"
  // .... 省略 ....
})