Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
2
690

Eleventy で SSG

Eleventy で SSG

Frontend Conference Fukuoka スピンオフ ～福岡人大集合の会～

Avatar for tiwu

tiwu

September 30, 2020
Tweet

More Decks by tiwu

See All by tiwu
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.4k
App Shortcuts
Avatar for tiwu tiwu_dev
0
910
Web Vitals
Avatar for tiwu tiwu_dev
0
76
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
79
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.2k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.5k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
650

Other Decks in Technology

See All in Technology
Lambdaの常識はどう変わる？！re:Invent 2025 before after
Avatar for TomoyaIwata iwatatomoya
1
620
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
Avatar for Databricks Japan databricksjapan
1
210
1人1サービス開発しているチームでのClaudeCodeの使い方
Avatar for おーしろ noayaoshiro
1
300
IAMユーザーゼロの運用は果たして可能なのか
Avatar for Yuuki Yamashita yama3133
1
480
エンジニアとPMのドメイン知識の溝をなくす、 AIネイティブな開発プロセス
Avatar for Michiru Kato applism118
4
1.3k
JEDAI認定プログラム JEDAI Order 2026 エントリーのご案内 / JEDAI Order 2026 Entry
Avatar for Databricks Japan databricksjapan
0
140
30分であなたをOmniのファンにしてみせます～分析画面のクリック操作をそのままコード化できるAI-ReadyなBIツール～
Avatar for Sagara sagara
0
180
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
Avatar for 74th(Atsushi Morimoto) 74th
3
3.4k
打 造 A I 驅 動 的 G i t H u b ⾃ 動 化 ⼯ 作 流 程
Avatar for Bo-Yi Wu appleboy
0
360
AWS Security Agentの紹介/introducing-aws-security-agent
Avatar for tomoki10 tomoki10
0
310
文字列の並び順 / Unicode Collation
Avatar for とみたまさひろ tmtms
3
610
[デモです] NotebookLM で作ったスライドの例
Avatar for Takaaki Tanaka kongmingstrap
0
160

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
70k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
39k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k

Transcript

  1. Eleventy で SSG Wataru Taguchi

  2. アジェンダ - 自己紹介 - Frontend Conference Fukuoka - SSR と

    SSG - Eleventy - Eleventy - webpack - Eleventy - generate from data - 感想

  3. # Wataru Taguchi - GameWith Engineer - PWA, Web Components

    - twitter@tiwu_dev - FF14 - ストV - Kyoto Animation 自己紹介

  4. Frontend Conference Fukuoka

  5. SSR と SSG - Server Side Rendering - リクエストが来るたびにHTMLを生成する -

    e.g. Laravel, Express, WordPress ... - Static Site Generator - 予めデータを取得しHTMLを生成しておく - リクエストが来ると、生成済みのHTMLを返す - e.g. Gatsby, Next.js, Nuxt.js, Eleventy, Hugo ...

  6. - シンプル - 色々なテンプレートエンジンが使える - *.html, *.md, *.liquid, *.njk, *.hbs,

    *.mustache *.ejs, *.haml, *.pug - 好きなクライアントサイドの JavaScript が使える - e.g. Vue.js, React.js, jQuery ... - データによる生成 - web.dev が利用している Eleventy

  7. Example - generate

  8. Example - generated HTML File

  9. webpack が生成したハッシュ付き JS を読み込む 下記2つを利用して自作する必要がある - webpack-manifest-plugin - Eleventy Shortcodes

    Eleventy - webpack

  10. Eleventy - manifest.json

  11. Eleventy - .eleventy.js

  12. Eleventy - default.njk

  13. Eleventy - generated HTML File

  14. データを元にHTMLを生成 Eleventy の下記2つの機能を利用する - Eleventy pagination - Eleventy permalink Eleventy

    - generate from data

  15. Eleventy - Data

  16. Eleventy - show.njk

  17. Eleventy - default.njk

  18. Eleventy - ja/frame/ryu.html

  19. キャラクター分HTMLが生成される Eleventy - generated

  20. - Eleventy でキャラ40体分の個別ページをSSRからSSGに 変更してみたが基本簡単だった - クライアントサイドのレンダリングは別のフレームワー クなどに任せられるので良い - Eleventy で

    <head> 内の情報のみレンダリングさせてい る - <body> 内は web components にレンダリングを任せている 感想

  21. ご清聴ありがとうございました