Github +Gatsby + Netlify CMS で個人ブログを公開する

Gatsby と Netlify CMS を使って、静的サイトを作ってみます。

Netlify公式から、Gatsby + Netlify CMSのテンプレートを使用します。(テンプレート)

アプリケーション準備

# テンプレートをローカルにクローン
git clone https://github.com/netlify-templates/gatsby-starter-netlify-cms.git gatsby-demo-app

# モジュールをインストール
npm install

# 動作を確認
npm start

アプリの起動後、 localhost:8000にアクセスすると、ブログアプリが表示されます。
(アプリが起動しない場合、モジュールのインストールに失敗しているので、node_modules、.cache、publicディレクトリを削除して、もう一度インストールとアプリの起動を行うこと。)

GithubへのPush

まずは、Githubにリポジトリを作成します。

リポジトリ名はなんでもいいです。

アプリケーションをPushする前に、既存の.gitディレクトリを削除しておきます。
既存の.gitを削除後、新規で、git設定ファイルを作成します。

# プロジェクトルートで削除を実行
rm -rf .git

# 新規でgit設定ファイルを作成
git init
git remote add origin [email protected]:Kento75/gatsby-demo-app.git

git設定ファイルの作成後、GithubへPushします。

git add .
git commit -m "first commit"
git push -u origin master

リポジトリにコミットが反映されていることを確認しましょう。

Netlifyのセットアップ

Netlifyにアクセスしてユーザー登録を済ませましょう。
サードパーティーまたは、メールでの登録ができます。

ログイン後、サイト公開を行うGithubリポジトリとの連携を行います。

対象のリポジトリを所有するユーザーまたは、Organizationを選択しましょう。

今回は、対象のリポジトリのみを選択します。

Push、Pull Request権限を付与します。（Netlify CMSからの記事投稿はPushとなるため）

権限付与が完了すると、対象のリポジトリが表示されるので選択します。

Netlify公式のテンプレートには、netlify.toml という設定ファイルがすでに用意されているので、
その設定値が反映されます。このままデプロイできるので、「Deploy site」をクリックします。

ホーム画面に遷移後、ビルド実行結果が赤枠内に表示されます。クリックすると、詳細画面に遷移します。

デプロイが完了したら、「Preview deploy」をクリックして、サイトを確認できます。

※ トラブルシューティング
今回のリポジトリでは、デプロイに失敗しないとは思いますが、別のテンプレートや自作のアプリケーションの場合、Nodeのバージョン違いで失敗することがあります。
対処としては、NetlifyのNodeのバージョンをローカルに合わせるという方法があります。
ホーム画面から「Deploys」、「Notifications」の順に選択します。


「Build environment」にNodeのバージョンを指定することで、ビルドに使用するNodeを固定できます。

ここまでトラブルシューティング

サイトのURLはランダムに設定されてしまうので、編集します。
ホーム画面の「Domain settings」を選択します。

ドメイン設定画面に遷移します。
「Edit site name」を選択して、好きなドメイン名をつけましょう。(.netlify.comは変更できません)

記事の投稿機能の確認と拡張

まずは、管理者画面にログインする為の設定を行います。
「Settings」を選択します。

管理者画面のログイン機能設定

設定画面の 「Settings」 -> 「Identity」 -> 「Enable Git Gateway」 をクリックします。

※ 管理者画面のログインはGoogle Chrome を使用しています。

「https://<ブログのURL>/admin」にアクセスすると、画面中央にログイン用ボタンが表示されるので、クリックします。

「Sign up」を選択して、ユーザー名、メールアドレス、パスワードを入力後、「Sign up」ボタンをクリックします。
※ サインアップ確認のメールが設定したメールアドレスに送信されます。

送信されてきたメールのリンクをクリックすると管理者画面に遷移します。

以降、ログインは先ほど作成したユーザーで行うことになります。

以降、ユーザーの作成を禁止する設定を行いましょう。

記事の投稿

新たに記事を作成する場合、管理者画面から「New Blog」ボタンをクリックすることでworkpressっぽい記事作成画面に遷移します。

記事の投稿(GithubにPushすることになります)は、「Publish」をクリック、「Publish now」をクリックすると記事の投稿が完了します。

「https://<ブログのURL>」にアクセスして、記事一覧を確認しましょう。

記事の内容も確認しましょう。

補足
記事の投稿は、GithubへのPushになるため、リポジトリのcommitログが１つ増えます。

以上で、基本的な設定は完了です。
Netlifyのホスティングには、ドメインの設定やNetlify-Lambda(AWS Lambda)など、色々設定できるので試してみると良いかと思います。

今回作成したアプリケーションのリポジトリはこちら
サイトはこちら