Help us understand the problem. What is going on with this article?

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

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

Kento75
クラウドエンジニア崩れのサーバーサイドエンジニア ①FE、AWS SAA持ち ②SpeakerDeck(https://speakerdeck.com/kento75)
https://overreact.tk
dmmcom
総合エンタテイメントサイト「DMM.com」を運営。会員数は2,900万人を突破。動画配信、FX、英会話、ゲーム、太陽光発電、3Dプリンタなど40以上のサービスを展開。沖縄での水族館事業参入、ベルギーでのサッカークラブ経営など、様々な事業を手掛ける。また2018年より若手起業家の支援を強化、「DMM VENTURES」による出資や、M&Aなどを積極的に展開している。
https://dmm-corp.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした