Gatsby + Netlifyで ポートフォリオサイトを 作った話

Transcript

1. Gatsby + NetlifyͰ ϙʔτϑΥϦΦαΠτΛ ࡞ͬͨ࿩
2. ࣗݾ঺հ • ށా ઍ൏ (Toda Chihaya) • @starfish0206 • ϕΨίʔϙϨʔγϣϯ • PHP JavaScript Swift • Vue.js Elixir • झຯɹϙέϞϯ • ಛٕɹϙέϞϯ
3. ࠓ೔࿩͢͜ͱ • GatsbyΛ࢖ͬͯ؆୯ʹαΠτߏங • NetlifyΛ࢖ͬͯ؆୯ʹαΠτެ։
4. ࠓ೔࿩͞ͳ͍͜ͱ • ϙέϞϯ • ;Δ͞ͱೲ੫ • ΏΔΩϟϯ˚
5. ΍͖ͬͯ • Ξ΢τϓοτΛ΍͍ͬͯ͜͏ • Qiitaͱ͔Mediumͱ͔όϥ͚ΔͷΊΜͲ͍ • ࣗ෼ͷϙʔτϑΥϦΦαΠτΛ࣋ͬͯΕ͹ղ ܾ
6. Ͳ͏΍ͬͯ࡞Δʁ
7. Gatsby • αΠτΛ࡞Δ͜ͱͰ͸ͳ͘ɺܧଓͯ͠Ξ΢τϓο τ͢Δ৔Λ࡞Δ͜ͱ͕໨త • Ξ΢τϓοτ͢Δ৔ͷӡ༻ʹίετΛ͔͚Δͷ͸ φϯηϯε • ੩తαΠτδΣωϨʔλ͕γϯϓϧͰӡ༻΋؆୯ • React੡ͷGatsbyΛ࠾༻
8. Netlify • ϦϙδτϦʹpushͨ͠ΒࣗಈతʹσϓϩΠ • Ϗϧυ࣌ʹ؀ڥม਺Λར༻Մೳ • ͓͔͚ۚͨ͘ͳ͍ • શͯͷ৚݅Λຬͨ͢NetlifyͰܾఆ
9. Gatsby
10. ॳظઃఆ • npm install -g gatsby-cli • GatsbyͷStarter͔Βɺࢀߟʹ͢ΔαϯϓϧαΠτ Λ୳͢ • gatsby new NEW_SITE_DIRECTORY_FOR_YOUR_SITE https://github.com/CREATER_NAME/ REPO_NAME.git
11. ॾʑमਖ਼ • σβΠϯ΍CSSΛ޷Έʹௐ੔ • αϯϓϧهࣄΛ࡟আ • og:image΍faviconɺdescriptionͳͲΛमਖ਼
12. هࣄΛॻ͘ • ϚʔΫμ΢ϯͰهࣄΛ࡞੒ • ҎԼͷΑ͏ͳλάΛϑΝΠϧͷઌ಄ʹ഑ஔ͢Δ͜ͱͰɺ GraphQLܦ༝ͰσʔλΛऔಘ͢Δ͜ͱ͕ՄೳʹͳΔ --- title: αϯϓϧλΠτϧ category: "Gatsby" cover: cover.png author: starfish --- •
13. Netlify
14. ॳظઃఆ • GitHubͱ࿈ܞͤͯ͞ɺը໘ϙνϙν͢Δ͚ͩ
16. ·ͱΊ • GatsbyͷStarterΊͬͪΌศར • Netlify͸૝૾͍ͯͨ͠100ഒ؆୯ • ϚʔΫμ΢ϯͷ͓͔͛ͰɺهࣄΛॻ͘ϋʔυϧ͕Լ͕ͬͨ • ܧଓͯ͠Ξ΢τϓοτ͢Δͱ͍͏໨తʹదͨ͠બ୒ͩͬͨ • ৄࡉ͸ https://starfish719.netlify.com/ Λࢀর