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
Eleventy で SSG
Search
tiwu
September 30, 2020
Technology
2
620
Eleventy で SSG
Eleventy で SSG
Frontend Conference Fukuoka スピンオフ ~福岡人大集合の会~
tiwu
September 30, 2020
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.1k
App Shortcuts
tiwu_dev
0
810
Web Vitals
tiwu_dev
0
60
Web Share API
tiwu_dev
0
1.1k
Badge in Background
tiwu_dev
0
51
PWAとCache API #frontkansai
tiwu_dev
5
1.9k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.2k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
600
Other Decks in Technology
See All in Technology
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
180
podman_update_2024-12
orimanabu
1
290
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
280
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
270
[Oracle TechNight#85] Oracle Autonomous Databaseを使ったAI活用入門
oracle4engineer
PRO
1
120
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
210
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
120
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
150
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
290
最近のSfM手法まとめ - COLMAP / GLOMAPを中心に -
kwchrk
3
350
多様なメトリックとシステムの健全性維持
masaaki_k
0
120
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Faster Mobile Websites
deanohume
305
30k
How GitHub (no longer) Works
holman
311
140k
The Cost Of JavaScript in 2023
addyosmani
46
7k
We Have a Design System, Now What?
morganepeng
51
7.3k
Designing for humans not robots
tammielis
250
25k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Transcript
Eleventy で SSG Wataru Taguchi
アジェンダ - 自己紹介 - Frontend Conference Fukuoka - SSR と
SSG - Eleventy - Eleventy - webpack - Eleventy - generate from data - 感想
# Wataru Taguchi - GameWith Engineer - PWA, Web Components
- twitter@tiwu_dev - FF14 - ストV - Kyoto Animation 自己紹介
Frontend Conference Fukuoka
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 ...
- シンプル - 色々なテンプレートエンジンが使える - *.html, *.md, *.liquid, *.njk, *.hbs,
*.mustache *.ejs, *.haml, *.pug - 好きなクライアントサイドの JavaScript が使える - e.g. Vue.js, React.js, jQuery ... - データによる生成 - web.dev が利用している Eleventy
Example - generate
Example - generated HTML File
webpack が生成したハッシュ付き JS を読み込む 下記2つを利用して自作する必要がある - webpack-manifest-plugin - Eleventy Shortcodes
Eleventy - webpack
Eleventy - manifest.json
Eleventy - .eleventy.js
Eleventy - default.njk
Eleventy - generated HTML File
データを元にHTMLを生成 Eleventy の下記2つの機能を利用する - Eleventy pagination - Eleventy permalink Eleventy
- generate from data
Eleventy - Data
Eleventy - show.njk
Eleventy - default.njk
Eleventy - ja/frame/ryu.html
キャラクター分HTMLが生成される Eleventy - generated
- Eleventy でキャラ40体分の個別ページをSSRからSSGに 変更してみたが基本簡単だった - クライアントサイドのレンダリングは別のフレームワー クなどに任せられるので良い - Eleventy で
<head> 内の情報のみレンダリングさせてい る - <body> 内は web components にレンダリングを任せている 感想
ご清聴ありがとうございました