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

297a42b94a1bda236982ec1cd81089b6?s=47 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/

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

April 24, 2018
Tweet

Transcript

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

  2. Freelance web engineer in Roppongi @mottox2

  3. #roppongijs ͜Μͳ΋ͷ࡞ͬͨ 1. Webhook 2. Pull 3. Build & Deploy

    http://gatsby-starter-esa.netlify.com/ υΩϡϝϯτ͕ߋ৽͞ΕͨΒ੩తαΠτ͕
 ు͖ग़͞ΕΔ΍ͭɻʢॴཁ࣌ؒ: 4 ࣌ؒʣ
  4. #roppongijs ͦΕΑΓݟͯ͘Εʂ଎͍ͧʂ

  5. #roppongijs esa.io • υΩϡϝϯτڞ༗αʔϏε
 e.g. Qiita:Team, Kibela • Webhook΍Web API͕༻ҙ͞Ε͍ͯΔ

    • ҰਓͰ࢖ͬͯΔ https://esa.io/
  6. #roppongijs Netlify • ੩తαΠτͷϗεςΟϯάαʔϏεɻ https://netlify.com

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

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

  9. #roppongijs • ΊͬͪΌߴ଎ͳ੩తαΠτδΣωϨʔλʔ • reactjs.org΋Gatsby੡ • JS͚ͩͰ׬݁͢Δ • Preload, Inline

    CSS, React SPA͕σϑΥϧτͰ ಈ͘ͷͰΊͬͪΌ଎͍ʢᐌ͘ɺBlazing-fastʣ Gatsby
  10. How Gatsby works

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

  12. #roppongijs Source • source-pluginΛೖΕGraphQLΛ࢖ͬͯݺͼग़͢ • WordPress, Markdown, ͦͷଞWeb API… •

    esa.ioͷplugin͸ͳ͔ͬͨͷͰࣗ࡞ͨ͠ • https://github.com/mottox2/gatsby- source-esa
  13. #roppongijs View • ReactͰ࡞ΕΔɻ • GraphQLͰSourceͷ
 ݺͼग़͠

  14. #roppongijs Build • ߴ଎ԽΛૂͬͨϑΝΠϧ
 ෼ׂ • Ϗϧυ͸ૣ͘ͳ͍ɻ • ࣗલͰ༻ҙ͠Α͏ͱ͸
 ࢥ͑ͳ͍ͷͰ࠷ߴ

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

  16. In Real World

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

    ஗͘ͳ͍ͬͯ͘ɻ
  18. #roppongijs ݸਓͰ࢖͏ͷ͸Good Choice • ʮߋ৽ස౓͕ߴ͘ͳ͍ɺهࣄ਺΋ͦΕ΄Ͳʯ ͱ͍͏αΠτʹ͸޲͍͍ͯΔɻ • ϙʔτϑΥϦΦɾݸਓϒϩάɾυΩϡϝϯςʔ γϣϯͳͲʹ૬ੑ͕Α͍ɻ •

    ࡞Δ͚ͩͳΒςϯϓϨʔτ͕స͕ͬͯΔͷͰ 30෼͋Ε͹ެ։·Ͱग़དྷ·͢ɻ
  19. Thanks