【1分でできる】無料のブログ作成方法②:ブログ更新

こんにちは!うしじです。

前回、1分でブログを作成する方法を書きました。今回は、作成したブログの更新について書きます。 ここから先は、ちょっと時間がかかるかもしれません。(30分くらい)

今回ブログ作成に用いたGatsbyスターター:gatsby-starter-delogでは、Netlify CMSが使えるように設定されていますので、それを用いてブログの更新を行います。
Netlify CMSは、WordPressのようなブログを更新するためのツールだと思ってください。



事前設定

Netlify CMS アクセス用のURL更新

Netlify CMSからブログを更新する際に、更新のデータは下記のように流れます。

  • Netlify CMS → GitHub(Gatsby) → Netlify

前回ブログを作成する際には、GitHubにコミットされたデータをNetlifyが自動で取得してブログをデプロイ出来るように、NetlifyからGitHubへのアクセスを許可しました。

今回は、Netlify CMSがGitHubのデータを更新出来るように、ブログデータの置き先であるGitHubレポジトリのURLをNetlify CMSに伝えます。

まずは、ブログを作成したGitHubのレポジトリを開き、下記図のようにgatsby-starter-delog/static/admin/ へ移動し、config.ymlを開きます。

Open config.yml


config.ymlは、下記のように、backend: repo: の箇所を"W3Layouts/gatsby-starter-delog"から"username/gatsby-starter-delog"に更新します。usernameには、自身のGitHubのusernameを入れてください。私の場合は、"ushiji"です。
更新したら、ページ下部の"Commit changes"を押しましょう。

Open config.yml


Github OAuth Client IDの作成

Netlify CMSへのログインには、GitHubアカウントを用います。そのためにはまず、GitHub OAuth Appを作る必要があります。

GitHub Developer Settingsへ移動し、"New OAuth App"を押してください。

New OAuth App.yml


Register a new OAuth applicationには、以下のように入力し、"Register application"を押してください。

Register New OAuth App


これで、GitHub側のOAuth appの作成は完了です。以下の画面が表示されると思います。
後ほど、"Client ID"と"Client Secret"を使います。

Client ID and Secret


Netlify CMS Adminへアクセス

Netlifyの作成したブログの"Settings" > "Access Control"へ移動し、OAuthの"Install provider"を押します。

Netlify Settings page
Netlify OAuth


"Install authentication provider"の画面が開きますので、先ほどGitHubのページで作成したOAuth appの"Client ID"と"Client Secret"を入力し、"Install"を押してください。

Netlify OAuth


これでOAuthの設定完了です!



次にNetlify CMSにアクセスします。"ブログのアドレス"/admin/ にアクセスすることでNetlify CMSを開くことができます。 私のブログの場合は、https://modest-torvalds-27323c.netlify.app/admin/ です。

Netlify CMS access


"Login with GitHub"のボタンを押して、Authorize、GitHubのパスワードを入力すれば、完了です。

Netlify CMS login


Netlify CMSにログインできました!

Netlify CMS login success




ブログ更新

タイトルやmeta descriptionの更新

"Settings"の"Config"をクリックすると、サイトのタイトルやmeta descriptionを更新するためのページに遷移します。

Netlify CMS admin settings


各項目を更新し、"Publish"すれば、ブログに反映されます。

Netlify CMS admin settings


ブログ記事の追加

記事を追加するには、"Blog"の"New Blog"をクリックします。

Netlify CMS new blog


各項目を入力し、"Publish"すれば、新しい記事が追加されます。

Netlify CMS new blog


これでブログの更新が完了です!
実際のブログは、こちらからアクセスできます。

Finished blog update




次回は、独自ドメインの設定について記載したいと思います。


Gatsby ブログ作成記事一覧




Gatsby.jsでのサイト構築については、日本語の情報源が少ないのですが、6月に下記の書籍が発売されるようです。


Amazon | Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)

(楽天市場の場合はこちら)