Gatsby×HeadlessCMS(Contentful)ででポートフォリオサイトを作った話

ポートフォリオサイトをGatsbyとContentfulを使用して作り直したのでそれらの経緯とメリット・注意点についてまとめてみました。

Transcript

1. ɹ
   (BUTCZ
   º
   ɹ
   )FBEMFTT$.4Ͱ
   ϙʔτϑΥϦΦαΠτΛ࡞ͬͨ࿩
2. ࣮͸ʜ
   ୅໨ͱͳΔϙʔτϑΥϦΦαΠτ ୅໨
   '$ϗʔϜϖʔδ ୅໨
   )5.- $44
3. ୅໨
   )5.- $44 w ͖ͭͬͨ͘Γؙ೥ͳʹ΋ߋ৽ͯ͠ͳ͔ͬͨ
   w ౰࣌`(JU`΋஌Βͳ͔ͬͨ
   w ӈΫϦοΫˠݕূͰ͔͠ଞਓͷιʔείʔυΈΔज़Λ஌Βͳ͔ͬͨ 
 ˠಈ͚͹Ϥγঢ়ଶʹͳ͍ͬͯͨ ΑΓߋ৽͠΍͍͢΋ͷʹ͍ͨ͠ʜ
   Ϟμϯͳٕज़ͰαΠτΛ࡞ͬͯΈ͍ͨʜ
4. (BUTCZ 3FBDU੡ͷ੩తαΠτδΣωϨʔλʔ • ελʔλʔ ςϯϓϨʔτ ͕͍ͬͺ͍͋Δ
   • /FUMJGZͱ͍͏ϗεςΟϯάαʔϏεΛ࢖͍ɺͦΕΛ(JU)VCͱ࿈ܞ ͤ͞Δ͜ͱͰɺNBTUFSϒϥϯνʹߋ৽಺༰ΛϚʔδ͢Δ͚ͩͰα ΠτΛߋ৽͢Δ͜ͱ͕Ͱ͖ΔͷͰߋ৽ੑ͕˕
   • ϚʔΫμ΢ϯࣜͰهࣄΛ͔͚ΔͷͰɺ2JJUB΍.FEJVNͱ͍ͬͨผ αΠτ΁ͦͷ··͍࣋ͬͯ͘͜ͱ͕Ͱ͖Δɻ
5. $POUFOUGVM )FBEMFTT
   $.4 • (BUTCZ͚ͩͰ΋ϚʔΫμ΢ϯࣜͰهࣄΛ͔͘͜ͱ͸Ͱ͖Δ͕ɺهࣄ ϑΝΠϧΛϦϙδτϦ಺Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ 
 αΠτΛଟݴޠԽ͍ͨ͠ͱ͍ͬͨ৔߹ɺϑΝΠϧ਺͕୯७ʹഒʹͳΔ 
 ˠ)FBEMFTT$.4αʔϏεΛ࢖͏͜ͱͰ͜ΕΛճආ͢Δ͜ͱ͕Ͱ͖Δ
6. (BUTCZ
   º
   $POUFOUGVM
   ΊͪΌ࢖͍΍͍͢ʂ
   ͚Ͳࣗ෼༻ʹ΋υΩϡϝϯτΛ࢒͓ͯ͘͠΂͠ • )FBEMFTT$.4࢖༻͍ͯ͠ΔՕॴ͸ιʔείʔυ͔Β΋ಡΈղ͖ʹ ͍͘ɻ
   • ྫ͑͹ߋ৽ੑ͕͋Δͱ͜Ζ͚ͩ࢖͍ͬͯΔਓ΋͍Ε͹ɺ"CPVUը ໘ͳͲߋ৽ੑͷ௿͍ϖʔδ΋͢΂ͯ)FBEMFTT$.4Ͱ؅ཧ͍ͯ͠Δ ਓ΋͍ͨɻ
   • ʮ͋Εͬɺ͜͜ͷจݴमਖ਼͍͚ͨ͠Ͳιʔείʔυʹͳ͍ʂʯͱ ͍͏͜ͱ͕ى͜Γ΍ͦ͢͏ͳͷͰ)FBEMFTT$.4ͷ࢖༻ൣғ͸ه ࿥͓ͯ͘͠ඞཁ͕͋Δͳ͊ͱࢥͬͨ KT )FBEMFTT$.4