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
320
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
More Decks by takanorip
See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
5.9k
「見せる」登壇資料デザインの極意
takanorip
7
1.6k
Design System Documentation Tooling 2025
takanorip
3
3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
870
Bulletproof Design System with TypeScript
takanorip
7
5.4k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.2k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
8k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
Other Decks in Technology
See All in Technology
Azure App Service / Container Apps の組み込み認証
kuniteru
0
210
V8コントリビュート超入門
riyaamemiya
0
150
日経電子版を支えていく Kasane Design System/fec_fukuoka
nikkei_engineer_recruiting
0
230
推論の観測、できていますか? 〜 Google Cloud Gemini Enterprise Agent Platformで 3つの Gemini モデルを実測して踏んだ、評価の罠 〜
shukob
PRO
0
180
SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる
ponponmikankan
1
150
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
jnishime_dresscode
2
1.4k
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
1
220
When Does a Local Qwen Start to Break
morshoto
0
190
Webとヘルスデータ
yukukotani
1
200
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
layerx
PRO
2
1.6k
AI-DLCって実際どう? 〜聞きたいこと全部聞いてみる〜
news_it_enj
0
240
Driving AI Adoption Using In-House GPUs to Serve Qwen
po3rin
2
470
Featured
See All Featured
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
490
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
410
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
Everyday Curiosity
cassininazir
0
310
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
380
Side Projects
sachag
455
43k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.6k
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を よろしくお願いします!