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
#エンジニアBooks 30分でわかる
「技術記事を書く技術」 / engineer-books 2026-06-30
Avatar for Junichi Ito jnchito
1
170
AWS Summit 2026で見えたSIerにとっての Amazon Quickの位置づけ
Avatar for まふりる maf_0521
0
150
RAGの精度向上とエージェント活用
Avatar for KintoTech_Dev kintotechdev
2
120
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
LiDAR SLAMの実装とセンサ融合 ~Lie群からContinuous-Time LIOまで~
Avatar for Naoki Akai naokiakai
1
840
Kotlin 開発のツラミを爆破した話！ / Explode the difficulty of Kotlin dev!
Avatar for Kengo TODA eller86
0
130
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
240
Multi-Agent並列開発を 安全に回すための技術 / Technology for Safely Multi-Agent Parallel Development
Avatar for philomagi tooppoo
0
250
記録をかんたんに、提案をパーソナルに ── AIであすけんが目指すもの
Avatar for oprst oprstchn
0
110
勉強会企画をアプリで構造化してみた 〜そこで見えた、AIとの付き合い方〜 / I've structured a study group plan using an app.
Avatar for Pauli pauli
0
280
5分でわかるDuckDB Quack
Avatar for chanyou0311 chanyou0311
4
300
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
330

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
270
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
220
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
200
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
500
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
430

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