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ɹ : )