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

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
2
680

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
900
Web Vitals
Avatar for tiwu tiwu_dev
0
72
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
74
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
2025/10/27 JJUGナイトセミナー WildFlyとQuarkusの 始め方
Avatar for Satoshi Seto megascus
0
110
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
Avatar for sh_fk2 sh_fk2
1
1.2k
re:Inventに行くまでにやっておきたいこと
Avatar for nagisa_53 nagisa53
0
940
データエンジニアとして生存するために 〜界隈を盛り上げる「お祭り」が必要な理由〜 / data_summit_findy_Session_1
Avatar for Sansan R&D sansan_randd
1
680
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
Avatar for Yuuki Yamashita yama3133
2
220
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
46k
NOT A HOTEL SOFTWARE DECK (2025/11/04)
Avatar for NOT A HOTEL notahotel
0
900
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
420
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
Avatar for Yuji Oshima yuj1osm
0
590
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
830
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
Avatar for SansanTech sansantech
PRO
1
650
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
7
1.7k

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k

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