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

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

NExT-Season
November 20, 2019

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

NExT-Season

November 20, 2019
Tweet

More Decks by NExT-Season

Other Decks in Technology

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