令和最新静的サイトジェネレーター事情
https://gyazo.com/5046ef79318e7c5cbe1f56992528c988
この資料は Meguro.es #27 のLT資料です。
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
大山奥人, おおやまみちのく a.k.a やまのく
X（旧Twitter）
GitHub
株式会社クラウドワークスにてフロントエンドにまつわる仕事をやっています
得意領域
マークアップ・フロントエンド・UIデザイン・アクセシビリティ
既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主
今日のテーマ「静的サイトジェネレーター（以下SSG）」
yamanoku.iconが愛用している（静的サイトが好きなので）
これまでどういうものがあったのか
どう進化してきて今があるのかを振り返ってみる
みなさんも好きなSSGを頭の中に思い浮かべて聞いて下さい♪
そもそもSSGってなんぞや？
A tool which can be run as part of a build to transform content, data, and templates into files which can be deployed to a hosting environment as a ready-to-serve web site.
Static site generator | Jamstack
DeepL訳：コンテンツ、データ、テンプレートをファイルに変換し、ホスティング環境にデプロイするためのツール
yamanoku.icon解釈：API（JSON）をもとにテンプレートに埋め込み、静的なHTML Webサイトを生み出すやつ
有名なものはJekyll（Ruby）、Hugo（Go）
GitHub Pagesではこれらのアーキテクチャで配信できる
そもそもなぜSSGは生まれたのだろう
WordPressといったCMSでコンテンツを配信する時代があった（現在進行系）
ユーザーからのリクエスト時にサーバーからHTMLを動的に生成する
メンテナンスやパフォーマンス、セキュリティのコストやリスクが…
Jamstackというアーキテクチャが登場
Javascript、APIs、Markdown
すでに生成されたHTMLを返すので高速・セキュア
SSGがこの部分で活用されていた
今回はMeguro.esということなのでJavaScript関連のSSGを振り返っていきます
Hexo（v7.2.0）
Node.js製のSSG
2012年生まれ（v0.1.0）で最古のSSG？
歴史は長いがサポートは現在も続いている
古いNode.jsサポートしてる（7xがNode14で動く）
コンテンツはMarkdown
シンタックスハイライトがビルトインされてる
プラグインやテーマが豊富
https://hexo.io/plugins/
https://hexo.io/themes/
GatsbyJS（v5.13.0）
ReactをベースとしたSSGに特化したフレームワーク
GraphQLを扱える
プラグインが豊富（3000件以上！）
https://www.gatsbyjs.com/plugins
Incremental buildsといったビルド処理効率化の仕様がある
運営が法人化（2015年）
Netlifyの子会社化へ（2023年）
最近はレイオフなど色々あった模様…
更新も止まっているっぽい
Eleventy（v2.0.1）
11tyと略される
マークダウンファイルを置いて設定ゼロでnpx @11ty/eleventyでビルドできちゃう
nunjucksやLiquid、ejsといった豊富なJSのテンプレートでも書ける
シンプルゆえに混みいった設定をするのはやや難しい印象
昔はweb.devサイトジェネレーターとして一役買っていた
今年5月にカンファレンスやるっぽい？
Docusaurus（v3.2）
Reactベースのドキュメント生成フレームワーク
Metaが作ってる
VitePressのReact版のイメージ
OSSのドキュメントページとかで活躍してる
ロゴの恐竜が可愛い
https://gyazo.com/49d48fe39086f41b0d56c55f5034c9c9
現代のフレームワークには基本的にSSGする機能がついている
table:比較表
フレームワーク名 単体でSSG機能があるか
----------------------------- --------------------------------------------------------
Next.js ◯（getStaticProps）
Nuxt ◯
SvelteKit x（sveltejs/adapter-staticを使う）
Angular ◯（Prerenderingという名前）
Remix x（remix-ssgを使う）
SolidStart ◯（solid-start-static）
yamanoku.iconはNuxt2時代にnuxt contentとnuxt generateでサイトを作ってました
Nuxt.jsで爆速開発最高だぜ勉強会@2018-11-16
そのほかにも様々なSSGが生まれて生きている
Next.js製SSG「Nextra」
AngularとNitroで構築「Analog」
Viteでのドキュメント生成「VitePress」
DenoのSSGツール「Lume」
Rspackベースの「Rspress」
その他個人作でのものも色々…
最後に好きな静的サイトジェネレーターでも発表しようかな
https://gyazo.com/743c10e34c8a73a63cb82882cf90ac76
好きなSSG発表恐竜が好きなSSGを発表します
https://gyazo.com/2fede8e0c5cce633a8c59cc248b5ccb7
React.jsやVue.js以外にもUIフレームワークが使えるやつ
フレームワークコンポーネント | Docs
https://gyazo.com/2fede8e0c5cce633a8c59cc248b5ccb7
View Transitions APIに対応しているやつ
ビュートランジション | Docs
https://gyazo.com/2fede8e0c5cce633a8c59cc248b5ccb7
最近無料でDBを公開したやつ
Astro DB
https://gyazo.com/65acd4dccf09562372f3883eccc195f6
サーバーサイドとクライアントサイドとをフォーム送信で処理してくれるやつ
https://gyazo.com/063e9a507c514805d444729d1e8f2f38
それってServer Actionsかな
それってServer Actionsじゃないのかな
https://gyazo.com/274658614b0fb30bb285134ef84db35a
AstroのForm Actionsでした（現在策定中）
というわけで（？）Astro.icon Astroが現在のSSG覇権獲ってる気がする
なんらかのUIライブラリに依存したものではない
MPAを前提としたビルドツール
裏ではViteで動いてる
TypeScriptサポート
StarligntというWebサイト構築用フレームワークも作ってるよ
なんならMPAの体験自体を越えてきそうになってる
君はそのままでいてくれ…yamanoku.icon
https://gyazo.com/743c10e34c8a73a63cb82882cf90ac76
好きなSSGがまた出てきたその時は発表したい
発表したい
Thank you for listening !
https://gyazo.com/1603586767ccac7fc18a57aae7fae73b
参考ソース
Static Site Generators - Top Open Source SSGs | Jamstack
2023 JavaScript Rising Stars
Best of JS • Static site generator projects
#LT資料