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
68
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
Claude Codeは仕様駆動の夢を見ない
Avatar for Gota gotalab555
18
4.6k
LLMでAI-OCR、実際どうなの？ / llm_ai_ocr_layerx_bet_ai_day_lt
Avatar for sbrf248 sbrf248
0
430
LLMで構造化出力の成功率をグンと上げる方法
Avatar for Keisuke Takiguchi keisuketakiguchi
0
500
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
Avatar for nanachi nanachi
1
550
風が吹けばWHOISが使えなくなる～なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか～
Avatar for Yasuhiro Orange Morishita / 森下泰宏 orangemorishita
15
5.5k
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
Avatar for Hiroka Zaitsu zaimy
3
200
마라톤 끝의 단거리 스퍼트: 2025년의 AI
Avatar for Jeongkyu Shin inureyes
PRO
1
690
Lambda management with ecspresso and Terraform
Avatar for Michael H. Oshita ijin
2
150
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
Avatar for いのうえ senseofunity129
0
110
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
Avatar for puku0x puku0x
0
350
【CEDEC2025】現場を理解して実現！ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
Avatar for Cygames cygames
PRO
0
720
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ！～ 豊富な素材出力と制作フローの改善を実現するツールについて～
Avatar for Cygames cygames
PRO
0
230

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
2.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
Done Done
Avatar for chrislema chrislema
185
16k
KATA
Avatar for Megan Lloyd mclloyd
31
14k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

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