Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
6k
「見せる」登壇資料デザインの極意
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
890
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
Railsのように考える: See through the Master
snoozer05
PRO
4
1.2k
30座EKS, 180次升級淬煉的EKS Upgrade Skill 的歷程
eric8230
0
190
HHKBエバンジェリストになる方法
941
0
110
新機種発売前に見直そう!端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
zozotech
PRO
0
220
研究開発部の紹介 / Sansan R&D Profile
sansan33
PRO
5
25k
山手線を徒歩で一周してわかった、 位置情報アプリは「足」が最強のデバッガー
hinakko
0
170
リアーキテクチャ後の障害ゼロを目指したShadow Testingの取り組み
nihonbuson
PRO
1
160
2026_devsumi_ozono.pdf
o3
3
530
GoのInterface内部構造から学ぶ!最高パフォーマンスを出すコード設計
yappli_developers
0
200
人間はどの意思決定を手放せるのか
kawasima
15
7.5k
顧客に向き合う開発組織へ。リアーキテクチャとフィーチャーチーム化で挑む組織改革
safie
0
2.1k
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
waiwai2111
1
140
Featured
See All Featured
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
260
Crafting Experiences
bethany
1
350
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
390
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8k
GitHub's CSS Performance
jonrohan
1033
470k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3k
Un-Boring Meetings
codingconduct
0
420
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
3
4.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.2k
Practical Orchestrator
shlominoach
192
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.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を よろしくお願いします!