SONICMOOV Googleページ

Netlify CMSでCMSが使える静的なサイトを作ってみた

Netlify CMSでCMSが使える静的なサイトを作ってみた

  • このエントリーをはてなブックマークに追加

新入りフロントエンドエンジニアのまめ太です。
静的サイトジェネレーター群雄割拠の時代、ホスティングサービスにも選択肢がたくさんあります。今回は、静的サイトでCMSが使えるようになるNetlify CMSと連携するNetlifyを使って、静的サイトを作ってみます。

目次

Netlifyとは?

Netlifyは、GitHubやGitLabのリポジトリを静的サイトとして公開してくれるホスティングサービスの一つです。HTTP/2に対応し、独自ドメインやSSLなどが無料で使えて高機能ですが、一番注目すべき機能は、リポジトリに新たなプッシュがあると、webhookを受け取り、自動で更新されたサイトをビルド、デプロイしてくれる機能です。ローカルでビルドしたり、他のCIサービスを探したりする必要はありません。
https://www.netlify.com/

Netlify CMSとは?

Netlify CMSは、Netlifyによってホスティングされている静的サイトにCMS機能を付与することができるオープンソースのReactアプリです。GitHub APIを使って編集内容をリポジトリにプッシュするラッパーとして動作します。v1.9でGitLabにも対応し、v2.0でBitbucketに対応する予定になっています。
https://www.netlifycms.org/

サイトを作ってみる

静的サイトジェネレーターにはHugoを使います。Go製のHugoは静的サイトジェネレーターの中でJekyllに次いでGitHubスター数が多く(2018/7現在)、学習コストが低いため導入しやすいです。ビルド速度が非常に速いのが特徴です。
https://github.com/gohugoio/hugo

Hugo + GitLab + Netlify + Netlify CMSの組み合わせで静的サイトを生成します。
今回はクイックスタートのテンプレートを使用します。
https://www.netlifycms.org/docs/start-with-a-template/
にアクセスして、Hugo Site Starterの方のDeploy to netlifyのボタンをクリックします。
Netlify CMSの使い方

GitLabにログインして、NetlifyのAuthorizationを行います。
GitLabにログイン

NetlifyのAuthorization

Netlifyに移動するので、作成するリポジトリの名前を決めて、サイトを生成しデプロイします。このとき、GitLabに生成されるリポジトリはProject visibilityがprivateの設定で生成してもらえます。

Netlifyでサイトを生成しデプロイ

生成されたサイトは以下のようになります。
https://stoic-carson-5c0c9b.netlify.com
Netlifyで生成された静的サイト

使われているテンプレートがsmall business templateということで、コーヒーのKaldiのサイトになっています。
https://github.com/netlify-templates/kaldi-hugo-cms-template

CMS機能を使う

サイトを生成するとNetlifyのメールアドレスにCMSの招待メールが来るので、Accept the inviteのリンクからパスワードを設定します。
NetlifyからCMSの招待メール

NetlifyのCMS機能を使う

これでGit GatewayでGitLab APIに接続し、CMSからリポジトリに変更を加えることができるようになります。以降は[サイトURL]/adminからCMS画面に入ることができます。CMSで行った変更はサイトのリポジトリにプッシュされ、Netlifyが自動で更新分をビルドしてデプロイしてくれます。

Netlify CMSの管理画面

etlify CMSのエディター画面

Netlify CMSのエディター画面には、EditorComponentなどで、使用するテーマに合わせて機能を追加することもでき、カスタマイズ性もあります。
https://www.netlifycms.org/docs/custom-widgets/

まとめ

今回はテンプレートを使ってあっという間にCMS機能つきのサイトを生成しました。別のテーマやテンプレートでサイトを作りたい場合は、生成されたリポジトリを編集するもよし、あらかじめ用意した静的サイトで以下の「Add Netlify CMS to Your Site」の解説からCMS機能を追加するのもいいと思います。
https://www.netlifycms.org/docs/add-to-your-site/

Netlify CMSは今も開発が進められています。面白いプロジェクトなのでぜひ今後も注目してみてください。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まめ太(フロントエンドエンジニア)

フロントエンドエンジニアです。縮小する某ゲーム業界を憂いています

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation