Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A47976008466e012dc67e7cdd0e1316f?s=47 NExT-Season
November 20, 2019

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

A47976008466e012dc67e7cdd0e1316f?s=128

NExT-Season

November 20, 2019
Tweet

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. #SVTI6( "EPCF9%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ɹ : )