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
310
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
7
5.3k
「見せる」登壇資料デザインの極意
takanorip
7
1.4k
Design System Documentation Tooling 2025
takanorip
3
2.8k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
830
Bulletproof Design System with TypeScript
takanorip
7
5.3k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
Other Decks in Technology
See All in Technology
え?フロントエンドエンジニアの ワイがインフラも!?
puku0x
1
550
Goでデータパイプラインを作ろう
sansantech
PRO
1
440
[ChatGPT Work LT]事務作業が苦手な人のための バックオフィスの「半」自動化
chimaki_iot
0
280
グローバル基準のSREは、運用現場でどう機能したか:成熟度アセスメントの実践 / SRE NEXT 2026
sorawatanabe
0
220
2026-08-05 IBM Z開発最前線!IBM Bob Premium Package for Zって何がすごいの?
yutanonaka
0
110
制約理論(ToC)入門 2026版
recruitengineers
PRO
8
2.2k
FDEの心得
noriakioji
4
5.1k
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
nttcom
1
1.8k
ハーレムエンジニアリング
kazuma777777
0
140
Breaking the Seal: Static Deobfuscation of Compiled V8 JavaScript Bytecode Malware
hshrzd
0
740
ラジオの科学
frievea
0
310
Agent 時代の Kaggle 展望 / kaggle-in-the-agentic-era
upura
1
710
Featured
See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
760
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
GitHub's CSS Performance
jonrohan
1033
470k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Mobile First: as difficult as doing things right
swwweet
225
10k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
240
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
Become a Pro
speakerdeck
PRO
31
6.2k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
340
The untapped power of vector embeddings
frankvandijk
2
1.8k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
The Invisible Side of Design
smashingmag
301
52k
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を よろしくお願いします!