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