この記事は何

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"
  // .... 省略 ....
})