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

Eleventy で SSG

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for tiwu tiwu
September 30, 2020
Technology
700
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.5k
App Shortcuts
Avatar for tiwu tiwu_dev
0
940
Web Vitals
Avatar for tiwu tiwu_dev
0
82
Web Share API
Avatar for tiwu tiwu_dev
0
1.5k
Badge in Background
Avatar for tiwu tiwu_dev
0
100
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.3k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.6k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
670

Other Decks in Technology

See All in Technology
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
6
18k
Snowflake Intelligence導入で 分かった活用のコツ
Avatar for wonohe wonohe
0
120
システムは「動く」だけでは足りない 実装編 - 非機能要件・分散システム・トレードオフをコードで見る
Avatar for nwiizo nwiizo
4
410
職能の壁を取り払った先で見えた壁 -AI時代のクロスファンクショナル組織-
Avatar for Yutaro Shimoda shimotaroo
1
120
20260423_執筆の工夫と裏側 技術書の企画から刊行まで / From the planning to the publication of technical book
Avatar for nash_efp nash_efp
1
360
AWS Agent Registry の基礎・概要を理解する/aws-agent-registry-intro
Avatar for Renya Kujirada ren8k
2
350
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.6k
レビューしきれない？それは「全て人力でのレビュー」だからではないでしょうか
Avatar for amixedcolor amixedcolor
0
290
猫でもわかるKiro CLI(CDKコーディング編)
Avatar for Hiroo Katoh kentapapa
1
130
新メンバーのために、シニアエンジニアが環境を作る時代
Avatar for puku0x puku0x
0
1.1k
"SQLは書けません"から始まる データドリブン
Avatar for kubell kubell_hr
2
470
社内エンジニア勉強会の醍醐味と苦しみ/tamadev
Avatar for Ichiro Nishiuma nishiuma
0
130

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
290
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
330
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
210
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
54k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
110
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340

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