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
57
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
July 28, 2019
Tweet
Share
More Decks by starfish719
See All by starfish719
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1k
動作確認やテストで漏れがちな観点3選
starfish719
6
980
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.2k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
280
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
0
40
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
960
vegatech_3.pdf
starfish719
0
400
Nuxt.jsとGraphcoolで ツールを作っている話
starfish719
0
120
CloudFunctionsと CloudVisionで 遊んでみた
starfish719
0
60
Other Decks in Programming
See All in Programming
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
100
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
200
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
200
DROBEの生成AI活用事例 with AWS
ippey
0
120
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
680
Azure AI Foundryのご紹介
qt_luigi
1
270
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
350
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
170
CNCF Project の作者が考えている OSS の運営
utam0k
5
650
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
5.1k
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building Your Own Lightsaber
phodgson
104
6.2k
A better future with KSS
kneath
238
17k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Automating Front-end Workflow
addyosmani
1367
200k
Bash Introduction
62gerente
610
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
A Tale of Four Properties
chriscoyier
158
23k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Scaling GitHub
holman
459
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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/ Λࢀর