Viteは静的サイトにも使えそう
Vite の説明は割愛。
まとめ
2021-03 時点で、
伝統的な HTML を生成する使い方は Vite 単体では無理なので他のものと組み合わせる必要がある
具体的には
- HTMLを個別に生成する静的サイトジェネレータ（例えば Jekyll）と組み合わせる
- Vite に plugin を追加することでも案外手軽に Server-Side Generation が可能
- この場合は HTML 全体を VDOM フレームワークで実現する必要がある
個人的にはそのうち各種ジェネレータ側の方で asset の処理を Vite に移譲する plugin も出てくるんじゃないかなぁという気がしている。
Viteにできること
以下は Vite 2.1.0 時点の話。
- Vite はあくまで超高速アセットバンドラ
- Vite 2 では build-in で複数ページ ( entry point ) を実現できている
- HTML 側の共通化を諦めれば現状でもシンプルな静的サイト（ただし JAMStack ) の生成には使える
Vite の主眼はあくまで HTML ではなく bundle する asset の方なので、HTML を便利に作る方法は提供されていない。
HTMLを生成するには
SSG ( Server Side Generate ) を利用する。以下は Vue を使って SSG を行うもの。
antfu/vite-ssg: Server-side generation for Vite
セットアップにややクセがあるので注意が必要。Vue の createApp() を置き換えて自動的にセットアップする方式。
その他に
を利用して routing 情報をファイルシステムから自動的に構築してないとたぶんうまく動かない。
その他Viteに追加すると便利そうなもの
VDOM component を利用しないなら
- alexlafroscia/vite-plugin-handlebars: Vite support for Handlebars
- VDOM ではなくシンプルなテンプレートが欲しい場合に使えるかも。partial も使える
Vueを利用するなら
Markdown を使うことで VitePress のようなものを作ることも可能。1
- vueuse/head: Document <head> manager for Vue 3. SSR ready.
- VDOM 系ツールは HTML 全体の書き換えを行わないが、これを利用することで header の要素を component から書き換えることができる。ViteSSG を利用する場合は組み込み済みで、書き換え後の HTML を生成できる。
- antfu/vite-plugin-md: Markdown for Vite
- Markdown が Vue component になる
- Frontmatter にも対応できる
- JohnCampionJr/vite-plugin-vue-layouts: Vue layout plugin for Vite
- HTML の layout ではなく Vue component 側の layout を担うもの。plugin-md や plugin-pages を利用したページの生成時に自動的にアプリケーションを初期化する component と具体的なページの component の間に挟まる。
- brattonross/vite-plugin-voie: File system based routing plugin for Vite
- 上の vite-plugin-pages でも利用しているし、vite-plugin-md と組み合わせると特定のディレクトリ以下の Markdown をページとして出力できる
- antfu/vite-plugin-components: 📲 On-demand components auto importing for Vite
参考
つくってみた
全部入りスターターキット
antfu/vitesse: 🏕 Opinionated Vite Starter Template
これをマネするのが基本になると思う。
自分が試したところ VitePress は何が足りないのか分からないがうまく動かせなかった。vite-ssg + vite-plugin-pages は動作した。 ↩