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

この記事はQiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。

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)など、色々設定できるので試してみると良いかと思います。

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