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

Eleventy で SSG

tiwu
September 30, 2020
Technology
2
620

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
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

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