Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
2
680

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.4k
App Shortcuts
Avatar for tiwu tiwu_dev
0
910
Web Vitals
Avatar for tiwu tiwu_dev
0
75
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
79
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.2k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.5k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
650

Other Decks in Technology

See All in Technology
乗りこなせAI駆動開発の波
Avatar for Ikko Eltociear Ashimine eltociear
1
990
生成AIでテスト設計はどこまでできる？ 「テスト粒度」を操るテーラリング術
Avatar for ks shota_kusaba
0
450
生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
0
210
新 Security HubがついにGA！仕組みや料金を深堀り #AWSreInvent #regrowth / AWS Security Hub Advanced GA
Avatar for MasahiroKawahara masahirokawahara
1
1.4k
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
Avatar for suto sutotakeshi
0
410
Reinforcement Fine-tuning 基礎〜実践まで
Avatar for Morita ch6noota
0
150
Sansanが実践する Platform EngineeringとSREの協創
Avatar for SansanTech sansantech
PRO
2
630
Agentic AI Patterns and Anti-Patterns
Avatar for Guillaume Laforge glaforge
1
200
A Compass of Thought: Guiding the Future of Test Automation ( #jassttokai25 , #jassttokai )
Avatar for teyamagu teyamagu
PRO
1
240
pmconf2025 - 他社事例を"自社仕様化"する技術_iRAFT法
Avatar for yamachi｜@yamapiya_ daichi_yamashita
0
780
形式手法特論：CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
Avatar for y_taka_23 ytaka23
2
440
AI活用によるPRレビュー改善の歩み ― 社内全体に広がる学びと実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
180

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
990
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k

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