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
290
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
「見せる」登壇資料デザインの極意
takanorip
4
1k
Design System Documentation Tooling 2025
takanorip
3
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
770
Bulletproof Design System with TypeScript
takanorip
7
5.2k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
早わかり W3C Community Group
takanorip
0
610
Other Decks in Technology
See All in Technology
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
civitaspo
1
200
20260619 私の日常業務での生成 AI 活用
masaruogura
1
210
Kubernetesにおける学習基盤とLLMOpsの概要
ry
1
310
Chainlitで作るお手軽チャットUI
ynt0485
0
250
NAB Show 2026 動画技術関連レポート / NAB Show 2026 Report
cyberagentdevelopers
PRO
0
200
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
line_developers_tw
PRO
0
1.1k
AIはどのように 組織のアジリティを変えるのか?
junki
3
890
小さくはじめるSLI/SLO ~育てながら組織に定着させる実践知~ / Starting Small with SLI/SLOs: Building Adoption Through Continuous Growth
nari_ex
7
1.9k
【セミナー資料】Claude Code をセキュアに使うための考え方と設定の勘どころ / Claude Code Webinar 20260616
masahirokawahara
2
350
AmazonRoute 53ではじめてのドメイン取得!HTTPS化までの道のりを整理してみた
usanchuu
3
140
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
nikkei_engineer_recruiting
0
270
【NRUG vol.18】なぜ多くのオブザーバビリティ導入は失敗するのか
nrug_member
0
140
Featured
See All Featured
Believing is Seeing
oripsolob
1
140
We Have a Design System, Now What?
morganepeng
55
8.2k
Agile that works and the tools we love
rasmusluckow
331
21k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
370
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を よろしくお願いします!