Shifter Meetup West #3 スタティックサイトジェネレーターについて勉強する会

Transcript

1. ελςΟοΫαΠτδΣωϨʔλʔ ʹ͍ͭͯษڧ͢Δձ Shifter Meetup West #3
 2019.11.20
2. Steps Who am I
3. Atsushi Ando
 ͋ΜͲ͏͋ͭ͠ DTP/web Design Engineer ArtDirector /Photograph twitter : @Next_Season github : AtsushiA web : next-season.net Solutions Architect - Associate
4. Recent works Keynote MODX Concrete5 WordPress AWS XD Photography PhotoShop/Lightroom Illustrator
5. #SVTI
   6(
   "EPCF
   9%
   6(
   ,PCF
 +"846(
   ,PCF
   
   $.4େࡕՆࡇΓ
   .0%9ͷ೔
   DPODSFUFΤόϯδΣϦετ Kobe Community
 &etc…
6. Let’s Shifter
7. https://next-season.net/cms/wordpress/1965/ Check લճ : #2 ͜Ε͔ΒͷShifter ࣮ફϚΠάϨʔγϣϯʂ
8. ҧ͏
9. Topics 1.What’s Static Site Generator 2.What’s JAM Stack 3.ͦΕɺ͓͍͍͠ͷʁ
10. Topics • Gatsby (Template : React | License : MIT) • Hexo (Template : EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko | License : MIT) • Jekyll (Template :Liquid | License : MIT) • Gridsome (Template :Vue | License : MIT) What’s Static Site Generator https://www.staticgen.com/
11. Topics React GrapgQL What’s Static Site Generator Gatsbyjs
12. Topics 1.Client-Side Java Script 2.APIs (Application programming interface) 3.Markup https://jamstack.org/
13. Topics Before JAMStack [ex : LAMP] DB php httpαʔόʔ WebϖʔδΛݟ͍ͨ html΍ը૾ αʔόଆͰੜ੒ͨ͠ HTMLΛऔಘͯ͠දࣔ
14. Topics Before JAMStack [ex : WP] PHP Core Theme Plugin
15. Topics Before JAMStack [ex : WP]
16. Topics Before JAMStack [ex : WP]
17. Topics Before JAMStack [ex : WP]
18. Static Site Generator Topics After JAMStack αʔό͔Βऔಘͨ͠JSΛݩʹ σʔλΛऔಘ͠ΫϥΠΞϯτ Ͱhtmlੜ੒ͯ͠දࣔ Static Files (html / js /css) DataSources Files / APIs
19. Static Site Generator Topics After JAMStack WebϖʔδΛݟ͍ͨ html/JSΛऔಘ αʔό͔Βऔಘͨ͠JSΛݩʹ σʔλΛऔಘ͠ΫϥΠΞϯτ Ͱhtmlੜ੒ͯ͠දࣔ Static Files (html / js /css) DataSources Files / APIs
20. Topics 1.αʔόʹґଘ͠ͳ͍ίʔυʹΑΓCDNʹ ΑΔεέʔϧ͕༰қ 2.࠶ར༻ՄೳͳAPI 3.σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ ͦΕ͓͍͍͠ͷʁ
21. Topics CDNʹΑΔεέʔϧ͕༰қ
22. Topics ࠶ར༻ՄೳͳAPI
23. Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource
24. Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource
25. Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource
26. Why Shifter
27. Why Shifter
28. Why Shifter αʔόͷ
 ͓कΓෆཁʂ
29. Let's start hands-on!
30. Overview શମͷྲྀΕ 1.ShifterΛWebhookରԠϓϥϯ(Tier 2Ҏ্)ʹมߋ͢Δ 2. NetlifyσϓϩΠ༻ͷςϯϓϨʔτΛΠϯϙʔτ͢Δ 3. NetlifyʹαΠτΛ࡞੒͢Δ 4.ShifterαΠτ͔ΒWebhookͰσϓϩΠ͢Δ https://github.com/getshifter/workshop/ https://www.digitalcube.jp/shifter/4434/
31. Check.1 ΞΧ΢ϯτͷ֬ೝ • ShifterΞΧ΢ϯτ͕͋Δ • GitHubΞΧ΢ϯτ͕͋Δ • NetlifyΞΧ΢ϯτ͕͋Δ https://github.com/getshifter/workshop/blob/master/step-by-step/netlify/README.md
32. Check.2 WPαΠτͷ֬ೝ •̍ͭҎ্ͷ౤ߘ͕ެ։͞Ε͍ͯΔ •̍ͭҎ্ͷݻఆϖʔδ͕ެ։͞Ε͍ͯΔ •̍ͭҎ্ͷλά͕ઃఆ͞Ε͍ͯΔ •̍ͭҎ্ͷΧςΰϦʔ͕ઃఆ͞Ε͍ͯΔ •ύʔϚϦϯΫʹ೔ຊޠؚ͕·Ε͍ͯͳ͍ https://github.com/getshifter/workshop/blob/master/step-by-step/gatsby/step1.md
33. Finish!! Have a fan Shifter Life!
34. Thank youɹ : )
35. Thank youɹ : )