初カキコ…ども…
俺みたいな新卒で気づいたら組み込みやらされてる野郎、他に、いますかっていねーか、はは

npmとかyarnとかpnpmがなんだかわかってないようなレベルからVuePress始めてみます

VuePress is now in maintenance mode. For a next-gen Vue-based SSG built on top of Vue 3 + Vite, check out VitePress.

https://github.com/vuejs/vuepress/blob/087f8a199de4436366aba8f8bf44571117612e53/README.md#status

リポジトリ見に行ったらメンテナスモードになってるじゃん。
VuePress-next(VuePress2)ってのもあるけど、こっちもまだベータ版みたい。
https://github.com/vuepress/vuepress-next

VitePressかVuePress-nextになりそうね

ChatGPTに聞いてみた

• VitePress
  • Vite使っているから早いよ
  • 小・中規模向け
  • Vue3を最大限に使っているよ
  • コミュニティは小さいかも
  • プラグインも少ないかも
• VuePress-next
  • Webpackだから遅いよ (Webpackってなんや)
  • 大規模向け
  • コミュニティでかいよ
  • プラグインいっぱいあるよ
  • 複雑なことやるならこっち

まずはGet Startedを読む
(memo:ドキュメントが対象としているバージョンは1.0.0-rc.25)
https://vitepress.dev/guide/getting-started

npm, yarn, pnpm, bunに対応しているらしい(bunって結構最近に1.0出たばっかでは……？)
とりあえず長いものには巻かれろの精神でnpm使います

npm add -D vitepress
npx vitepress init

対話的なウィザードに答えて表示されたコマンドを実行すればページが表示された

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  mitsu-yuki's page
│
◇  Site description:
│  mitsu-yuki's page
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

VitePressについてわかったこと

• .vitepressがあるディレクトリがある場所がルートディレクトリになる
• *.mdがコンパイルされて*.htmlになる
• /path/to/index.mdは/path/to/でアクセスされると表示される

なんとなくわかってきた……？

Markdownの書き方について読んでみる

対応しているのはこんな感じ

• コードブロック
• 絵文字
• カスタムコンテンツ (色で囲むやつ。これ便利だね)

あとはプラグインを入れるとMathJaxにも対応させれるらしい。アツイ。
https://vitepress.dev/guide/markdown#math-equations

サイドバーのカスタマイズ

プロジェクトルートにある.vitepress/config.mtsをいじってサイドバーの内容を変える
てっきり各ディレクトリに.vitepress/config.mtsを作ってやるものかと思った。そうじゃないらしい

https://vitepress.dev/reference/default-theme-sidebar#multiple-sidebars

Gitで管理するときのメモ

.vitepress/cacheと.vitepress/distはgitignoreに入れる
今回だとディレクトリ構成はこんな感じなのでpages/.vitepress/cacheとpages/.vitepress/distになる

pages
|-- pages
|    `-- .vitepress
|         |-- dist
|         `-- cache
|-- package.json
`-- .gitignore

ところでnode使ったものってnode_modulesはgitignoreに入れる鉄則を聞いたことがあるんだけど、これnode_modulesってディレクトリは見当たらないね。どこにいったんだろ

faviconの設定

私のリポジトリ設定が悪いのか、これだと警告がでる……とはいえこの設定じゃないとfavicon表示されないんだよな
https://github.com/mitsu-yuki/pages/blob/04228d29fcc10513962de207347d65eed3086853/pages/.vitepress/config.mts#L8-L10

  head: [
    ['link', { rel: 'icon', href: './public/favicon.ico'}]
  ],

ググったりChatGPTに聞いても「お前のディレクトリ構成なら/favicon.icoでいいはず」と言われるので謎
GitHub Actionでデプロイしてから考えましょう

memo: GitHub Actionsハマりポイント

これを丸々コピーして動かした
https://vitepress.dev/guide/deploy#github-pages

これは完全に私が悪いので何も言えないが個人的にハマったポイント

• package-lock.jsonを入れ忘れた
  • npm installで解決した
• コマンド中に現れるパスの間違い
  • 上記サイトだと./docsにデプロイすることを前提にパスを指定しているため編集が必要
  • この変更が必要だった https://github.com/mitsu-yuki/pages/commit/6bae599b50ed239c247c6801ae6048c67c1e875b
• npm install -D
  • どうやらdevDependenciesにvitepressがなかったらしい。ChatGPTありがとう