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
マウントとるやつ、リリースするやつ
otsuki
1
120
品質保証の取り組みを広げる仕組みづくり〜スキルの移譲と自律を支える実践知〜
tarappo
2
840
【Android】テキスト選択色の問題修正で心がけたこと
tonionagauzzi
0
130
CloudFormationコンソールから、実際に作られたリソースを辿れるようになろう!
amixedcolor
1
170
機密情報の漏洩を防げ! Webフロントエンド開発で意識すべき漏洩パターンとその対策
mizdra
PRO
5
1.3k
コード1ミリもわからないけど Claude CodeでFigjamプラグインを作った話
abokadotyann
1
160
手を動かしながら学ぶデータモデリング - 論理設計から物理設計まで / Data modeling
soudai
PRO
15
3.9k
Spring Boot利用を前提としたJavaライブラリ開発方法の提案
kokihoshihara
PRO
2
130
日々のSlackアラート確認運用をCustom Chat Modesで楽にした話 / 日々のSlackアラート確認運用をCustom Chat Modesで楽にした話
imamotohikaru
0
440
Logik: A Free and Open-source FPGA Toolchain
omasanori
0
290
どうなる Remix 3
tanakahisateru
2
350
LINE公式アカウントの技術スタックと開発の裏側
lycorptech_jp
PRO
0
350
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
The Language of Interfaces
destraynor
162
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Facilitating Awesome Meetings
lara
57
6.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
24
1.5k
Designing for humans not robots
tammielis
254
26k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
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を よろしくお願いします!