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

by mottox2

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Freelance web engineer in Roppongi @mottox2

Slide 3

Slide 3 text

#roppongijs ͜Μͳ΋ͷ࡞ͬͨ 1. Webhook 2. Pull 3. Build & Deploy http://gatsby-starter-esa.netlify.com/ υΩϡϝϯτ͕ߋ৽͞ΕͨΒ੩తαΠτ͕  ు͖ग़͞ΕΔ΍ͭɻʢॴཁ࣌ؒ: 4 ࣌ؒʣ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

How Gatsby works

Slide 11

Slide 11 text

#roppongijs StaticFileੜ੒·ͰͷΠϝʔδ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

#roppongijs View • ReactͰ࡞ΕΔɻ • GraphQLͰSourceͷ  ݺͼग़͠

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

In Real World

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Thanks