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

Other Decks in Technology

See All in Technology
Docker Desktop不要の時代が来る？ WSL標準の「wslc」で Linuxコンテナを動かしてみた.
Avatar for ueponx ueponx
0
510
AI Agentをシステムに組み込む前にゆるく向き合ってみる
Avatar for hayama hayama17
0
190
フルAIで個人開発して学んだあれこれ / yuruai vol.1
Avatar for Isao Shimizu isaoshimizu
0
170
秘密度ラベル初心者が第1歩でつまづかないための「設計・運用」ポイント
Avatar for seafay seafay
PRO
1
560
“ID沼入口” - 基本とセキュリティから始める、考え続けるためのID管理技術勉強会 告知&イントロ
Avatar for ritou ritou
0
370
ご挨拶「10周年を迎える共創ラボのこれまでとこれから」
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
170
GitHub Copilot運用のリアル ～AI Credit時代にどう向き合うか～
Avatar for takafumi suzuki takafumisu2uk1
0
600
時期が悪い！それでもRaspberry Piを買って遊んで活用するには / 20260627-osc26do-rpi-jikigawarui
Avatar for Akira Ouchi akkiesoft
1
960
5分でわかるDuckDB Quack
Avatar for chanyou0311 chanyou0311
4
300
AIエージェントとPhysical AIが拓く製造業の変革（ハノーバーメッセリキャップ）
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
200
MySQL & MySQL HeatWave Report - June 2026
Avatar for Olivier DASINI freshdaz
0
280
ループエンジニアリングでE2Eテストを実践
Avatar for Noriyuki TAKEI noriyukitakei
0
150

Featured

See All Featured
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
260
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
880
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
2
280
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
430
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k

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