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
600
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
1k
App Shortcuts
tiwu_dev
0
790
Web Vitals
tiwu_dev
0
60
Web Share API
tiwu_dev
0
1k
Badge in Background
tiwu_dev
0
48
PWAとCache API #frontkansai
tiwu_dev
5
1.8k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.1k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
590
Other Decks in Technology
See All in Technology
プロダクト価値を考えるための情報透明化とチーム文化づくり
nyo_taro
1
150
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
470
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
270
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
530
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
330
KubeVirt Networking ONIC 2024
orimanabu
4
610
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
450
CData Virtuality を活かせるキーシナリオと製品デモ
cdataj
0
230
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
2
2k
業務ヒアリングと知識の呪い
tamai_63
0
290
Graph Database と Generative AI の素敵な関係
oracle4engineer
PRO
6
580
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
240
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
87
5.6k
Designing the Hi-DPI Web
ddemaree
280
34k
Building Applications with DynamoDB
mza
90
6k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Debugging Ruby Performance
tmm1
73
12k
GraphQLとの向き合い方2022年版
quramy
43
13k
Teambox: Starting and Learning
jrom
132
8.7k
The World Runs on Bad Software
bkeepers
PRO
65
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
We Have a Design System, Now What?
morganepeng
49
7.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 にレンダリングを任せている 感想
ご清聴ありがとうございました