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 は動作した。 

More

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami