• 商品一覧
  • お問合せ
  • ブログ記事
お仕事の依頼
好かれるマーケティング研究室のデフォルトサムネイル画像

GatsbyウェブサイトをGitHub経由で公開する[Gatsby Cloud]

2021-11-11
前回の記事でGatsbyの最初のウェブサイトを作成し始めました。
まだほとんど何も作っていないので、内容がスカスカな状態ではありますが、この段階で一度ウェブサイトを公開してしまいましょう。
最終的なアウトプットまでのプロセスを作っておけば、後は少しずつウェブサイトを改良していけば、いずれ完成されたウェブサイトが公開されることになります。
また、時間をかけずに更新することができるため、バグが発見されてもすぐに直すことができますし、全く動かなくなってしまったとしても、すぐに戻すことができるようになります。
「…といってもウェブサイトを公開するにはサーバーとか必要なんじゃないの?」
…と思うかもしれません。でもGatsbyで開発をしているなら、GatsbyCloudというサービスを使うことができます。このサービスを使うことで、1つのウェブサイトを無料で公開することができるようになります。
Gatsby Cloud Gatsby Cloudトップページ
このサービスは、GitHubなどに置かれているソースコードを使って、ウェブサイトを公開できる状態にして(ビルド)、さらにウェブサイトを他の人が見れるようにサーバーで公開することができます(ホスティング)。
つまり、GitHubのソースコードを更新すれば、GatsbyCloudはその更新を検知して、すぐに最新のウェブサイトにアップデートされるようになるということです。これは便利ですよね!
ソースコードはGitHubで管理をしておけば安心ですし、そのままデプロイまで自動的にできることになります。
それでは、実際にGatsbyCloudで公開するところまで進めていきましょう。

GitHubとGatsby Cloudのアカウントを準備する

Gatsby Cloudを利用するにはGitHubなどのソースコードを管理するシステムと連携する必要があります。
まずはGitHubのアカウントを作成していきましょう。

GitHubのアカウント登録

GatsbyCloudではGitlabやBitBucketなども使えますが、今回はGithubを使うことにします。
まだGitHubのアカウントを持っていない場合、Githubアクセスして、[GitHub登録する]ボタンや右上の[サインアップ]ボタンから、アカウント登録を行いましょう。
登録が完了したら、右上の"+"ボタンを選択して[New repository]を選択するか、左側の緑色の[New]ボタンを押して、新しいレポジトリを作成しましょう。レポジトリとは、あなたのプロジェクトを保存する箱のようなものです。
GitHub Newレポジトリ作成
次はレポジトリの作成画面になります。わかりやすいレポジトリ名を入力しておきましょう。レポジトリの公開範囲を[Public][Private]のどちらかを選択してください。
GitHub レポジトリ設定
[Public]にすると、このレポジトリ内のコードが、誰にでも見れる状態になります。[Private]にすると、あなたにしか見えないようになります。特に公開する必要がないのであれば、[Private]にしておきましょう。
最後に[Create repository]を選択すればレポジトリが作成されます。リポジトリが作成されたら、次にあなたのGatsbyウェブサイトをアップロードします。
レポジトリ作成後のページに表示されている手順に従えば、あなたのローカル環境にあるコードをGitHubに追加できます。
GitHub レポジトリトップ
ただ、今回はすでに作っているGatsbyプロジェクトのファイルがあるので、commitの前に[git add .]をしておきます。
アップロードしたいプロジェクトのフォルダの中で以下のコマンドを入力してください。GitHubのアドレスはあなたのリポジトリのリンクに変更するのを忘れないようにしてください。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/プロジェクト名.git
git push -u origin main
これでGitHubにコードをアップロードできました。

GatsbyCloudのアカウント登録

