👉
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見るといい感じにかかれているので､あとは最新バージョンとかにあわせつつ
これでmainブランチへのプッシュが行われる度にビルドしてデプロイしてくれる｡
URLの設定は｢Settings > Pages > Custom Domains｣で設定する｡
設定すると勝手にCNAME用にデプロイJobを走らせてくれる｡
Renovateについて
依存関係の更新を監視して更新PRを切ってくれるRenovateをいれようと思ったけど､きな臭かったので一旦見送り｡今後追加予定｡
移行のきっかけ
Hono.jsのドキュメントがかっこよかったので何で作っているんだろうと思って実装見に行ったらVitepressだった｡
今後やりたいこと
文法の拡張だったり､カスタム性が高いので､自分用のコンポーネントを作っていい感じにしていきたい
a11y対応勉強ついでにしてみたいよね
参考
Discussion