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

Eleventy で SSG

tiwu
September 30, 2020
Technology
2
610

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
120
Install for PWA
tiwu_dev
0
1.1k
App Shortcuts
tiwu_dev
0
800
Web Vitals
tiwu_dev
0
60
Web Share API
tiwu_dev
0
1.1k
Badge in Background
tiwu_dev
0
50
PWAとCache API #frontkansai
tiwu_dev
5
1.8k
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
これまでの計測・開発・デプロイ方法全部見せます！ / Findy ISUCON 2024-11-14
tohutohu
3
370
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.7k
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
700
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
880
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
260

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Bash Introduction
62gerente
608
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Typedesign – Prime Four
hannesfritz
40
2.4k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
We Have a Design System, Now What?
morganepeng
50
7.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840

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