爆速サイトを爆速で作れる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/

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