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
110
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
800
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
430
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.2k
デザインシステム運用とOKRの良い関係
takanorip
0
2.1k
Other Decks in Technology
See All in Technology
Cline を知ると世界が広がった(だが、俺は Claude for Desktop で行く)
nassy20
3
190
入社半年で PTE に! 元海外在住者が語る Google Cloud × G-genで 成長する秘訣
risatube
PRO
0
140
UDDのすすめ
maguroalternative
0
600
RubyKaigi 2025でプロポーザルが初めて採択されるまでにやったこと
yuuu
1
130
TDSE_20250311_AIxIoTビジネス共創ラボ第2回勉強会_発表資料.pdf
iotcomjpadmin
0
370
ブレインパッド_20250311_AIxIoTビジネス共創ラボ_第2回勉強会.pdf
iotcomjpadmin
0
370
Agent Mode とは?GitHub Copilot の新機能を探る
lescoggi
1
170
単一の深層学習モデルによる不確実性の定量化の紹介 ~その予測結果正しいですか?~
ftakahashi
PRO
3
480
View Transition API
shirakaba
1
330
Alpine.js を活用した Laravel MPA フロントエンド最適化戦略 / Alpine.js MPA
tzmfreedom
1
570
セキュリティグループの”タイプ”を改めて考えてみる
masakiokuda
0
160
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
1.5k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
430
Building an army of robots
kneath
303
45k
Into the Great Unknown - MozCon
thekraken
35
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Testing 201, or: Great Expectations
jmmastey
42
7.3k
GraphQLとの向き合い方2022年版
quramy
44
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
590
A better future with KSS
kneath
238
17k
For a Future-Friendly Web
brad_frost
176
9.6k
How GitHub (no longer) Works
holman
314
140k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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を よろしくお願いします!