Edited at

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ディレクトリを削除して、もう一度インストールとアプリの起動を行うこと。)

スクリーンショット 2019-03-19 21.47.38.png


GithubへのPush

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

スクリーンショット 2019-03-19 21.54.26.png

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

スクリーンショット 2019-03-19 22.01.09.png

アプリケーションをPushする前に、既存の.gitディレクトリを削除しておきます。

既存の.gitを削除後、新規で、git設定ファイルを作成します。

# プロジェクトルートで削除を実行

rm -rf .git

# 新規でgit設定ファイルを作成
git init
git remote add origin git@github.com:Kento75/gatsby-demo-app.git

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

git add .

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

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

スクリーンショット 2019-03-19 22.09.51.png


Netlifyのセットアップ

Netlifyにアクセスしてユーザー登録を済ませましょう。

サードパーティーまたは、メールでの登録ができます。

スクリーンショット 2019-03-20 20.59.13.png

スクリーンショット 2019-03-20 21.01.19.png

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

スクリーンショット 2019-03-20 21.03.06.png

スクリーンショット 2019-03-20 21.04.40.png

スクリーンショット 2019-03-20 21.05.40.png

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

スクリーンショット 2019-03-20 21.08.40.png

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

スクリーンショット 2019-03-20 21.10.33.png

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

スクリーンショット 2019-03-20 21.12.34.png

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

スクリーンショット 2019-03-20 21.15.07.png

Netlify公式のテンプレートには、netlify.toml という設定ファイルがすでに用意されているので、

その設定値が反映されます。このままデプロイできるので、「Deploy site」をクリックします。

スクリーンショット 2019-03-20 21.17.33.png

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

スクリーンショット 2019-03-20 21.20.08.png

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

スクリーンショット 2019-03-20 21.23.08.png

※ トラブルシューティング

今回のリポジトリでは、デプロイに失敗しないとは思いますが、別のテンプレートや自作のアプリケーションの場合、Nodeのバージョン違いで失敗することがあります。

対処としては、NetlifyのNodeのバージョンをローカルに合わせるという方法があります。

ホーム画面から「Deploys」、「Notifications」の順に選択します。

スクリーンショット 2019-03-20 21.36.30.png

スクリーンショット 2019-03-20 21.37.53.png

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

スクリーンショット 2019-03-20 21.40.14.png

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


スクリーンショット 2019-03-20 21.24.21.png

サイトのURLはランダムに設定されてしまうので、編集します。

ホーム画面の「Domain settings」を選択します。

スクリーンショット 2019-03-20 21.28.10.png

ドメイン設定画面に遷移します。

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

スクリーンショット 2019-03-20 21.29.17.png


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

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

「Settings」を選択します。

スクリーンショット 2019-03-20 21.48.38.png


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

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

スクリーンショット 2019-10-14 7.36.18.png

スクリーンショット 2019-10-14 7.36.35.png

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

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

スクリーンショット 2019-03-19 21.47.38.png

「Sign up」を選択して、ユーザー名、メールアドレス、パスワードを入力後、「Sign up」ボタンをクリックします。

※ サインアップ確認のメールが設定したメールアドレスに送信されます。

スクリーンショット 2019-03-19 21.47.38.png

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

スクリーンショット 2019-03-19 21.47.38.png

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

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

スクリーンショット 2019-03-19 21.47.38.png

スクリーンショット 2019-03-19 21.47.38.png


記事の投稿

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

スクリーンショット 2019-03-19 21.47.38.png

スクリーンショット 2019-03-19 21.47.38.png

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

スクリーンショット 2019-03-19 21.47.38.png

スクリーンショット 2019-03-19 21.47.38.png

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

スクリーンショット 2019-03-19 21.47.38.png

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

スクリーンショット 2019-03-19 21.47.38.png

補足

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

スクリーンショット 2019-03-19 21.47.38.png

以上で、基本的な設定は完了です。

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

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

サイトはこちら