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
1
330
Design System Documentation Tooling 2025
takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
920
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
670
Bulletproof Design System with TypeScript
takanorip
7
4.8k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
560
Other Decks in Technology
See All in Technology
EKSで実践する オブザーバビリティの現在地
honmarkhunt
2
300
React 19時代のコンポーネント設計ベストプラクティス
uhyo
17
6.8k
2026年のAIエージェント構築はどうなる?
minorun365
10
2.2k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
43k
vol11_ねこIoTLT_お遊びVibeCoding
1027kg
0
170
opsmethod第1回_アラート調査の自動化にむけて
yamatook
0
280
AgentCore RuntimeをVPCにデプロイして 開発ドキュメント作成AIエージェントを作った
alchemy1115
3
300
LINEアプリ開発のための Claude Code活用基盤の構築
lycorptech_jp
PRO
1
870
Java ランタイムからカスタムランタイムに行き着くまで
ririru0325
0
110
AIで「ふとした疑問」を即座に検証する 〜定量で圧倒するN1理解〜
kakehashi
PRO
3
730
全自動で回せ!Claude Codeマーケットプレイス運用術
yukyu30
3
130
AIエージェントで変わる開発プロセス ― レビューボトルネックからの脱却
lycorptech_jp
PRO
2
600
Featured
See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
160
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
180
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
BBQ
matthewcrist
89
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Statistics for Hackers
jakevdp
799
230k
Chasing Engaging Ingredients in Design
codingconduct
0
120
From π to Pie charts
rasagy
0
140
Music & Morning Musume
bryan
47
7.1k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
130
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
9.7k
Unsuck your backbone
ammeep
671
58k
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を よろしくお願いします!