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

Eleventy で SSG

tiwu
September 30, 2020
Technology
2
630

Eleventy で SSG

Eleventy で SSG

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

tiwu

September 30, 2020
Tweet

More Decks by tiwu

See All by tiwu
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.2k
App Shortcuts
tiwu_dev
0
820
Web Vitals
tiwu_dev
0
61
Web Share API
tiwu_dev
0
1.2k
Badge in Background
tiwu_dev
0
51
PWAとCache API #frontkansai
tiwu_dev
5
1.9k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.3k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
610

Other Decks in Technology

See All in Technology
論文紹介 ”Long-Context LLMs Meet RAG: Overcoming Challenges for Long Inputs in RAG” @GDG Tokyo
shukob
0
270
GitLab SelfManagedをCodePipelineのソースに設定する/SetGitLabSelfManagedtoCodePipeline
norihiroishiyama
1
120
MCP server を作って Claude Desktop アプリから kintone へアクセスすると楽しい
r3_yamauchi
PRO
1
120
20250125_Agent for Amazon Bedrock試してみた
riz3f7
2
110
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
110
[TechNight #86] Oracle GoldenGate - 23ai 最新情報＆プロジェクトからの学び
oracle4engineer
PRO
1
170
Redmineの意外と知らない便利機能 （Redmine 6.0対応版）
vividtone
0
190
Japan AWS Jr. Championsがお届けするre:Invent2024のハイライト ～ラスベガスで見てきた景色～
fukuchiiinu
0
1.1k
ハンズオンで学ぶ Databricks - Databricksにおけるデータエンジニアリング
taka_aki
1
2.1k
業務ツールをAIエージェントとつなぐ - Composio
knishioka
0
110
一人から始めたSREチーム3年の歩み - 求められるスキルの変化とチームのあり方 - / The three-year journey of the SRE team, which started all by myself
vtryo
7
5.7k
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
17
4k

Featured

See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Statistics for Hackers
jakevdp
797
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Making Projects Easy
brettharned
116
6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k

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