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

Eleventy で SSG

tiwu
September 30, 2020
Technology
2
560

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
110
Install for PWA
tiwu_dev
0
900
App Shortcuts
tiwu_dev
0
740
Web Vitals
tiwu_dev
0
57
Web Share API
tiwu_dev
0
900
Badge in Background
tiwu_dev
0
43
PWAとCache API #frontkansai
tiwu_dev
5
1.6k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
560

Other Decks in Technology

See All in Technology
リテール金融（キャッシュレス・ネット銀行・ネット証券）の競争環境と経済圏
8maki
0
1.2k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
3
850
Azureの基本的な権限管理の勉強会
yhana
0
590
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
Building a RAG-powered AI chat app with Python and VS Code
pamelafox
0
100
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
370
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
生成AIの変革の時代に、 直近1年で直面した課題とその解決策
ktc_wada
0
310
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
230
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
340

Featured

See All Featured
What the flash - Photography Introduction
edds
64
11k
4 Signs Your Business is Dying
shpigford
175
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Facilitating Awesome Meetings
lara
42
5.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
How to train your dragon (web standard)
notwaldorf
73
5.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Product Roadmaps are Hard
iamctodd
44
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k

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