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
720
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
こんな時代だからこそ! 想定しておきたいアクセスキー漏洩後のムーブ
takuyay0ne
4
500
プロダクトエンジニアとしてのマインドセットの育み方 / How to improve product engineer mindset
saka2jp
2
210
Spec Driven Development入門/spec_driven_development_for_learners
hanhan1978
1
1k
AI-ready"のための"データ基盤 〜 LLMOpsで事業貢献するための基盤づくり
ismk
0
150
よくわからない人向けの IAM Identity Center とちょっとした落とし穴
kazzpapa3
2
660
短期間でRAGシステムを実現 お客様と歩んだ生成AI内製化への道のり
taka0709
1
250
龍昌餃子で理解するWebサーバーの並行処理モデル - 東葛.dev #9
kozy4324
1
140
re:Invent完全攻略ガイド
junjikoide
0
150
Data Engineering Guide 2025 #data_summit_findy by @Kazaneya_PR / 20251106
kazaneya
PRO
10
2.1k
エンジニア採用と 技術広報の取り組みと注力点/techpr1112
nishiuma
0
110
ソフトウェアエンジニアとデータエンジニアの違い・キャリアチェンジ
mtpooh
1
730
AIエージェントを導入する [ 社内ナレッジ活用編 ] / Implement AI agents
glidenote
1
340
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
28
2.3k
Context Engineering - Making Every Token Count
addyosmani
8
360
Facilitating Awesome Meetings
lara
57
6.6k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
How to Ace a Technical Interview
jacobian
280
24k
Mobile First: as difficult as doing things right
swwweet
225
10k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Building Applications with DynamoDB
mza
96
6.7k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
310
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Site-Speed That Sticks
csswizardry
13
960
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を よろしくお願いします!