RalaCode

44件の記事があります

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する
サムライエンジニアプラス

「NetlifyとGitHubを連携させるみたいに、Gatsby CloudとGitHubを連携させてGatsbyJSで作ったサイトを公開したい」
今回は、そんな方向けに記事を書きます。

この記事は、以下の流れで解説します。

  • GitHubと連携させて、Gatsby Cloudのアカウントを作る

  • Gatsby CloudにホスティングするGitHubのリポジトリを選択する

  • サイトが公開される

Gatsby Cloudのアカウントを作る

あらかじめGitHubのアカウントを作っておいてください。
GitHubのアカウントの作り方は、以下の記事で解説してます。

【図解あり】GitHubアカウント作成方法を解説【数分で完了します】
【図解あり】GitHubアカウント作成方法を解説【数分で完了します】
記事を読む

では、GitHubのアカウントと連携させて、Gatsby Cloudのアカウントを作っていきます。
以下のリンクをクリックしてください。

>>Gatsby Cloudのトップページへ

gatsby_cloud_top

「Get started free →」をクリックします。

welcome_to_gatsby_cloud

以下の情報を入力します。

  • First name(名前)

  • Last name(苗字)

  • Work email(メールアドレス)

  • Country(国名を選択)

個人で使う場合、「I want to use Gatsby for...」のところは「Personal Project」を選択します。
「Next →」をクリックします。

authorize_with_github

GitHubと連携させるので、「Authorize with GitHub」をクリックします。

authorize_gatsby_cloud

GitHubのページが開きます。
「Authorize Gatsby Cloud」をクリックします。

select_plan

プラン選択のページが表示されます。
無料でGatsby Cloudを使う場合、「Builds plan」「Hosting plan」の両方で「Free」を選択して、「Select this plan」をクリックします。

Gatsby Cloudのアカウントページが表示されたら、アカウント作成は完了です。

GitHubのリポジトリを選択する

ではここから、Gatsbyで作ったサイトを公開していきます。
あらかじめGitHubでリポジトリを作成し、プロジェクトをpushしておいてください。

add_site

Gatsby Cloudのアカウントページで、「Add a site +」をクリックします。

import_from_github

「Import from a Git repository」をクリックして、「Next →」をクリックします。

select_github

「GitHub」を選択します。

select_destination

「Select destination」をクリックします。

select_github_account

上記の画像のようなページが表示されます。
自分のGitHubのアカウント名を選択してください。

select_repositories

上の画像のようなページが表示されます。

  • ①「Only select repositories」を選択します。

  • ②「Select repositories」をクリックして、プルダウンから、連携させるGitHubのリポジトリを選択します。

  • ③すぐ下に、選択したリポジトリの名前が表示されるのを確認します。

下部にある「Install」をクリックします。

select_repositories2

以下の内容を確認します。

  • GitHubのアカウント名

  • リポジトリの名前

  • サイトの名前(自由に決められます。後で変えることもできます。)

例えば、サイトの名前を「abc」とした場合、URLは「https://abc.gatsbyjs.io」となります。

内容を確認したら、「Next →」をクリックします。

skip_cms

CMSを使う場合、このページで選択します。
後からCMSを選択することもできます。

ここでは、そのまま「Skip this step →」をクリックします。

environment_variables

「環境変数」を設定する場合、このページで設定します。
環境変数も後から設定できます。

ここでは、そのまま「Create site →」をクリックします。

complete gatsby cloud

上の画像のようなページが表示され、サイトのアップロードが始まります。
アップロードが終わると、画面左下あたりに「Built in 〜」という文字と一緒に緑のチェックマークがつきます。

その上の方に、青色で「〜.gatsbyjs.io」と書かれているのが、サイトのURLです。

Top page of RalaSalon

URLをクリックすると、サイトが表示されます。
ちなみに上記の画像は、僕がGatsbyJSで作った架空の美容室のホームページです。
Gatsby Cloudでホスティングしています。

動作は特に問題ありません。

記事は以上です。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

【React】styled-componentsの使い方【具体例あり】

【React】styled-componentsの使い方【具体例あり】

【React】onClickでclassNameをつけたり外したりする方法

【React】onClickでclassNameをつけたり外したりする方法

GatsbyJSの開発環境を構築する手順

GatsbyJSの開発環境を構築する手順

GatsbyJSでYarnを使う場合に必要な設定を解説

GatsbyJSでYarnを使う場合に必要な設定を解説

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy