Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Eleventy3.0 で始める爆速個人ブログ開発!
Search
takanorip
February 01, 2025
Technology
0
210
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
720
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
550
Bulletproof Design System with TypeScript
takanorip
7
4.3k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
960
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
530
Ubieとアクセシビリティのこれからを考える
takanorip
0
490
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4.1k
Other Decks in Technology
See All in Technology
触れるけど壊れないWordPressの作り方
masakawai
0
750
Spec Driven Development入門/spec_driven_development_for_learners
hanhan1978
1
1k
MCP サーバーの基礎から実践レベルの知識まで
azukiazusa1
27
14k
Zabbix Conference Japan 2025 ダッシュボードコンテストLT
katayamatg
0
140
NOT A HOTEL SOFTWARE DECK (2025/11/06)
notahotel
0
3.8k
QAエンジニアがプロダクト専任で チームの中に入ると。。。?/登壇資料(杉森 太樹)
hacobu
PRO
0
160
窓口業務を生成AIにおまかせ!Bedrock Agent Coreで実現する自治体AIエージェント!
rayofhopejp
0
290
隙間ツール開発のすすめ / PHP Conference Fukuoka 2025
meihei3
0
230
LINE公式アカウントの技術スタックと開発の裏側
lycorptech_jp
PRO
0
270
[Oracle TechNight#94] Oracle AI World 2025 Oracle Database関連フィードバック
oracle4engineer
PRO
0
250
開発者から見たLLMの進化 202511
ny7760
1
160
よくわからない人向けの IAM Identity Center とちょっとした落とし穴
kazzpapa3
2
630
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Gamification - CAS2011
davidbonilla
81
5.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Thoughts on Productivity
jonyablonski
73
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Transcript
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を よろしくお願いします!