GatsbyウェブサイトをGitHub経由で公開する
前回の記事でGatsbyの最初のウェブサイトを作成し始めました。
まだほとんど何も作っていないので、内容がスカスカな状態ではありますが、この段階で一度ウェブサイトを公開してしまいましょう。
最終的なアウトプットまでのプロセスを作っておけば、後は少しずつウェブサイトを改良していけば、いずれ完成されたウェブサイトが公開されることになります。
また、時間をかけずに更新することができるため、バグが発見されてもすぐに直すことができますし、全く動かなくなってしまったとしても、すぐに戻すことができるようになります。
「…といってもウェブサイトを公開するにはサーバーとか必要なんじゃないの？」
…と思うかもしれません。でもGatsbyで開発をしているなら、GatsbyCloudというサービスを使うことができます。このサービスを使うことで、１つのウェブサイトを無料で公開することができるようになります。
このサービスは、GitHubなどに置かれているソースコードを使って、ウェブサイトを公開できる状態にして(ビルド)、さらにウェブサイトを他の人が見れるようにサーバーで公開することができます（ホスティング）。
つまり、GitHubのソースコードを更新すれば、GatsbyCloudはその更新を検知して、すぐに最新のウェブサイトにアップデートされるようになるということです。これは便利ですよね！
ソースコードはGitHubで管理をしておけば安心ですし、そのままデプロイまで自動的にできることになります。
それでは、実際にGatsbyCloudで公開するところまで進めていきましょう。
GitHubとGatsbyCloudのアカウントを準備する
GitHubのアカウント登録
GatsbyCloudではGitlabやBitBucketなども使えますが、今回はGithubを使うことにします。
まだGitHubのアカウントを持っていない場合、Githubアクセスして、[GitHub登録する]ボタンや右上の[サインアップ]ボタンから、アカウント登録を行いましょう。
登録が完了したら、右上の"+"ボタンを選択して[New repository]を選択するか、左側の緑色の[New]ボタンを押して、新しいレポジトリを作成しましょう。レポジトリとは、あなたのプロジェクトを保存する箱のようなものです。
次はレポジトリの作成画面になります。わかりやすいレポジトリ名を入力しておきましょう。レポジトリの公開範囲を[Public]か[Private]のどちらかを選択してください。
[Public]にすると、このレポジトリ内のコードが、誰にでも見れる状態になります。[Private]にすると、あなたにしか見えないようになります。特に公開する必要がないのであれば、[Private]にしておきましょう。
最後に[Create repository]を選択すればレポジトリが作成されます。リポジトリが作成されたら、次にあなたのGatsbyウェブサイトをアップロードします。
レポジトリ作成後のページに表示されている手順に従えば、あなたのローカル環境にあるコードを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]を選択してアカウント作成を始めます。
次に必要な情報を記入します。
名前とEメール、国、プロジェクトの種類を決めるだけで作成できます。国には"Japan"、プロジェクトの種類はPersonal Projectを選んでおきます。
次にGitHubなどのバージョンコントロールシステム(VCS)プロバイダーを選択します。今回はGitHubと連携するので[Authorize with GitHub]を選びます。
GatsbyCloudと連携するために、GitHubにログインします。
連携の確認画面が出るので、[Authorize Gatsby Cloud]を選択して承認します。
承認が終わると、GatsbyCloudの料金プランの選択画面になります。14日間の無料期間があるので、Standardを選択してお試しをするのも良いでしょう。クレジットカードの登録も必要ありませんし、期間が終われば自動的に無料のプランになります。
今回はFreeを選択して無料プランにしておきます。
ビルドプランとホストプランの２つがあるので注意してください。両方ともF無料プランを選択するとBuildsとHostingが両方ともFreeになります。
右下の[Select this plan]を選んで、次に進みます。
これでGitHubとの連携準備が完了しました。
GitHubレポジトリにあるコードをGatsbyCloudに渡す
先ほどはGitHubのアカウントと連携しましたが、まだどのレポジトリを使うかはGatsbyCloudにはわかりません。それを伝えるために、まずはGatsbyCloudのメイン画面に戻ります。
中央に紫の[Add a site]ボタンから、先ほどGitHubに追加したレポジトリを追加する処理を始めます。
[Import from a Git repository]を選択して[Next]ボタンを押します。
GitHubにコードをアップロードしたので[GitHub]を選びます。
[Select destination]ボタンを押します。
全部のレポジトリを渡すのは、セキュリティ的にどうかと思うので、[Only select repositories]から今回GatsbyCloudに渡したいレポジトリだけを選択します。今回はGatsbyウェブサイトのレポジトリになりますね。
下の緑色のボタンを選択して完了すると、GatsbyCloudの[Select a Repository]でGatsbyウェブサイトのレポジトリが選べるようになります。
それ以外は、デフォルトの設定のままで、[Next]で進みます。
このステップでは、連携するCMS(Contents Management System)を選ぶことができます。GitHubにはソースコードをアップロードして保管しますが、例えばブログ記事などのコンテンツをこうしたCMSに登録して保存して管理することもできます。
あとで設定できるので、今の時点ではスキップして飛ばします。
最後のステップではEnvironment variables(環境変数)の設定ができますが、現時点では必要ないので、このまま進めて大丈夫です。
最後に[Create site]を選択すると、ウェブサイトが作られます。
次のページでProductionの枠内に緑色のチェックマークが表示されて、BuiltとDeployedと表示されていれば、ウェブサイトのビルドとデプロイが完了したことになります。
ページ上部に表示されている[HOSTED ON GATSBY CLOUD]に書かれているアドレスにアクセスすれば、アップロードしたウェブサイトをみることができます。
下のページは僕の作成したものをGatsby Cloudにアップロードしたものになります。
これでGitHubのmainブランチのソースコードを更新すると、GatsbyCloudがそれを検知して、自動的に再ビルドが行われ、ウェブサイトが更新されるようになりました！
まとめ
GatsbyCloudとGitHubを連携して、自動的にウェブサイトが更新されるようになりました。作成したウェブサイトを無料で誰かに見せられるって素晴らしいですね！
ぜひ、あなたも試してみてください！
続き↓
ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ
この記事が気に入ったらサポートをしてみませんか？