Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify

Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify

- 導入事例をバシバシ読める法人向けLPをGatsby.jsで作った
- Gatsby.jsのポイント
- Netlifyのポイント

kikunantoka

May 10, 2019
Tweet

More Decks by kikunantoka

Other Decks in Technology

Transcript

  1. ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • ಡΈࠐΈʹΑΔΨλπΩΛ๷͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖ΋΍ͬͯ͘ΕΔ •

    .webp ʹ΋ରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυ΋΍ͬͯ͘ΕΔ • ߥΒ໨ͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
  2. Netlify ͱ͸ • https://www.netlify.com/ • GitHubͷϦϙδτϦΛඥ෇͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖ͯϗεςΟϯάͰ͖Δ •

    ΧελϜυϝΠϯ & SSLԽରԠ΋ແྉͰରԠͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠΋ɺຊ൪؀ڥ͸ͪΌΜͱಈ࡞͠ ͨ··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ΋҆৺ͯ͠ίϛοτͰ͖Δ
  3. ղܾࡦ • ϓϨϏϡʔ؀ڥʹ͚ͩBasicೝূΛ͔͚Δ͜ͱ͕Ͱ͖ͨ /* Basic-Auth: hoge:piyo netlify_headers [context.production] command =

    "gatsby build” [context.deploy-preview] command = "gatsby build && cp netlify_headers public/_headers" netlify.toml