Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Eleventy3.0 で始める爆速個人ブログ開発!
Search
takanorip
February 01, 2025
Technology
0
220
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
February 01, 2025
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
1.6k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
830
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
600
Bulletproof Design System with TypeScript
takanorip
7
4.5k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
990
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
540
Ubieとアクセシビリティのこれからを考える
takanorip
0
500
Other Decks in Technology
See All in Technology
Kiro を用いたペアプロのススメ
taikis
4
1.6k
20251203_AIxIoTビジネス共創ラボ_第4回勉強会_BP山崎.pdf
iotcomjpadmin
0
120
IAMユーザーゼロの運用は果たして可能なのか
yama3133
2
520
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
oidfj
0
410
AI駆動開発の実践とその未来
eltociear
1
470
さくらのクラウド開発ふりかえり2025
kazeburo
2
260
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.9k
普段使ってるClaude Skillsの紹介(by Notebooklm)
zerebom
8
1.9k
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
minorun365
2
350
AgentCoreとStrandsで社内d払いナレッジボットを作った話
motojimayu
1
710
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
yayoi_dd
0
610
AWS re:Invent 2025 re:Cap LT大会 データベース好きが語る re:Invent 2025 データベースアップデート/セッションの紹介
coldairflow
0
150
Featured
See All Featured
The SEO Collaboration Effect
kristinabergwall1
0
300
Design in an AI World
tapps
0
97
Information Architects: The Missing Link in Design Systems
soysaucechin
0
710
How to make the Groovebox
asonas
2
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Unsuck your backbone
ammeep
671
58k
Writing Fast Ruby
sferik
630
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Designing for humans not robots
tammielis
254
26k
A better future with KSS
kneath
240
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
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を よろしくお願いします!