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
210
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
730
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
550
Bulletproof Design System with TypeScript
takanorip
7
4.3k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
960
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
530
Ubieとアクセシビリティのこれからを考える
takanorip
0
490
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4.1k
Other Decks in Technology
See All in Technology
レビュー負債を解消する ― CodeRabbitが支えるAI駆動開発
moongift
PRO
0
320
なぜThrottleではなくDebounceだったのか? 700並列リクエストと戦うサーバーサイド実装のすべて
yoshiori
12
4.4k
こんな時代だからこそ! 想定しておきたいアクセスキー漏洩後のムーブ
takuyay0ne
4
570
プログラミング言語を書く前に日本語を書く── AI 時代に求められる「言葉で考える」力/登壇資料(井田 献一朗)
hacobu
PRO
0
160
Flutterにしてよかった?出前館アプリを2年運用して気づいたことを全部話します
demaecan
0
120
QAエンジニアがプロダクト専任で チームの中に入ると。。。?/登壇資料(杉森 太樹)
hacobu
PRO
0
350
明日から真似してOk!NOT A HOTELで実践している入社手続きの自動化
nkajihara
1
640
クレジットカードの不正を防止する技術
yutadayo
16
7.4k
QAセントラル組織が運営する自動テストプラットフォームの課題と現状
lycorptech_jp
PRO
0
400
JAWS-UG SRE支部 #14 LT
okaru
0
100
内部品質・フロー効率・コミュニケーションコストを悪化させ現場を苦しめかねない16の組織設計アンチパターン[超簡易版] / 16 Organization Design Anti-Patterns for Software Development
mtx2s
2
500
バグと向き合い、仕組みで防ぐ
____rina____
0
280
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Typedesign – Prime Four
hannesfritz
42
2.9k
The Cult of Friendly URLs
andyhume
79
6.7k
How GitHub (no longer) Works
holman
315
140k
Building Adaptive Systems
keathley
44
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
RailsConf 2023
tenderlove
30
1.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.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を よろしくお願いします!