Eleventy3.0 で始める爆速個人ブログ開発！

Eleventy3.0 で始める爆速個人ブログ開発！大木尊紀 - BuriKaigi2025 LT

大木尊紀デザインエンジニアデザインとエンジニアリングが交わるところが最近の主戦場。プロダクト開発の他にデザインシステムの開発・運用やアクセシビリティ改善にも取り組んでいる。自己紹介

Eleventy概説

Eleventy Eleventy is a simpler static site generator シンプルなJavaScript製静的サイトジェネレーターわりと前からある（v0.1.0リリースは8年前！）
https://github.com/11ty/eleventy/blob/v0.1.0/ README.md

Eleventyの良いところ：1 めちゃくちゃ手軽に始められるビルドも早い薄い

Eleventyの良いところ：2 いろいろなテンプレートに対応

Eleventyの良いところ：3 プラグインが書きやすい https://www.11ty.dev/docs/plugins/#creating-a-plugin

Eleventy3.0でできるようになったこと

Eleventy3.0 https://www.11ty.dev/blog/eleventy-v3/

Full support for ESM https://www.11ty.dev/docs/cjs-esm/

TypeScript / JSX / MDX Templates JSX, TSX, MDXがテンプレートとして使えるようになった！
今まではViteなどを使って自前でビルドする必要があったが、標準でJSX、TSXが使える ※ Reactが動くわけではない！

Full support for ESM → TypeScript 設定ファイルをTypeScriptで書けるようになった！詳細はこちらのブログにあるよ https://bennypowers.dev/posts/typescript-11ty-config/

Eleventy 3.0 馴染みのある書き方ができるようになったので、より使いやすく！ Nunjucksから開放されるの嬉しくて嬉しくてたまらないと思ってたけど少しさみしい気もする

Full support for ESM → TypeScript FrontMatter内でJSが使えるように

Astroとどう違う？

2年前… https://speakerdeck.com/takanorip/astroteshi-merubao-su-ge-ren-saitokai-fa

Astroとの比較 Eleventy ) 薄く余計な機能がなV ) カスタマイズ性が高い、自分でいろいろやる必要があE ) 本当に静的なウェブサイト向き（ブログとか） Astro )
ReactやVueなどのコンポーネントが動作する、動的なサイトを作ることを意識していE ) 全部いい感じに面倒見てくれるリッチなフレームワーク

Eleventy3.0をよろしくお願いします！

Eleventy3.0 で始める爆速個人ブログ開発！

Eleventy3.0 で始める爆速個人ブログ開発！

takanorip

More Decks by takanorip

Other Decks in Technology

Featured

Transcript