Gatsby + GitHub + Netlify でブログ作成

これはネット記事を参考にすればできると思いますが、私のような素人は少し歯ごたえがありました。

git の add, commit, push

プログラムをチームで開発する際に、ローカルで git で作成しておいて、GitHub に push して他のチームメンバーが編集したり、それをローカルに引っ張ってきて編集することができるようです。

「add」で「Staging Area」に登録し、
「commit」で「Local Repositry」に登録し、
「push」で「Remote Ropository」にデプロイします。

このようにして、いくつかの段階を経て最終的には GitHub に push します。

レポジトリ( Repositry )とは

レポジトリ( Repositry )とは「収納(保存)場所」という意味です。

ローカルのレポジトリに登録して、それをリモート( GitHub 上 )のレポジトリに送ったり、ダウンロードしたりすることができます。

プロジェクトをローカルで変更してもそのままではレポジトリには登録されません。
必ず、add, commit する必要があります。

ローカルのレポジトリに登録する

例えば、~/my-blog という Gatsby プロジェクトを作成して、それをローカルのレポジトリに登録するのは、


cd ~/my-blog
git add .
git commit -m "何らかのコメント"
git branch -M main

vs code などで my-blog に変更を加えた場合には、このプロセスを通じて変更箇所を必ずローカルレポジトリに登録しなければなりません。

ローカルレポジトリからリモートレポジトリに push

リモートレポジトリは GitHub であるとして、git を使ってローカルレポジトリを push します。

まずは、送り先を設定する必要があります。
同じターゲットを複数回設定しようとするとエラーになります。


git remote add origin git@github.com:moheno/my-blog.git

https で送り先を設定するとユーザー名とパスワード( Personal Access Tokens )が必要になりますが、git@ にすると、鍵認証されていれば面倒な手間がありません。

鍵認証を設定してあれば、以下の一文ですべてが GitHub へと転送されます。


git push -u origin main

鍵認証ができているかどうかの確認は以下のようにして確認することができます。


ssh -T git@github.com

Hi moheno! You've successfully authenticated, but GitHub does not provide shell access.

Netlify でビルド・デプロイ

https://www.netlify.com/ アクセスして、GitHub でログインします。

「Deploy From GitHub」でプロジェクトを import してビルドします。

ビルド・デプロイを自動化するためには、「Deploys」→「プロジェクト」→「Deploy Settings」→「Build hook」を設定します。

これで、ローカルレポジトリをリモートレポジトリに push するだけで編集が自動的に変更されます。

ただし、少しだけタイムラグがあります。

こうして作成したのが、https://kunokatura.netlify.app/ です。

確かにこれはすごいですね。

git push を自動化する

コマンドラインから git 設定をしてもいいのですが、my-blog の変更点だけを push するのであればシェルスクリプトを作成して実行した方が簡単です。


#!/bin/sh

cd ~/my-blog
stamp=`date '+%y%m%d%H%M%S'`
echo $stamp
git add .
git commit -m $stamp
git branch -M main
git push -u origin main

このシェルスクリプトに実行権限を与えれば、クリックするだけでローカルレポジトリからリモートレポジトリへと push されます。

そして、Netlify で自動ビルド設定していれば、2分間ほど待てばローカルサーバーで見ているブログ内容が Netlify 上で確認できます。

Gatsby + GitHub + Netlify の凄さがわかりました。

ローカルサーバー上で作成したものが、他の設定には全く触れずに Netlify 上にビルド・デプロイができるのです。これは本当にすごいと思います。