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

GatsbyJS + Contentful + Netlifyで作る技術ブログ

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for GcNok GcNok
October 22, 2019
Technology
5.4k
0

GatsbyJS + Contentful + Netlifyで作る技術ブログ

Avatar for GcNok

GcNok

October 22, 2019

More Decks by GcNok

See All by GcNok
VuePress x Firebaseでエンジニアブログを作ってみた話
Avatar for GcNok gcnok
0
5.3k

Other Decks in Technology

See All in Technology
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
290
Podcast配信で広がったアウトプットの輪～70人と音声発信してきた7年間～/outputconf_01
Avatar for FORTE fortegp05
0
180
Datadog で実現するセキュリティ対策 ~オブザーバビリティとセキュリティを 一緒にやると何がいいのか~
Avatar for Shuntaro Azuma a2ush
0
180
Why we keep our community?
Avatar for Yasunobu Kawaguchi kawaguti
PRO
0
360
AIにより大幅に強化された AWS Transform Customを触ってみる
Avatar for arap / 0air 0air
0
260
脳が溶けた話 / Melted Brain
Avatar for Keisuke69 keisuke69
1
1.2k
Physical AI on AWS リファレンスアーキテクチャ / Physical AI on AWS Reference Architecture
Avatar for shota aws_shota
1
280
The essence of decision-making lies in primary data
Avatar for 株式会社カミナシ kaminashi
0
220
AWSで2番目にリリースされたサービスについてお話しします(諸説あります)
Avatar for Yuuki Yamashita yama3133
0
110
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
5
1.3k
パワポ作るマンをMCP Apps化してみた
Avatar for iwamot iwamot
PRO
0
280
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
170

Featured

See All Featured
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
260
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
340
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
200
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
250
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
180
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
160
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
81
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
170

Transcript

  1. GatsbyJS + Contentful + NetlifyͰ࡞Δٕज़ϒϩά גࣜձࣾεϚʔτγϣοϐϯάɹࢤ࣏௚ق

  2. ࣗݾ঺հ • ໊લɿࢤ࣏௚قʢ@gc_tech70ʣ • ॴଐɿגࣜձࣾεϚʔτγϣοϐϯά • ։ൃݴޠɿVue, Nuxt.js, Angular, Go,

    PHP • ϚΠϒʔϜɿFlutter։ൃ

  3. ໨࣍ • ٕज़ϒϩάΛ࡞͖͔͚ͬͨͬ • GatsbyJSͱ͸ʁ • Contentfulͱ͸ʁ • Netlifyͱ͸ʁ •

    σϞ • ·ͱΊ

  4. ٕज़ϒϩάΛ࡞͖͔͚ͬͨͬ • ReactͰԿ͔࡞ͬͯΈ͔ͨͬͨ • GraphQLΛ࢖ͬͯΈ͔ͨͬͨ • NetlifyΛ࢖ͬͯΈ͔ͨͬͨ • ؔ࿈ٕज़Ͱ͋ΔVuePressͱͷҧ͍Λ஌Γ͔ͨͬͨ

  5. GatsbyJSͱ͸ʁ • React.jsϕʔεͷ੩తαΠτδΣωϨʔλʔ • ϞμϯͳWebٕज़Λखܰʹ࢖༻Ͱ͖ɺߴ଎ͳWebϖʔδΛ
 ࣮ݱՄೳ • PWAɺSSRɺGraphQLͳͲ • ໿1000छྨͷpluginͰΧελϚΠζੑ͕ߴ͍

  6. ͱʹ͔͘଎͍Β͍͠

  7. LighthouseͰύϑΥʔϚϯεΛݕূ

  8. None

  9. ଎͍ʢ֬৴ʣ

  10. Contentfulͱ͸ʁ • ϔουϨεCMSͷ1ͭͰɺWordPressͳͲͱ͸ҟͳΓɺAPIϕʔ εͰͷهࣄΛఏڙ • ແྉͰϦονͳ؅ཧը໘Λ࢖༻Ͱ͖Δɻʢ5000Ϩίʔυ·Ͱʣ • هࣄͷόʔδϣϯ؅ཧͳͲ΋Մೳ

  11. None
  12. None

  13. Netlifyͱ͸ʁ • ੩తαΠτΛϗεςΟϯά͢Δ͜ͱ͕Ͱ͖ΔWebαʔϏε • ެ։खॱ͕ඇৗʹ؆୯Ͱ3εςοϓ΄ͲͰWebαΠτͷެ։͕ Մೳ • Github΁ͷpush΍Contentfulͷهࣄͷߋ৽ʹϑοΫͯ͠σϓϩ Π͕Մೳ

  14. None
  15. None

  16. σϞ

  17. ·ͱΊ • GraphQL͸RESTͷAPIʹൺ΂ͯɺAPIͷ࣮૷Λؾʹ͢Δ͜ͱͳࣗ͘༝ʹ σʔλΛऔಘͰ͖ͯศར • Gatsby͸ଟ༷ͳpluginͱ๛෋ͳυΩϡϝϯτͰࣗ༝ͳΧελϚΠζ͕ Մೳͳ൓໘ɺ΍ΕΔ͜ͱ͕ଟ͍ͷͰਓʹΑͬͯ͸ֶशίετ͕΍΍ߴ͍ • Netlify͸Contentfulͱ࿈ܞͨ͠ΓɺGitͷpushʹ߹ΘͤͯࣗಈͰσϓϩ Πͯ͘͠ΕΔͨΊɺඇৗʹศར

  18. Thank you !!!