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
880
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
66
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
640

Other Decks in Technology

See All in Technology
KiCadでPad on Viaの基板作ってみた
Avatar for misoji engineer iotengineer22
0
290
Glacierだからってコストあきらめてない？ / JAWS Meet Glacier Cost
Avatar for sasaki taishin
1
150
Tech-Verse 2025 Keynote
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
1.8k
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
160
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for danielconkling870 lufthanahelpsupport
0
130
20250707-AI活用の個人差を埋めるチームづくり
Avatar for shnjtk shnjtk
4
3.6k
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
3
960
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
1
15k
Lambda Web Adapterについて自分なりに理解してみた
Avatar for Makky12 smt7174
6
160
Core Audio tapを使ったリアルタイム音声処理のお話
Avatar for Sloth yuta0306
0
180
赤煉瓦倉庫勉強会｢Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記｣
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
2
330
Lazy application authentication with Tailscale
Avatar for Elliot Blackburn bluehatbrit
0
170

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Visualization
Avatar for Eitan Lees eitanlees
146
16k

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