Eleventy で SSG

Eleventy で SSG

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

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