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

Transcript

1. ελςΟοΫαΠτδΣωϨʔλʔ
   ʹ͍ͭͯษڧ͢Δձ
   Shifter Meetup West #3

   2019.11.20
   

   View Slide

2. Steps
   Who am I
   

   View Slide

3. Atsushi Ando

   ͋ΜͲ͏͋ͭ͠
   DTP/web Design
   Engineer
   ArtDirector /Photograph
   twitter : @Next_Season
   github : AtsushiA
   web : next-season.net
   Solutions Architect - Associate
   

   View Slide

4. Recent works
   Keynote
   MODX
   Concrete5
   WordPress
   AWS
   XD
   Photography
   PhotoShop/Lightroom
   Illustrator
   

   View Slide

5. #SVTI6(
   "EPCF9%6(,PCF

   +"846(,PCF
   $.4େࡕՆࡇΓ
   .0%9ͷ೔
   DPODSFUFΤόϯδΣϦετ
   Kobe
   Community

   &etc…
   

   View Slide

6. Let’s Shifter
   

   View Slide

7. https://next-season.net/cms/wordpress/1965/
   Check
   લճ : #2 ͜Ε͔ΒͷShifter ࣮ફϚΠάϨʔγϣϯʂ
   

   View Slide

8. ҧ͏
   

   View Slide

9. Topics
   1.What’s Static Site Generator
   2.What’s JAM Stack
   3.ͦΕɺ͓͍͍͠ͷʁ
   

   View Slide

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/
    

    View Slide

11. Topics
    React
    GrapgQL
    What’s Static Site Generator
    Gatsbyjs
    

    View Slide

12. Topics
    1.Client-Side Java Script
    2.APIs (Application programming interface)
    3.Markup
    https://jamstack.org/
    

    View Slide

13. Topics Before JAMStack [ex : LAMP]
    DB
    php
    httpαʔόʔ
    WebϖʔδΛݟ͍ͨ
    html΍ը૾
    αʔόଆͰੜ੒ͨ͠
    HTMLΛऔಘͯ͠දࣔ
    

    View Slide

14. Topics Before JAMStack [ex : WP]
    PHP
    Core
    Theme
    Plugin
    

    View Slide

15. Topics Before JAMStack [ex : WP]
    

    View Slide

16. Topics Before JAMStack [ex : WP]
    

    View Slide

17. Topics Before JAMStack [ex : WP]
    

    View Slide

18. Static Site Generator
    Topics After JAMStack
    αʔό͔Βऔಘͨ͠JSΛݩʹ
    σʔλΛऔಘ͠ΫϥΠΞϯτ
    Ͱhtmlੜ੒ͯ͠දࣔ
    Static Files (html / js /css)
    DataSources
    Files / APIs
    

    View Slide

19. Static Site Generator
    Topics After JAMStack
    WebϖʔδΛݟ͍ͨ
    html/JSΛऔಘ
    αʔό͔Βऔಘͨ͠JSΛݩʹ
    σʔλΛऔಘ͠ΫϥΠΞϯτ
    Ͱhtmlੜ੒ͯ͠දࣔ
    Static Files (html / js /css)
    DataSources
    Files / APIs
    

    View Slide

20. Topics
    1.αʔόʹґଘ͠ͳ͍ίʔυʹΑΓCDNʹ
    ΑΔεέʔϧ͕༰қ
    2.࠶ར༻ՄೳͳAPI
    3.σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ
    ͦΕ͓͍͍͠ͷʁ
    

    View Slide

21. Topics CDNʹΑΔεέʔϧ͕༰қ
    

    View Slide

22. Topics ࠶ར༻ՄೳͳAPI
    

    View Slide

23. Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ
    React
    GrapgQL
    DataSource
    

    View Slide

24. Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ
    React
    GrapgQL
    DataSource
    

    View Slide

25. Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ
    React
    GrapgQL
    DataSource
    

    View Slide

26. Why Shifter
    

    View Slide

27. Why Shifter
    

    View Slide

28. Why Shifter
    αʔόͷ

    ͓कΓෆཁʂ
    

    View Slide

29. Let's start hands-on!
    

    View Slide

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/
    

    View Slide

31. Check.1 ΞΧ΢ϯτͷ֬ೝ
    • ShifterΞΧ΢ϯτ͕͋Δ
    • GitHubΞΧ΢ϯτ͕͋Δ
    • NetlifyΞΧ΢ϯτ͕͋Δ
    https://github.com/getshifter/workshop/blob/master/step-by-step/netlify/README.md
    

    View Slide

32. Check.2 WPαΠτͷ֬ೝ
    •̍ͭҎ্ͷ౤ߘ͕ެ։͞Ε͍ͯΔ
    •̍ͭҎ্ͷݻఆϖʔδ͕ެ։͞Ε͍ͯΔ
    •̍ͭҎ্ͷλά͕ઃఆ͞Ε͍ͯΔ
    •̍ͭҎ্ͷΧςΰϦʔ͕ઃఆ͞Ε͍ͯΔ
    •ύʔϚϦϯΫʹ೔ຊޠؚ͕·Ε͍ͯͳ͍
    https://github.com/getshifter/workshop/blob/master/step-by-step/gatsby/step1.md
    

    View Slide

33. Finish!!
    Have a fan Shifter Life!
    

    View Slide

34. Thank youɹ
    : )
    

    View Slide

35. Thank youɹ
    : )
    

    View Slide