NOTE 094 / 2021年
ページの一覧から静的なサイトを作る
Vite を静的サイトの生成に使うとき、どこを自前で決めるかを整理します。
読了目安 約2分
Vite は開発中の立ち上がりが速く、設定も読みやすいため、静的なサイトの土台に向いています。ただし、ページの一覧を集める処理や、生成後のルーティングは自分で用意する必要があります。
生成の対象をファイルの一覧から決めるのか、ルートの定義から決めるのかで、構成の見通しが変わります。小さなサイトで一度流れを作ってから、ページを増やすと迷いにくくなります。
押さえたい点
- 01ページ一覧の作り方を先に決める
- 02生成後のパスを確認する
- 03小さな構成で流れを試す
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- Vite ガイド 外部サイトvitejs.dev
- Vite 設定 外部サイトvitejs.dev
- Vite の静的配信 外部サイトvitejs.dev
- Vue.js ガイド 外部サイトvuejs.org
- Vue.js API 外部サイトvuejs.org
- Vue のリアクティブ基礎 外部サイトvuejs.org
- Vue コンポーネント基礎 外部サイトvuejs.org
- Vue Transition 外部サイトvuejs.org
- Vercel ドキュメント 外部サイトvercel.com
- Next.js ドキュメント 外部サイトnextjs.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org