$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Eleventy3.0 で始める爆速個人ブログ開発!
Search
takanorip
February 01, 2025
Technology
0
220
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
2
940
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
790
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
580
Bulletproof Design System with TypeScript
takanorip
7
4.4k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
530
Ubieとアクセシビリティのこれからを考える
takanorip
0
490
Other Decks in Technology
See All in Technology
.NET 10 のパフォーマンス改善
nenonaninu
2
4.8k
Oracle Cloud Infrastructure:2025年11月度サービス・アップデート
oracle4engineer
PRO
1
140
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
2
690
最近のLinux普段づかいWaylandデスクトップ元年
penguin2716
0
190
AI (LLM) を活用する上で必須級のMCPをAmazon Q Developerで学ぼう / 20251127 Ikuma Yamashita
shift_evolve
PRO
2
110
HIG学習用スライド
yuukiw00w
0
110
「え?!それ今ではHTMLだけでできるの!?」驚きの進化を遂げたモダンHTML
riyaamemiya
10
4.5k
Playwrightのソースコードに見る、自動テストを自動で書く技術
yusukeiwaki
11
3.8k
手動から自動へ、そしてその先へ
moritamasami
0
240
私も懇親会は苦手でした ~苦手だからこそ懇親会を楽しむ方法~ / 20251127 Masaki Okuda
shift_evolve
PRO
4
570
生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉
legalontechnologies
PRO
0
160
シンプルを極める。アンチパターンなDB設計の本質
facilo_inc
1
1.3k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Scaling GitHub
holman
464
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
GitHub's CSS Performance
jonrohan
1032
470k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Raft: Consensus for Rubyists
vanstee
140
7.2k
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を よろしくお願いします!