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
270
0
Share
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
3
720
Design System Documentation Tooling 2025
takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
710
Bulletproof Design System with TypeScript
takanorip
7
4.9k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
590
Other Decks in Technology
See All in Technology
ADOTで始めるサーバレスアーキテクチャのオブザーバビリティ
alchemy1115
2
270
自己組織化を試される緑茶ハイを求めて、今日も全力であそんで学ぼう / Self-Organization and Shochu Green Tea
naitosatoshi
0
310
AI環境整備はどのくらい開発生産性を変えうるか? #AI駆動開発 #AI自走環境
ucchi0909
0
110
レガシーシステムをどう次世代に受け継ぐか
tachiiri
0
330
プロダクトを触って語って理解する、チーム横断バグバッシュのすすめ / 20260411 Naoki Takahashi
shift_evolve
PRO
1
250
申請待ちゼロへ!AWS × Entra IDで実現した「権限付与」のセルフサービス化
mhrtech
1
230
Oracle AI Database@Azure:サービス概要のご紹介
oracle4engineer
PRO
6
1.4k
解剖"React Native"
hacusk
0
120
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」ご紹介資料
laysakura
0
1.6k
主催・運営として"場をつくる”というアウトプットのススメ
_mossann_t
0
130
建設的な現実逃避のしかた / How to practice constructive escapism
pauli
4
300
推し活エージェント
yuntan_t
1
890
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
GraphQLとの向き合い方2022年版
quramy
50
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Making the Leap to Tech Lead
cromwellryan
135
9.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
790
Art, The Web, and Tiny UX
lynnandtonic
304
21k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
190
The Spectacular Lies of Maps
axbom
PRO
1
680
Crafting Experiences
bethany
1
110
Building AI with AI
inesmontani
PRO
1
870
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を よろしくお願いします!