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
260
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
2
640
Design System Documentation Tooling 2025
takanorip
3
2.4k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
960
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
680
Bulletproof Design System with TypeScript
takanorip
7
4.8k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
570
Other Decks in Technology
See All in Technology
決済サービスを支えるElastic Cloud - Elastic Cloudの導入と推進、決済サービスのObservability
suzukij
2
640
アーキテクチャモダナイゼーションを実現する組織
satohjohn
2
910
内製AIチャットボットで学んだDatadog LLM Observability活用術
mkdev10
0
110
複数クラスタ運用と検索の高度化:ビズリーチにおけるElastic活用事例 / ElasticON Tokyo2026
visional_engineering_and_design
0
160
Agent ServerはWeb Serverではない。ADKで考えるAgentOps
akiratameto
0
110
会社紹介資料 / Sansan Company Profile
sansan33
PRO
16
410k
JAWS FESTA 2025でリリースしたほぼリアルタイム文字起こし/翻訳機能の構成について
naoki8408
1
540
CyberAgentの生成AI戦略 〜変わるものと変わらないもの〜
katayan
0
210
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用~設計で可視化、AIで加速する「楽に回る」運用設計のコツ~
shoki_hata
0
3k
JAWSDAYS2026 [C02] 楽しく学ぼう!AWSとは?AWSの歴史 入門
hiragahh
0
160
GCASアップデート(202601-202603)
techniczna
0
130
チームのモメンタムに投資せよ! 不確実性と共存しながら勢いを生み出す3つの実践
kakehashi
PRO
1
110
Featured
See All Featured
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
450
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
470
Thoughts on Productivity
jonyablonski
75
5.1k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
160
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.2k
How to build a perfect <img>
jonoalderson
1
5.3k
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
860
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
240
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
3.7k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
190
Claude Code のすすめ
schroneko
67
220k
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を よろしくお願いします!