「NetlifyとGitHubを連携させるみたいに、Gatsby CloudとGitHubを連携させてGatsbyJSで作ったサイトを公開したい」
今回は、そんな方向けに記事を書きます。
この記事は、以下の流れで解説します。
GitHubと連携させて、Gatsby Cloudのアカウントを作る
Gatsby Cloudにホスティング するGitHubのリポジトリを選択する
サイトが公開される
Gatsby Cloudのアカウントを作る
あらかじめGitHubのアカウントを作っておいてください。
GitHubのアカウントの作り方は、以下の記事で解説してます。
![【図解あり】GitHubアカウント作成方法を解説【数分で完了します】](https://images.ctfassets.net/o1bgnefm7hbe/2XaeWybW9V713xW1Lg1B5/c0c57b6fa3c41d8a383179c219b2df63/astronaut.png?w=260&h=146&q=50&fm=png)
では、GitHubのアカウントと連携させて、Gatsby Cloudのアカウントを作っていきます。
以下のリンクをクリックしてください。
![gatsby_cloud_top](https://images.ctfassets.net/o1bgnefm7hbe/6GsuY0Bx0zBUNEpO1Cwbo4/078c46fd2f83ea6317d3307338132b73/top.png?w=760&h=475&q=50&fm=png)
「Get started free →」をクリックします。
![welcome_to_gatsby_cloud](https://images.ctfassets.net/o1bgnefm7hbe/1tUl8xcj7FxR6DTorLGvqB/15bd772610c01b4bc7afc1a106c14209/welcome_to_gatsby_cloud.png?w=760&h=475&q=50&fm=png)
以下の情報を入力します。
First name(名前)
Last name(苗字)
Work email(メールアドレス)
Country(国名を選択)
個人で使う場合、「I want to use Gatsby for...」のところは「Personal Project」を選択します。
「Next →」をクリックします。
![authorize_with_github](https://images.ctfassets.net/o1bgnefm7hbe/3WGjbL6S9DcnMmcgEkBBMZ/ee1fdad6ad702149f48280ec9edc4141/authorize_with_github.png?w=760&h=475&q=50&fm=png)
GitHubと連携させるので、「Authorize with GitHub」をクリックします。
![authorize_gatsby_cloud](https://images.ctfassets.net/o1bgnefm7hbe/4f7VT0DeWZwfpusLd6GZEv/6d197dddb25e0a13a591cb0daa4f73a0/authorize_gatsby_cloud.png?w=760&h=475&q=50&fm=png)
GitHubのページが開きます。
「Authorize Gatsby Cloud」をクリックします。
![select_plan](https://images.ctfassets.net/o1bgnefm7hbe/54Ss1G5yG7ZN5LjOaol6MW/9b3d093deea3ac2e54997047583226c8/select_plan.png?w=760&h=747&q=50&fm=png)
プラン選択のページが表示されます。
無料でGatsby Cloudを使う場合、「Builds plan」「Hosting plan」の両方で「Free」を選択して、「Select this plan」をクリックします。
Gatsby Cloudのアカウントページが表示されたら、アカウント作成は完了です。
GitHubのリポジトリを選択する
ではここから、Gatsbyで作ったサイトを公開していきます。
あらかじめGitHubでリポジトリを作成し、プロジェクトをpushしておいてください。
![add_site](https://images.ctfassets.net/o1bgnefm7hbe/1zDuWx7obgOjzxYan7pLuO/6ad984e11f3509aeadde0e18c9accd05/1_add_site.png?w=760&h=475&q=50&fm=png)
Gatsby Cloudのアカウントページで、「Add a site +」をクリックします。
![import_from_github](https://images.ctfassets.net/o1bgnefm7hbe/67eCWLS94OxqJr52Dp0IaK/b5fa740f5ff81a8d81f60262af3a57ab/2_import_from_github.png?w=760&h=475&q=50&fm=png)
「Import from a Git repository」をクリックして、「Next →」をクリックします。
![select_github](https://images.ctfassets.net/o1bgnefm7hbe/3RjjyIfVVDVRFvhdKaFUJ2/4d7fb1767ae01de81a27a7785d6b6ce1/3_select_github.png?w=760&h=475&q=50&fm=png)
「GitHub」を選択します。
![select_destination](https://images.ctfassets.net/o1bgnefm7hbe/5oRi5xvSn9kPKX3u9fiyFb/291616d9b50ccf19db8ea709f01f278c/4_select_destination.png?w=760&h=475&q=50&fm=png)
「Select destination」をクリックします。
![select_github_account](https://images.ctfassets.net/o1bgnefm7hbe/3ETfGLuHBcWND0clvHSaD5/82fe4c2c0bb27039c708eebddc4b10c8/5_select_github_account.png?w=760&h=532&q=50&fm=png)
上記の画像のようなページが表示されます。
自分のGitHubのアカウント名を選択してください。
![select_repositories](https://images.ctfassets.net/o1bgnefm7hbe/1z4CQ2Kis8bOOXmsQxIOeL/a7a61a489b39a43064097cb8f11a548c/6_select_repositories.png?w=760&h=463&q=50&fm=png)
上の画像のようなページが表示されます。
①「Only select repositories」を選択します。
②「Select repositories」をクリックして、プルダウンから、連携させるGitHubのリポジトリを選択します。
③すぐ下に、選択したリポジトリの名前が表示されるのを確認します。
下部にある「Install」をクリックします。
![select_repositories2](https://images.ctfassets.net/o1bgnefm7hbe/15IlYroNMGiEOwd6rK8VmK/42b99027b79c339ce5e4c8366d82b7e2/7_select_repositories2.png?w=760&h=475&q=50&fm=png)
以下の内容を確認します。
GitHubのアカウント名
リポジトリの名前
サイトの名前(自由に決められます。後で変えることもできます。)
例えば、サイトの名前を「abc」とした場合、URLは「https://abc.gatsbyjs.io」となります。
内容を確認したら、「Next →」をクリックします。
![skip_cms](https://images.ctfassets.net/o1bgnefm7hbe/6I28QJl8QMstOnDCVweyUt/2e80dbdee38f359eb6e1a86d520e817d/8_skip_cms.png?w=760&h=475&q=50&fm=png)
CMSを使う場合、このページで選択します。
後からCMSを選択する こともできます。
ここでは、そのまま「Skip this step →」をクリックします。
![environment_variables](https://images.ctfassets.net/o1bgnefm7hbe/1iO7O5B9ejIy0jUPbfhqbN/b4445448b67ee11b09ad6112c9410232/9_environment_variables.png?w=760&h=475&q=50&fm=png)
「環境変数」を設定する場合、このページで設定します。
環境変数も後から設定できます。
ここでは、そのまま「Create site →」をクリックします。
![complete gatsby cloud](https://images.ctfassets.net/o1bgnefm7hbe/4HfwjWm1mD3oR8qO1QqpPR/12a1f8a288f56f47ab98126e0d5112b7/10_complete_gatsby_cloud.png?w=760&h=475&q=50&fm=png)
上の画像のようなページが表示され、サイトのアップロードが始まります。
アップロードが終わると、画面左下あたりに「Built in 〜」という文字と一緒に緑のチェックマークがつきます。
その上の方に、青色で「〜.gatsbyjs.io」と書かれているのが、サイトのURLです。
![Top page of RalaSalon](https://images.ctfassets.net/o1bgnefm7hbe/6QwOWCxgMDFG8UUgEwwzNK/5c4e071f3512a83ef150bd6c9ccb19cd/ralasalon_top.png?w=760&h=475&q=50&fm=png)
URLをクリックすると、サイトが表示されます。
ちなみに上記の画像は、僕がGatsbyJSで作った架空の美容室のホームページです。
Gatsby Cloudでホスティングしています。
動作は特に問題ありません。
記事は以上です。