爆速サイトを爆速で作れる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/
രαΠτΛരͰ࡞ΕΔNetlify + Gatsby2018.04.24 Roppongi.js #2 - @mottox2
View Slide
Freelance web engineer in Roppongi@mottox2
#roppongijs͜Μͳͷ࡞ͬͨ1. Webhook2. Pull3. Build & Deployhttp://gatsby-starter-esa.netlify.com/υΩϡϝϯτ͕ߋ৽͞ΕͨΒ੩తαΠτ͕ ు͖ग़͞ΕΔͭɻʢॴཁ࣌ؒ: 4 ࣌ؒʣ
#roppongijsͦΕΑΓݟͯ͘Εʂ͍ͧʂ
#roppongijsesa.io• υΩϡϝϯτڞ༗αʔϏε e.g. Qiita:Team, Kibela• WebhookWeb API͕༻ҙ͞Ε͍ͯΔ• ҰਓͰͬͯΔhttps://esa.io/
#roppongijsNetlify• ੩తαΠτͷϗεςΟϯάαʔϏεɻhttps://netlify.com
#roppongijs• ੩తαΠτͷϗεςΟϯάαʔϏεɻ• Githubʹcommit͢Δ͚ͩͰDeploy• POSTϦΫΤετͰDeploy(Build hook)• ࣗͰαʔόʔͷ໘ݟͳͯ͘Α͍Netlify
#roppongijsGatsby• ΊͬͪΌߴͳ੩తαΠτδΣωϨʔλʔhttps://www.gatsbyjs.org/
#roppongijs• ΊͬͪΌߴͳ੩తαΠτδΣωϨʔλʔ• reactjs.orgGatsby• JS͚ͩͰ݁͢Δ• Preload, Inline CSS, React SPA͕σϑΥϧτͰಈ͘ͷͰΊͬͪΌ͍ʢᐌ͘ɺBlazing-fastʣGatsby
How Gatsby works
#roppongijsStaticFileੜ·ͰͷΠϝʔδ
#roppongijsSource• source-pluginΛೖΕGraphQLΛͬͯݺͼग़͢• WordPress, Markdown, ͦͷଞWeb API…• esa.ioͷpluginͳ͔ͬͨͷͰࣗ࡞ͨ͠• https://github.com/mottox2/gatsby-source-esa
#roppongijsView• ReactͰ࡞ΕΔɻ• GraphQLͰSourceͷ ݺͼग़͠
#roppongijsBuild• ߴԽΛૂͬͨϑΝΠϧ ׂ• Ϗϧυૣ͘ͳ͍ɻ• ࣗલͰ༻ҙ͠Α͏ͱ ࢥ͑ͳ͍ͷͰ࠷ߴ
#roppongijsPublish• Github PageNetlifyͳͲʹσϓϩΠ͍ͯ͠Δྫ͕ଟ͍• ͦΕ΄Ͳ͍͜͠ͱΛ͍ͯ͠ͳ͍ͷʹߴͳαΠτ͕࡞ΕΔɻ
In Real World
#roppongijsWordpressͷϑϩϯτͰ͍͍ͨ• WordPressͷϑϩϯτΤϯυΛ͍ͨ͠ؾ͕࣋ͪڧ͍ɻ• ͨͩߋ৽ͷʹϏϧυ͕ඞཁʹͳΔͷͰߋ৽සͷߴ͍αΠτʹ͔ͳ͍• ·ͨɺDataSource͕ڊେʹͳΔ΄ͲϏϧυ͕͘ͳ͍ͬͯ͘ɻ
#roppongijsݸਓͰ͏ͷGood Choice• ʮߋ৽ස͕ߴ͘ͳ͍ɺهࣄͦΕ΄Ͳʯͱ͍͏αΠτʹ͍͍ͯΔɻ• ϙʔτϑΥϦΦɾݸਓϒϩάɾυΩϡϝϯςʔγϣϯͳͲʹ૬ੑ͕Α͍ɻ• ࡞Δ͚ͩͳΒςϯϓϨʔτ͕స͕ͬͯΔͷͰ30͋Εެ։·Ͱग़དྷ·͢ɻ
Thanks