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

Eleventy で SSG

tiwu
September 30, 2020
Technology
2
650

Eleventy で SSG

Eleventy で SSG

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

tiwu

September 30, 2020
Tweet

More Decks by tiwu

See All by tiwu
Eleventy - 11ty
tiwu_dev
0
130
Install for PWA
tiwu_dev
0
1.2k
App Shortcuts
tiwu_dev
0
850
Web Vitals
tiwu_dev
0
64
Web Share API
tiwu_dev
0
1.2k
Badge in Background
tiwu_dev
0
54
PWAとCache API #frontkansai
tiwu_dev
5
2k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.4k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
620

Other Decks in Technology

See All in Technology
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
780
Road to Go Gem #rubykaigi
sue445
0
930
4/16/25 - SFJug - Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
2
120
Oracle Cloud Infrastructure：2025年4月度サービス・アップデート
oracle4engineer
PRO
0
110
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
QA/SDETの現在と、これからの挑戦
imtnd
0
140
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.6k
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.2k
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
470
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
250
Dynamic Reteaming And Self Organization
miholovesq
3
630
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
120

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
530
How STYLIGHT went responsive
nonsquared
99
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
The World Runs on Bad Software
bkeepers
PRO
67
11k
GraphQLとの向き合い方2022年版
quramy
46
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Adopting Sorbet at Scale
ufuk
76
9.3k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
40
7.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
740
The Cult of Friendly URLs
andyhume
78
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670

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