次はGatsbyCloudのアカウント登録です。右上の[Sign Up for Free]か中央にある[Get started free]を選択してアカウント作成を始めます。
Gatsby Cloudトップページ
次に必要な情報を記入します。
Gatsby Cloudサインアップ
名前とEメール、国、プロジェクトの種類を決めるだけで作成できます。国には"Japan"、プロジェクトの種類はPersonal Projectを選んでおきます。
Gatsby Cloud VCS選択
次にGitHubなどのバージョンコントロールシステム(VCS)プロバイダーを選択します。今回はGitHubと連携するので[Authorize with GitHub]を選びます。
Gatsby Cloud GitHub連携
GatsbyCloudと連携するために、GitHubにログインします。
Gatsby Cloud authorizeVCS
連携の確認画面が出るので、[Authorize Gatsby Cloud]を選択して承認します。
Gatsby Cloud 料金プラン選択
承認が終わると、GatsbyCloudの料金プランの選択画面になります。14日間の無料期間があるので、Standardを選択してお試しをするのも良いでしょう。クレジットカードの登録も必要ありませんし、期間が終われば自動的に無料のプランになります。
今回はFreeを選択して無料プランにしておきます。
ビルドプランとホストプランの2つがあるので注意してください。両方とも無料プランを選択するとBuildsとHostingが両方ともFreeになります。
Gatsby Cloud 料金プラン選択
右下の[Select this plan]を選んで、次に進みます。
Gatsby Cloud レポジトリトップ
これでGitHubとの連携準備が完了しました。

GitHubレポジトリにあるコードをGatsbyCloudに渡す

先ほどはGitHubのアカウントと連携しましたが、まだどのレポジトリを使うかはGatsbyCloudにはわかりません。それを伝えるために、まずはGatsbyCloudのメイン画面に戻ります。
Gatsby Cloud レポジトリトップ
中央に紫の[Add a site]ボタンから、先ほどGitHubに追加したレポジトリを追加する処理を始めます。
Gatsby Cloud GitHubレポジトリ選択
[Import from a Git repository]を選択して[Next]ボタンを押します。
Gatsby Cloud VCS GitHub選択
GitHubにコードをアップロードしたので[GitHub]を選びます。
Gatsby Cloud GitHubレポジトリ選択
[Select destination]ボタンを押します。
Gatsby Cloud GitHubインストール
全部のレポジトリを渡すのは、セキュリティ的にどうかと思うので、[Only select repositories]から今回GatsbyCloudに渡したいレポジトリだけを選択します。今回はGatsbyウェブサイトのレポジトリになりますね。
下の緑色のボタンを選択して完了すると、GatsbyCloudの[Select a Repository]でGatsbyウェブサイトのレポジトリが選べるようになります。
Gatsby Cloud GitHubプロジェクト選択完了
それ以外は、デフォルトの設定のままで、[Next]で進みます。
Gatsby Cloud CMS選択
このステップでは、連携するCMS(Contents Management System)を選ぶことができます。GitHubにはソースコードをアップロードして保管しますが、例えばブログ記事などのコンテンツをこうしたCMSに登録して保存して管理することもできます。
あとで設定できるので、今の時点ではスキップして飛ばします。
Gatsby Cloud 環境変数選択
最後のステップではEnvironment variables(環境変数)の設定ができますが、現時点では必要ないので、このまま進めて大丈夫です。
最後に[Create site]を選択すると、ウェブサイトが作られます。
次のページでProductionの枠内に緑色のチェックマークが表示されて、BuiltとDeployedと表示されていれば、ウェブサイトのビルドとデプロイが完了したことになります。
Gatsby Cloud ビルドとデプロイ
ページ上部に表示されている[HOSTED ON GATSBY CLOUD]に書かれているアドレスにアクセスすれば、アップロードしたウェブサイトをみることができます。
下のページは僕の作成したものをGatsby Cloudにアップロードしたものになります。
これでGitHubのmainブランチのソースコードを更新すると、GatsbyCloudがそれを検知して、自動的に再ビルドが行われ、ウェブサイトが更新されるようになりました!

まとめ

GatsbyCloudとGitHubを連携して、自動的にウェブサイトが更新されるようになりました。作成したウェブサイトを無料で誰かに見せられるって素晴らしいですね!
ぜひ、あなたも試してみてください!
この記事はnoteにも投稿しています

無料メルマガ

今すぐもっと好かれる!

プロフィール

西松 大輝:マーケティング・サイエンティスト

数字から愛へ
・「何を変えるか?」を行動経済学・TOCLSSで分析する。
・「何を伝えるか?」を戦略・マーケティングで明確にする。
・「何を測定するか?」を機械学習・ITで支援する。

"全部"やらなくっちゃあならないって