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

爆速サイトを爆速で作れるNetlify + Gatsby / Create fast site with netlify and gatsby

mottox2
April 24, 2018

爆速サイトを爆速で作れるNetlify + Gatsby / Create fast site with netlify and gatsby

爆速サイトを爆速で作れるNetlify + Gatsby

作ったサイト: http://gatsby-starter-esa.netlify.com/
リポジトリ: https://github.com/mottox2/gatsby-starter-esa

Netlify: https://www.netlify.com/
Gatsby: https://www.gatsbyjs.org/

mottox2

April 24, 2018
Tweet

More Decks by mottox2

Other Decks in Programming

Transcript

  1. ര଎αΠτΛര଎Ͱ࡞ΕΔ
    Netlify + Gatsby
    2018.04.24 Roppongi.js #2 - @mottox2

    View Slide

  2. Freelance web engineer in Roppongi
    @mottox2

    View Slide

  3. #roppongijs
    ͜Μͳ΋ͷ࡞ͬͨ
    1. Webhook
    2. Pull
    3. Build & Deploy
    http://gatsby-starter-esa.netlify.com/
    υΩϡϝϯτ͕ߋ৽͞ΕͨΒ੩తαΠτ͕

    ు͖ग़͞ΕΔ΍ͭɻʢॴཁ࣌ؒ: 4 ࣌ؒʣ

    View Slide

  4. #roppongijs
    ͦΕΑΓݟͯ͘Εʂ଎͍ͧʂ

    View Slide

  5. #roppongijs
    esa.io
    • υΩϡϝϯτڞ༗αʔϏε

    e.g. Qiita:Team, Kibela
    • Webhook΍Web API͕༻ҙ͞Ε͍ͯΔ
    • ҰਓͰ࢖ͬͯΔ
    https://esa.io/

    View Slide

  6. #roppongijs
    Netlify
    • ੩తαΠτͷϗεςΟϯάαʔϏεɻ
    https://netlify.com

    View Slide

  7. #roppongijs
    • ੩తαΠτͷϗεςΟϯάαʔϏεɻ
    • Githubʹcommit͢Δ͚ͩͰDeploy
    • POSTϦΫΤετͰDeploy(Build hook)
    • ࣗ෼Ͱαʔόʔͷ໘౗ݟͳͯ͘Α͍
    Netlify

    View Slide

  8. #roppongijs
    Gatsby
    • ΊͬͪΌߴ଎ͳ੩తαΠτδΣωϨʔλʔ
    https://www.gatsbyjs.org/

    View Slide

  9. #roppongijs
    • ΊͬͪΌߴ଎ͳ੩తαΠτδΣωϨʔλʔ
    • reactjs.org΋Gatsby੡
    • JS͚ͩͰ׬݁͢Δ
    • Preload, Inline CSS, React SPA͕σϑΥϧτͰ
    ಈ͘ͷͰΊͬͪΌ଎͍ʢᐌ͘ɺBlazing-fastʣ
    Gatsby

    View Slide

  10. How Gatsby works

    View Slide

  11. #roppongijs
    StaticFileੜ੒·ͰͷΠϝʔδ

    View Slide

  12. #roppongijs
    Source
    • source-pluginΛೖΕGraphQLΛ࢖ͬͯݺͼग़͢
    • WordPress, Markdown, ͦͷଞWeb API…
    • esa.ioͷplugin͸ͳ͔ͬͨͷͰࣗ࡞ͨ͠
    • https://github.com/mottox2/gatsby-
    source-esa

    View Slide

  13. #roppongijs
    View
    • ReactͰ࡞ΕΔɻ
    • GraphQLͰSourceͷ

    ݺͼग़͠

    View Slide

  14. #roppongijs
    Build
    • ߴ଎ԽΛૂͬͨϑΝΠϧ

    ෼ׂ
    • Ϗϧυ͸ૣ͘ͳ͍ɻ
    • ࣗલͰ༻ҙ͠Α͏ͱ͸

    ࢥ͑ͳ͍ͷͰ࠷ߴ

    View Slide

  15. #roppongijs
    Publish
    • Github Page΍NetlifyͳͲʹσϓϩΠ͍ͯ͠Δ
    ྫ͕ଟ͍
    • ͦΕ΄Ͳ೉͍͜͠ͱΛ͍ͯ͠ͳ͍ͷʹߴ଎ͳ
    αΠτ͕࡞ΕΔɻ

    View Slide

  16. In Real World

    View Slide

  17. #roppongijs
    WordpressͷϑϩϯτͰ࢖͍͍ͨ
    • WordPressͷϑϩϯτΤϯυΛ෼཭͍ͨ͠ؾ
    ͕࣋ͪڧ͍ɻ
    • ͨͩߋ৽ͷ౓ʹϏϧυ͕ඞཁʹͳΔͷͰߋ৽
    ස౓ͷߴ͍αΠτʹ͸޲͔ͳ͍
    • ·ͨɺDataSource͕ڊେʹͳΔ΄ͲϏϧυ͕
    ஗͘ͳ͍ͬͯ͘ɻ

    View Slide

  18. #roppongijs
    ݸਓͰ࢖͏ͷ͸Good Choice
    • ʮߋ৽ස౓͕ߴ͘ͳ͍ɺهࣄ਺΋ͦΕ΄Ͳʯ
    ͱ͍͏αΠτʹ͸޲͍͍ͯΔɻ
    • ϙʔτϑΥϦΦɾݸਓϒϩάɾυΩϡϝϯςʔ
    γϣϯͳͲʹ૬ੑ͕Α͍ɻ
    • ࡞Δ͚ͩͳΒςϯϓϨʔτ͕స͕ͬͯΔͷͰ
    30෼͋Ε͹ެ։·Ͱग़དྷ·͢ɻ

    View Slide

  19. Thanks

    View Slide