Pages CMS:設定ファイル一つですぐに使える、静的サイト向けのお手軽CMS

ウェブサイトやブログを作るのに WordPress を使うこともできますが、保守管理の手間を軽減したり手軽さを重視しして静的サイトジェネレーターを使うケースも多くなっています。このブログも静的サイトジェネレーター Hugo を利用して作られていますが、Github に Markdown ファイルと関連画像をプッシュするだけですぐにブログが更新されるので管理はとても楽ですし、ただのHTMLサイトが構築されるのでどんなにアクセスがあっても問題ありません。

その一方で、WordPress は高機能な CMS としてブラウザやスマートフォンのアプリから直接記事を直感的に編集したり、画像などのアセットを管理できるというメリットもあります。静的サイトジェネレーターにも似たような CMS を組み込むことは可能ですが、それなりに手間がかかることが多かったり、追加の費用になってしまうのが悩みでした。

しかしそうした悩みを一挙に解決する手軽な CMS が登場しました。まだまだ新しいプロジェクトですが、すでに多くのファンを獲得しつつある Pages CMS です。

設定用の yml ファイルをひとつ作るだけ

Pages CMS が(現時点で)想定しているのは、1. Hugo, Gatsby などのような静的サイトジェネレーターを使用していること、2. Github でファイルを管理していること、の2点です。

この2点をクリアしていれば、Github上に Pages CMS が参照するための yml 設定ファイルを一つ作れば、あとは記事をブラウザ上で執筆し、Markdownファイルや画像ファイルをGithubに保存することができます。

使用するには、まず Pages CMS に Github アカウントでログインし、管理させたいリポジトリ(複数可能)を指定します。すると、どのようなサイトなのかを設定するための yml ファイルを一つだけ作るように促されます。例えばこんな感じです:

settings:
	content:
		merge: true
content:
  - name: blog
	type: collection
	label: ブログ記事
	path: content/blog
	subfolders: true
	filename: index.md
	fields:
	    - { name: title, label: 記事タイトル, type: string, required: true }
	    - { name: featured_image, label: トップ画像, type: image, required: true }
	    - { name: date, label: 日付, type: date, required: true, 
	        options: { time: true, format: yyyy-MM-dd'T'HH:mm:ss'+09:00'} }
	    - { name: body, label: 本文, type: rich-text }
	    - { name: categories, label: カテゴリ, type: string, list: true }
	    - { name: tags, label: タグ, type: string, list: true }
	    - { name: draft, label: 下書き, type: boolean, default: true }
media:
  - name: images
	label: 画像
	input: assets/img
	output: images

Jekyll を知っている人ならばなじみのある内容かもしれませんが、そんなに難しくはありません。たとえばここでは以下のようなことを設定しています:

  • blog という名前のセクションをつくります。ホームページのように単一のファイルではなく、いくつも記事を追加するので type: collection にしています
  • 記事ファイルはリポジトリの content/blog をルートディレクトリとするけれども。サブフォルダを作ったりすることも許可する(付加にして、全ての md ファイルが一つのディレクトリにあるフラットなサイトも可能)
  • 記事に含まれるのは、title, featuredimage, date, categories, tags, draft といったフィールド
  • それぞれ type: string とか type date でどんな型なのかを指定。required を使って必須かどうかも指定
  • 結果は index.md というファイルに格納。もちろん、日付.md などに設定することも可能

また、画像をアップロードするためのアセットフォルダが media 欄で定義されており、こちらでは:

  • リポジトリの assets/img をアセット置き場とする
  • 出力する mdファイル内では images というパスを使って画像リンクをつくる

ほどのことをしています。こうした設定ファイルの結果、次のようなコンテンツ編集画面が表示されます。ちゃんと「ブログ記事」「記事タイトル」といったように label 設定で指定した日本語でフィールドが表示されているのがわかるでしょうか。

{ . }

この記事を保存すると、以下のような Frontmatter が挿入された index.md が作成されます。「記事タイトル」の入力が「title」に、featured_image 欄や、draft 欄がそれぞれ対応しているのがわかると思います。

---
title: テスト投稿
featured_image: images/612.jpg
date: 2025-06-29T15:23:00+09:00
draft: true
---
本文をここに書く

保存された記事はもう Github に追加されていますので、すぐにデプロイ可能です。私の場合、ファイルが新しく追加されるか Issues が発行されると Github Actions で自動的に Hugo サイトがつくられ、レンタルサーバーにブログが rsync でデプロイされる仕組みになっていますので、Pages CMS だけでサイト管理が可能になりました。

もっと細かい設定も

Pages CMS はまだまだリリースされたばかりの若いプロジェクトで、機能が足りなかったりバグが残っている部分もあります(私も一つ見つけて修正してもらったりしました)。しかし簡単で、十分の機能で、勢いがありますので、きっとすぐに人気を集めることでしょう。

静的サイトでブログを管理したいけれども、ブラウザのなかで記事を執筆する手軽さも追求したいというひとは、ぜひ使ってみてください。

Author Image

2011年アルファブロガー・アワード受賞。ScanSnapアンバサダー。ブログLifehacking.jp管理人。著書に「ライフハック大全」「知的生活の設計」「リストの魔法」(KADOKAWA)など多数。理学博士。