CMS を10分で構築！無料で簡単な Netlify CMS を使ってみよう ｜ SiTest (サイテスト) ブログ

今やブログを持つならほとんどの方が CMS を導入しているのではないのでしょうか？
CMS で有名なのは WordPress ですよね。

ただ、 WordPress を導入するには、レンタルサーバーやドメインを用意しないといけなかったり、レンタルサーバーによっては PHP や MySQL をインストールしないといけません。

また、エージェントによっては、 レンタルサーバーから WordPress の環境まで用意してくれているところもありますが、費用が発生したりします。

今回は、そんな手間や費用をかけず、 CMS を構築できる「 Netlify CMS 」を使っていきます。

高機能ホスティングサービスの Netlify にのせて、使っていきます。

そのままですが、高機能ホスティングサービスの Netlify が提供している CMS です。

そもそも、 Netlify を知らない方のために少し説明すると下記のようなことが無料でできるホスティングツールです。

・簡易に Let’s Encrypt で取得した証明書をドメイン名に結びつけることができる
・簡易にグローバルな CDN を導入できる
・簡易に独自ドメインを設定できる

こちらを使うことにより、レンタルサーバーを用意したり、PHPやDBをインストールする必要もありません。

詳しくは下記の記事を参考にアカウントを作成してみてください。

Netlify 初心者必見！ Bitbucket 上のコードをビルドして静的サイトを公開してみる

それでは、実際に使っていきましょう。
今回は Netlify CMS のチュートリアルをすすめていきます。

また、既に Netlify アカウントと GitHub アカウントを持っているものとしております。

まずは、下記のURLに遷移してみてください。

https://www.netlifycms.org/docs/test-drive/

上記のような画面がでますので、
「 Deploy to netlify 」をクリックしてください。

Welcome to Netlify! とでますので、下にスクロールして、
「 Connect to GitHub 」をクリックして、 GitHub と連携しましょう。

連携が完了すると、レポジトリの名前を決めれるようになりますので、お好きな名前を記入し、 「 Save & Deploy 」をクリックしましょう。

勝手に GitHub のレポジトリを作成して、デプロイ作業を行ってくれます。

次に GitHub の認証を行っていきます。
この作業を怠ると、 CMS の管理画面に入ることができません。

まず、下記のリンクに遷移してください。

https://github.com/settings/developers

GitHub の認証ページに飛びますので、
下記のように記入していってください。

「 Authorization callback URL 」以外は変更しても問題ありません。

「 Register application 」をクリックすると、Client ID と Client Secret ができあがりますので、こちらをコピーしておいてください。

次に Netlify 側の設定ですので、デプロイしている画面に戻ります。

上のタブに「 Access 」とありますので、クリックします。

スクロールすると「 Install provider 」というボタンがありますので、クリックします。

先程の Client ID と Client Secret が記入できるフォームがでてきますので、記入して「 Install provider 」をクリックします。

プロバイダーが追加されると完了です。

それでは、デプロイが完了していると思いますので、確認しに行きましょう。

Settings タブからURLをクリックしましょう。

できあがってますね。

現在のURLに /admin を追加してみましょう。

このような画面がでますので、「 LOGIN WITH GITHUB」をクリックして認証を通しましょう。

ログインできましたら、完了です。
ブログページに反映されますので、記事などを追加してみてください。

これで、 CMS 構築完了です。

いかがでしたでしょうか？

今回はチュートリアルを進めていきましたが、他にもカスタムドメインを設定したり、ブログを SSL 化したりとさまざまな設定が無料でできます。

Hugo など静的サイトジェネレータと組み合わせて、 Git 上からも CMS 上からも管理できるようにするのもいいですね。

Hugo の使い方に関してはこちらの記事を参考にしてみてください。

それでは、 Netlify CMS ライフを満喫してください。