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

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
710
2

Eleventy で SSG

Eleventy で SSG

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

Avatar for tiwu

tiwu

September 30, 2020

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.6k
App Shortcuts
Avatar for tiwu tiwu_dev
0
940
Web Vitals
Avatar for tiwu tiwu_dev
0
83
Web Share API
Avatar for tiwu tiwu_dev
0
1.6k
Badge in Background
Avatar for tiwu tiwu_dev
0
100
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.4k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.7k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
680

Other Decks in Technology

See All in Technology
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.8k
さきさん文庫の書籍ができるまで
Avatar for H.Saki sakiengineer
0
370
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
210
Cloud Run のアップデート 触ってみる＆紹介
Avatar for Gre212 gre212
0
310
サイバーセキュリティ概論 / Introduction to Cybersecurity
Avatar for Kenji Saito ks91
PRO
0
150
Unlocking the Apps
Avatar for Tim Perry pimterry
0
230
タクシーアプリ『GO』の実践的データ活用
Avatar for GO Inc. dev mot_techtalk
2
150
GoとSIMDとWasmの今。
Avatar for asuka askua
3
510
新アーキテクチャ「TiDB X」解説とDedicated比較 TiDB Cloud Premiumのゲーム運用活用を検証
Avatar for altplus Inc. staffrecruiter
0
110
ポケモンの型をTypeScriptの型システムで表現してみた
Avatar for subroh_0508 subroh0508
0
330
Agentic Web
Avatar for dynamis dynamis
1
130
はじめてのDatadog
Avatar for KairiM kairim0
0
280

Featured

See All Featured
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
320
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
140
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Done Done
Avatar for chrislema chrislema
186
16k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
820
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
290

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