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
160
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
420
Bulletproof Design System with TypeScript
takanorip
6
3.9k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
920
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Astroで始める爆速個人サイト開発
takanorip
16
12k
Other Decks in Technology
See All in Technology
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
760
オブザーバビリティ文化を組織に浸透させるには / install observability culture
mackerelio
0
130
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
330
ZOZOTOWNの大規模マーケティングメール配信を支えるアーキテクチャ
zozotech
PRO
0
550
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7k
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
230
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
9
2.5k
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
240
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
160
Kiro と Q Dev で 同じゲームを作らせてみた
r3_yamauchi
PRO
1
110
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
20250807 Applied Engineer Open House
sakana_ai
PRO
2
530
Featured
See All Featured
KATA
mclloyd
32
14k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Designing for humans not robots
tammielis
253
25k
Making Projects Easy
brettharned
117
6.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Building an army of robots
kneath
306
45k
A Tale of Four Properties
chriscoyier
160
23k
How STYLIGHT went responsive
nonsquared
100
5.7k
Become a Pro
speakerdeck
PRO
29
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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を よろしくお願いします!