2021-03-21

Viteは静的サイトにも使えそう

Home | 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 を利用しないなら

Vueを利用するなら

Markdown を使うことで VitePress のようなものを作ることも可能。1

参考

つくってみた

wtnabe/example-vite-vue-ssg

全部入りスターターキット

antfu/vitesse: 🏕 Opinionated Vite Starter Template

これをマネするのが基本になると思う。

  1. 自分が試したところ VitePress は何が足りないのか分からないがうまく動かせなかった。vite-ssg + vite-plugin-pages は動作した。 

About

例によって個人のなんちゃらです