Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby + Netlifyで ポートフォリオサイトを 作った話
Search
starfish719
July 28, 2019
Programming
0
70
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
July 28, 2019
Tweet
Share
More Decks by starfish719
See All by starfish719
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.3k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.4k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.7k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
4.6k
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
53
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
1.6k
vegatech_3.pdf
starfish719
0
410
Nuxt.jsとGraphcoolで ツールを作っている話
starfish719
0
130
CloudFunctionsと CloudVisionで 遊んでみた
starfish719
0
74
Other Decks in Programming
See All in Programming
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
Claude Codeの使い方
ttnyt8701
1
130
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
160
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
ReadMoreTextView
fornewid
1
450
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
3
200
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
920
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Done Done
chrislema
184
16k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Designing for Performance
lara
609
69k
Visualization
eitanlees
146
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Facilitating Awesome Meetings
lara
54
6.4k
Transcript
Gatsby + NetlifyͰ ϙʔτϑΥϦΦαΠτΛ ࡞ͬͨ
ࣗݾհ • ށా ઍ൏ (Toda Chihaya) • @starfish0206 • ϕΨίʔϙϨʔγϣϯ
• PHP JavaScript Swift • Vue.js Elixir • झຯɹϙέϞϯ • ಛٕɹϙέϞϯ
ࠓ͢͜ͱ • GatsbyΛͬͯ؆୯ʹαΠτߏங • NetlifyΛͬͯ؆୯ʹαΠτެ։
ࠓ͞ͳ͍͜ͱ • ϙέϞϯ • ;Δ͞ͱೲ੫ • ΏΔΩϟϯ˚
͖ͬͯ • ΞτϓοτΛ͍ͬͯ͜͏ • Qiitaͱ͔Mediumͱ͔όϥ͚ΔͷΊΜͲ͍ • ࣗͷϙʔτϑΥϦΦαΠτΛ࣋ͬͯΕղ ܾ
Ͳ͏ͬͯ࡞Δʁ
Gatsby • αΠτΛ࡞Δ͜ͱͰͳ͘ɺܧଓͯ͠Ξτϓο τ͢ΔΛ࡞Δ͜ͱ͕త • Ξτϓοτ͢Δͷӡ༻ʹίετΛ͔͚Δͷ φϯηϯε • ੩తαΠτδΣωϨʔλ͕γϯϓϧͰӡ༻؆୯ •
ReactͷGatsbyΛ࠾༻
Netlify • ϦϙδτϦʹpushͨ͠ΒࣗಈతʹσϓϩΠ • Ϗϧυ࣌ʹڥมΛར༻Մೳ • ͓͔͚ۚͨ͘ͳ͍ • શͯͷ݅Λຬͨ͢NetlifyͰܾఆ
Gatsby
ॳظઃఆ • npm install -g gatsby-cli • GatsbyͷStarter͔Βɺࢀߟʹ͢ΔαϯϓϧαΠτ Λ୳͢ •
gatsby new NEW_SITE_DIRECTORY_FOR_YOUR_SITE https://github.com/CREATER_NAME/ REPO_NAME.git
ॾʑमਖ਼ • σβΠϯCSSΛΈʹௐ • αϯϓϧهࣄΛআ • og:imagefaviconɺdescriptionͳͲΛमਖ਼
هࣄΛॻ͘ • ϚʔΫμϯͰهࣄΛ࡞ • ҎԼͷΑ͏ͳλάΛϑΝΠϧͷઌ಄ʹஔ͢Δ͜ͱͰɺ GraphQLܦ༝ͰσʔλΛऔಘ͢Δ͜ͱ͕ՄೳʹͳΔ --- title: αϯϓϧλΠτϧ category:
"Gatsby" cover: cover.png author: starfish --- •
Netlify
ॳظઃఆ • GitHubͱ࿈ܞͤͯ͞ɺը໘ϙνϙν͢Δ͚ͩ
None
·ͱΊ • GatsbyͷStarterΊͬͪΌศར • Netlify૾͍ͯͨ͠100ഒ؆୯ • ϚʔΫμϯͷ͓͔͛ͰɺهࣄΛॻ͘ϋʔυϧ͕Լ͕ͬͨ • ܧଓͯ͠Ξτϓοτ͢Δͱ͍͏తʹదͨ͠બͩͬͨ •
ৄࡉ https://starfish719.netlify.com/ Λࢀর