WordPress

Netlify CMS(Hugo)でMarkdownで記述可能な無料ブログを構築する(構築編)

投稿日:

CMS(コンテンツマネジメントシステム)としては、WordPressが有名です。当サイトもAWSのLightsailと呼ばれるサービスを使用して、WordPressを構築しています。Lightsailについては、Amazon Lightsailで月5ドルから始めるWordPress(独自ドメインでのメール送受信) – OTTAN.XYZでご紹介していますので、そちらも参照してください。なお、投稿後に早速、月々5ドルから3ドルに料金改定が行われています。

WordPressは、PHPとMySQLによる動的サイトです。コンテンツへのアクセス時にサーバサイドでPHPとMySQLが連携し、画面に表示する内容を動的に生成後、レスポンスを返す仕組みとなっています。そのため、「動的に生成する箇所」がボトルネックとなり表示が遅くなる可能性があります(表示を早くするためのキャッシプラグインが各種用意されています)。

それに対して、Netlify CMSと呼ばれるCMSは、静的ファイルの配信が目的です。静的ファイルは、PHPやMySQLのようなプログラミング言語やデータベースを必要とせずに、ただ単純にあらかじめ準備されているファイルを返すだけなので、動的に生成するサイトとしてレスポンスが向上します。

これだけ聞くと、Netlify CMSは優秀に思えますが、WordPressで用意されている豊富なテーマやプラグインを使用したカスタマイズを行うためには、自分でテーマ自体を作成(用意されているテーマもあります)する必要があり、初期構築時の敷居は若干高くなります。また、テーマ編集にはGitを使用することが前提となりますので、そちらの知識も必要になります。

とは言え、Netlifyが用意している仕組みを使用すれば、サイトをただ構築するだけであれば、上記のような構造を理解する必要はなく、画面の指示に従って構築できるので、お試しする価値は十分にあると言えます。

Netlify CMSについて

WordPressと、Netlify CMSを用いて構築した場合のメリット、デメリットを見ていきましょう。WordPressでは、PHPと呼ばれる動的サイトを生成するための言語、およびデータベースとしてMySQL(または互換のデータベース)が必要となりますが、Netlifyは静的サイトの配信を対象としているため、このようなものは必要ありません。端的に言えば、静的な<html>ファイル一つあれば良いのです。

メリット

Netlify CMSを使用してCMSを構築するメリットとしては、以下の点が挙げられます。無料枠で使用可能ということ、標準でHTTPS対応等、Netlifyを使用するだけでも大きなメリットを得ることができます。

  • 標準でHTTP/2対応(並列リクエスト。対応ブラウザのみ)
  • 標準でHTTPS対応(Let’s Encryptによる自動更新)
  • Netlify自体のCDNサービスの恩恵を受けられる
  • 静的サイトであるため表示が高速(CDNのキャッシュも有効であるためより高速)
  • 無料枠から使用可能

デメリット

では、Netlify CMSを使用した場合のデメリットは何でしょうか。

  • GitHub、GitLabなど、Gitによる運用の知識が必要
  • WordPressで使用していたプラグインが使用できない
  • WordPressで蓄積したナレッジをそのまま適用できない

デメリットというよりは、これまでWordPressのエコシステムで構築されていた部分を、ある程度新しい知識を習得した上で運用する必要があるよということです。これは、WordPressで最初にテーマやプラグインをカスタマイズする必要性が生じた場合にも当てはまることですね。

Netlify CMSによる静的サイトを構築してみよう

必要なのは、GitHubのアカウントのみです。まずは、Welcome to Netlify | Netlifyにアクセスして、GitHubアカウントでサインインしましょう。GitLab、Bitbucketのアカウントを持っている場合はそちらを使用しても構いません。基本的な使用方法に違いはありません。なお、初回サインイン時は、各サービス認証時に権限の利用を求められますので内容を確認して承諾しておきましょう。

以上で、Netlify側の準備は完了です。今回は、あらかじめNetlifyに用意されているスターターキット(WordPressのデフォルトのテーマのようなもの)を使用して構築します。Start with a Template | Netlify CMS | Open-Source Content Management Systemにアクセスします。静的サイトジェネレータとして、Hugo(Go言語)、Gatsby(React/JavaScript)、Middleman(Ruby)が用意されています。お好きな言語を選択してください。この中で比較的ビルドが高速なHugoを今回は選択します。ここでいうビルドとは、あらかじめ用意されたファイル群から、配信に必要な静的ファイルを生成することを表しています。

「Deploy to netlify」をクリックします。

「Connect to GitHub」をクリックします。

最後にGitHubに作成されるリポジトリの名称を決めます。デフォルトでは「one-click-hugo-cms」となっています。ここではいったんこの名前のまま作成します。あとで変更するのは色々と面倒なので、リポジトリの名称はしっかりと決めておきましょう。

最初にGitHub上にリポジトリが構築され、GitHub上の「master」ブランチからNetlifyによる自動デプロイ(静的サイトジェネレート)が行われ、Netlify上に静的サイトが構築されます。デプロイされるまで、初期の段階では数秒かかると思われます。

しばらくするとデプロイが完了し、NetlifyによるCMS構築が完了しました!URLは、「https://agitated-jackson-5e792f.netlify.com/」のようなランダムな英数字の文字列が付与されます。デフォルトで「https」になっています。また、このランダムな英数字は自由に変更することができます。また、もちろん独自ドメインを使用して構築することも可能です。「Site Settings」「Domain Settings」から変更できますが、今回はデフォルトのまま進めます。

デプロイが完了すると、Netlifyに登録済みのメールアドレス宛に、構築したWebサイトへの招待メールが送られてきますので、そちらのメール内に記載されている「Accept the invite」リンクをクリックしましょう。

すると、ダッシュボードにログインするための管理者用パスワードを設定するためのダイアログが表示されますので、任意のパスワードを入力しましょう。以降、Netlifyに登録済みのメールアドレス(GitHubのメールアドレス)と、このパスワードでダッシュボードにアクセスできるようになります。直接ダッシュボードにアクセスするためには、今構築したURLの末尾に「/admin」を付与してアクセスします。今回の場合は、「https://agitated-jackson-5e792f.netlify.com/admin」となります。

早速、新しい記事を投稿してみましょう!ダッシュボードはもちろんカスタマイズできるのですが、今回はスターターキットで用意されているものをそのまま使用します(カスタマイズにはNetlify CMSおよびテーマに使用されているフレームワークの知識が必要です)。「New Post」をクリックします。

WordPressと同様にリッチテキスト(HTML)による投稿のほか、デフォルトで「Markdown」形式にも対応していることがわかります。

せっかくなので、「Markdown」形式を使用してみました。適当に入力して「Publish」します。

WordPressでは、投稿した瞬間に投稿が表示されますが、Netlify CMSは、投稿のたびに静的HTMLの生成があるため、反映までに多少時間がかかります。しばらくすると、デフォルトのテーマ(コーヒー店?)に記事が追加されました。

まとめ

今回は、Netlifyを用いてCMSを構築する方法をご紹介しました。Amazon Lightsailで月5ドルから始めるWordPress(独自ドメインでのメール送受信) – OTTAN.XYZと比較しても、無料枠で利用可能、1クリックで構築可能という点では、WordPressと比較しても簡単に構築できるかと思います。テーマのカスタマイズについては、使われているフレームワークによって異なりますので、次回以降ご紹介していきたいと思います。

-WordPress
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。