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

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
2
670

Eleventy で SSG

Eleventy で SSG

Frontend Conference Fukuoka スピンオフ ～福岡人大集合の会～

Avatar for tiwu

tiwu

September 30, 2020
Tweet

More Decks by tiwu

See All by tiwu
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.3k
App Shortcuts
Avatar for tiwu tiwu_dev
0
890
Web Vitals
Avatar for tiwu tiwu_dev
0
71
Web Share API
Avatar for tiwu tiwu_dev
0
1.3k
Badge in Background
Avatar for tiwu tiwu_dev
0
69
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.4k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
650

Other Decks in Technology

See All in Technology
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
Avatar for AEON aeonpeople
2
300
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
Avatar for Takuya MINAGAWA takmin
0
430
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
Avatar for ZOZO Developers zozotech
PRO
18
5.4k
株式会社ARAV 採用案内
Avatar for ARAV maqui
0
350
浸透しなさいRFC 5322&7208
Avatar for Nonogaki Hiroshi hinono
0
120
Oracle Base Database Service：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
20k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
Avatar for Yuji Yamaguchi yug1224
9
2.8k
Understanding Go GC #coefl_go_jp
Avatar for 弁護士ドットコム bengo4com
0
1.1k
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
Avatar for oracle4engineer oracle4engineer
PRO
2
150
広島銀行におけるAWS活用の取り組みについて
Avatar for Masaki Mori[JAWS-UG広島] masakimori
0
140
我々は雰囲気で仕事をしている / How can we do vibe coding as well
Avatar for Naomi Yamasaki naospon
2
220
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
Avatar for Yuki Anzai yanzm
0
190

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
780
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k

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