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
69
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
July 28, 2019
Tweet
Share
More Decks by starfish719
See All by starfish719
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.3k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.3k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.6k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
4.5k
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
50
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
1.5k
vegatech_3.pdf
starfish719
0
400
Nuxt.jsとGraphcoolで ツールを作っている話
starfish719
0
130
CloudFunctionsと CloudVisionで 遊んでみた
starfish719
0
69
Other Decks in Programming
See All in Programming
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
630
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
0
240
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
130
がんばりすぎないコーディングルール運用術
tsukakei
1
170
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
190
Design Pressure
hynek
0
1.4k
Blueskyのプラグインを作ってみた
hakkadaikon
1
260
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
What's in a price? How to price your products and services
michaelherold
245
12k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for humans not robots
tammielis
253
25k
Code Review Best Practice
trishagee
68
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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/ Λࢀর