$30 off During Our Annual Pro Sale. View Details »

Eleventy で SSG

Avatar for tiwu tiwu
September 30, 2020
Technology
2
680

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.4k
App Shortcuts
Avatar for tiwu tiwu_dev
0
910
Web Vitals
Avatar for tiwu tiwu_dev
0
73
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
77
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.2k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.5k
Service Worker Life Cycle “Install” #pwanight
Avatar for tiwu tiwu_dev
0
650

Other Decks in Technology

See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
21k
生成AI・AIエージェント時代、データサイエンティストは何をする人なのか？そして、今学生であるあなたは何を学ぶべきか？
Avatar for kuri8ive kuri8ive
2
1.8k
DGX SparkでローカルLLMをLangChainで動かした話
Avatar for Hirokatsu Endo ruzia
1
260
モバイルゲーム開発におけるエージェント技術活用への試行錯誤 ～開発効率化へのアプローチの紹介と未来に向けた展望～
Avatar for QualiArts qualiarts
0
290
なぜフロントエンド技術を追うのか？なぜカンファレンスに参加するのか？
Avatar for sakito sakito
9
2k
pmconf2025 - 他社事例を"自社仕様化"する技術_iRAFT法
Avatar for yamachi｜@yamapiya_ daichi_yamashita
0
520
たかが特別な時間の終わり / It's Only the End of Special Time
Avatar for watany watany
5
1k
私のRails開発環境
Avatar for Yasuo Honda yahonda
0
180
Agents IA : la nouvelle frontière des LLMs (Tech.Rocks Summit 2025)
Avatar for Guillaume Laforge glaforge
0
380
Ryzen NPUにおけるAI Engineプログラミング
Avatar for Jun Ando anjn
0
220
MS Ignite 2025で発表されたFoundry IQをRecap
Avatar for Akira Sato satodayo
3
230
Bakuraku Engineering Team Deck
Avatar for LayerX layerx
PRO
11
5.7k

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
It's Worth the Effort
Avatar for 3n 3n
187
29k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.1k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k

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