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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
takanorip
February 01, 2025
Technology
0
250
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.2k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
890
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
640
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Ubieとアクセシビリティのこれからを考える
takanorip
0
510
Other Decks in Technology
See All in Technology
Digitization部 紹介資料
sansan33
PRO
1
6.8k
GSIが複数キー対応したことで、俺達はいったい何が嬉しいのか?
smt7174
3
130
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.1k
使いにくいの壁を突破する
sansantech
PRO
1
110
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
10
73k
仕様書駆動AI開発の実践: Issue→Skill→PRテンプレで 再現性を作る
knishioka
2
560
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
550
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
200
Databricks Free Edition講座 データサイエンス編
taka_aki
0
290
~Everything as Codeを諦めない~ 後からCDK
mu7889yoon
3
250
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
370
Featured
See All Featured
Become a Pro
speakerdeck
PRO
31
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
54
Un-Boring Meetings
codingconduct
0
200
First, design no harm
axbom
PRO
2
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Designing Experiences People Love
moore
144
24k
Optimizing for Happiness
mojombo
379
71k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
The browser strikes back
jonoalderson
0
360
Abbi's Birthday
coloredviolet
1
4.7k
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を よろしくお願いします!