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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
starfish719
July 28, 2019
Programming
110
0
Share
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
July 28, 2019
More Decks by starfish719
See All by starfish719
生成AI時代のエンジニア育成 変わる時代と変わらないコト
starfish719
0
7.8k
【Claude Code】Plugins作成から始まったファインディの開発フロー改革
starfish719
0
990
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
3.2k
生成AIが出力するテストコードのリアル よくあるコードと改善のヒント
starfish719
0
770
生成AI時代に若手エンジニアが最初に覚えるべき内容と、その学習法
starfish719
2
860
開発生産性を上げるための生成AI活用術
starfish719
3
3.2k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
4.9k
ファインディ株式会社における生成AI活用までの軌跡
starfish719
1
4.4k
ファインディの テックブログ爆誕までの軌跡
starfish719
3
3.5k
Other Decks in Programming
See All in Programming
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎 おもクラ #6版
satoshi256kbyte
1
240
Don't Prompt Harder, Structure Better
kitasuke
0
710
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
260
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
serradura
0
310
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
takuya_houshima
0
2.4k
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
o0h
PRO
0
200
Make GenAI Production-Ready with Kubernetes Patterns
bibryam
0
110
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
slecache
0
170
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
6.4k
瑠璃の宝石に学ぶ技術の声の聴き方 / 【劇場版】アニメから得た学びを発表会2026 #エンジニアニメ
mazrean
0
240
Java 21/25 Virtual Threads 소개
debop
0
350
ハンズオンで学ぶクラウドネイティブ
tatsukiminami
0
120
Featured
See All Featured
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
190
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
200
Crafting Experiences
bethany
1
110
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
490
Mind Mapping
helmedeiros
PRO
1
150
Embracing the Ebb and Flow
colly
88
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.4k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
270
Navigating Weather and Climate Data
rabernat
0
160
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
100
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/ Λࢀর