Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
2
660

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.3k
App Shortcuts
Avatar for tiwu tiwu_dev
0
870
Web Vitals
Avatar for tiwu tiwu_dev
0
71
Web Share API
Avatar for tiwu tiwu_dev
0
1.3k
Badge in Background
Avatar for tiwu tiwu_dev
0
65
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.4k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
640

Other Decks in Technology

See All in Technology
rubygem開発で鍛える設計力
Avatar for Tomohiro Hashidate joker1007
1
150
“社内”だけで完結していた私が、AWS Community Builder になるまで
Avatar for nagisa_53 nagisa53
1
260
菸酒生在 LINE Taiwan 的後端雙刀流
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
～宇宙最速～ 2025年AWS Summit レポート
Avatar for sleepingsato satodesu
1
1.6k
Agentic Workflowという選択肢を考える
Avatar for takuya kikuchi tkikuchi1002
1
430
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
1.4k
20250623 Findy Lunch LT Brown
Avatar for Brown 3150
0
820
エンジニア向け技術スタック情報
Avatar for 株式会社カウシェ kauche
1
120
TechLION vol.41～MySQLユーザ会のほうから来ました / techlion41_mysql
Avatar for sakaik sakaik
0
160
Observability в PHP без боли. Олег Мифле, тимлид Altenar
Avatar for Lamoda Tech lamodatech
0
310
白金鉱業Meetup_Vol.19_PoCはデモで語れ！顧客の本音とインサイトを引き出すソリューション構築​
Avatar for BrainPad brainpadpr
2
500

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k

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. ご清聴ありがとうございました