Tweet
Tweet

Slide 1

Slide 1 text

Gatsby + NetlifyͰ ϙʔτϑΥϦΦαΠτΛ ࡞ͬͨ࿩

Slide 2

Slide 2 text

ࣗݾ঺հ • ށా ઍ൏ (Toda Chihaya) • @starfish0206 • ϕΨίʔϙϨʔγϣϯ • PHP JavaScript Swift • Vue.js Elixir • झຯɹϙέϞϯ • ಛٕɹϙέϞϯ

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ • GatsbyΛ࢖ͬͯ؆୯ʹαΠτߏங • NetlifyΛ࢖ͬͯ؆୯ʹαΠτެ։

Slide 4

Slide 4 text

ࠓ೔࿩͞ͳ͍͜ͱ • ϙέϞϯ • ;Δ͞ͱೲ੫ • ΏΔΩϟϯ˚

Slide 5

Slide 5 text

΍͖ͬͯ • Ξ΢τϓοτΛ΍͍ͬͯ͜͏ • Qiitaͱ͔Mediumͱ͔όϥ͚ΔͷΊΜͲ͍ • ࣗ෼ͷϙʔτϑΥϦΦαΠτΛ࣋ͬͯΕ͹ղ ܾ

Slide 6

Slide 6 text

Ͳ͏΍ͬͯ࡞Δʁ

Slide 7

Slide 7 text

Gatsby • αΠτΛ࡞Δ͜ͱͰ͸ͳ͘ɺܧଓͯ͠Ξ΢τϓο τ͢Δ৔Λ࡞Δ͜ͱ͕໨త • Ξ΢τϓοτ͢Δ৔ͷӡ༻ʹίετΛ͔͚Δͷ͸ φϯηϯε • ੩తαΠτδΣωϨʔλ͕γϯϓϧͰӡ༻΋؆୯ • React੡ͷGatsbyΛ࠾༻

Slide 8

Slide 8 text

Netlify • ϦϙδτϦʹpushͨ͠ΒࣗಈతʹσϓϩΠ • Ϗϧυ࣌ʹ؀ڥม਺Λར༻Մೳ • ͓͔͚ۚͨ͘ͳ͍ • શͯͷ৚݅Λຬͨ͢NetlifyͰܾఆ

Slide 9

Slide 9 text

Gatsby

Slide 10

Slide 10 text

ॳظઃఆ • npm install -g gatsby-cli • GatsbyͷStarter͔Βɺࢀߟʹ͢ΔαϯϓϧαΠτ Λ୳͢ • gatsby new NEW_SITE_DIRECTORY_FOR_YOUR_SITE https://github.com/CREATER_NAME/ REPO_NAME.git

Slide 11

Slide 11 text

ॾʑमਖ਼ • σβΠϯ΍CSSΛ޷Έʹௐ੔ • αϯϓϧهࣄΛ࡟আ • og:image΍faviconɺdescriptionͳͲΛमਖ਼

Slide 12

Slide 12 text

هࣄΛॻ͘ • ϚʔΫμ΢ϯͰهࣄΛ࡞੒ • ҎԼͷΑ͏ͳλάΛϑΝΠϧͷઌ಄ʹ഑ஔ͢Δ͜ͱͰɺ GraphQLܦ༝ͰσʔλΛऔಘ͢Δ͜ͱ͕ՄೳʹͳΔ --- title: αϯϓϧλΠτϧ category: "Gatsby" cover: cover.png author: starfish --- •

Slide 13

Slide 13 text

Netlify

Slide 14

Slide 14 text

ॳظઃఆ • GitHubͱ࿈ܞͤͯ͞ɺը໘ϙνϙν͢Δ͚ͩ

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

·ͱΊ • GatsbyͷStarterΊͬͪΌศར • Netlify͸૝૾͍ͯͨ͠100ഒ؆୯ • ϚʔΫμ΢ϯͷ͓͔͛ͰɺهࣄΛॻ͘ϋʔυϧ͕Լ͕ͬͨ • ܧଓͯ͠Ξ΢τϓοτ͢Δͱ͍͏໨తʹదͨ͠બ୒ͩͬͨ • ৄࡉ͸ https://starfish719.netlify.com/ Λࢀর