mitsu 6ヶ月前

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

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

mitsu 6ヶ月前に更新

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

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

VitePressかVuePress-nextになりそうね

mitsu 6ヶ月前

ChatGPTに聞いてみた

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

mitsu 6ヶ月前

こういうときはstarを見て比べろと言われた気がする
2023/11/10時点だと

VuePress-next: 2k
VitePress: 9.4k
なのでVitePressかな

あとVitePressはvuejs傘下だしこっちのほうが良さそう

VitePressを使うのでタイトルを変更します

mitsu 6ヶ月前

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

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.

mitsu 6ヶ月前

プロジェクト直下に作ったのは間違いな気がしてきた

プロジェクトルートを./pagesに変更します

mitsu 6ヶ月前

VitePressについてわかったこと

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

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

mitsu 6ヶ月前に更新

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

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

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

あとはプラグインを入れるとMathJaxにも対応させれるらしい。アツイ。

mitsu 6ヶ月前

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

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

mitsu 5ヶ月前に更新

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ってディレクトリは見当たらないね。どこにいったんだろ

mitsu 5ヶ月前

node_modulesってディレクトリは見当たらないね。どこにいったんだろ

どうやらnpm installしないと生成されないっぽい？
あとnpm installしないとGitHub Actionsのデプロイも失敗するっぽい

mitsu 5ヶ月前に更新

faviconの設定

私のリポジトリ設定が悪いのか、これだと警告がでる……とはいえこの設定じゃないとfavicon表示されないんだよな

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

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

mitsu 5ヶ月前に更新

解決

ディレクトリ構成はこう

pages
|-- .vitepress
|-- public
|    |-- favicon.ico
|-- assets
`-- index.md

github pagesのURLがhttps://<username>.github.io/<repository>/になるので、favicon.icoのパスは/pages/favicon.icoで指定する必要があった

設定できたコミットはこれ

mitsu 5ヶ月前

memo: GitHub Actionsハマりポイント

これを丸々コピーして動かした

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

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

mitsu 5ヶ月前

タグがプッシュされたらActionsが走るように変更した

memo: Actions側の環境も編集すること(とても助かりました)