hgot07 Hotspot Blog

主に無線LANや認証連携などの技術についてまとめるブログです。ネコは見る専。

軽量フラットファイル型CMSのGravがよい感じ

研究室やプロジェクトなどのウェブサイトを充実させるのに、さすがにHTML手打ちでは管理的にも見栄え的にも苦しいので、手頃なCMS (Content Management System)がないかと探し始めて、はや三千年。

無茶な要求を並べているわけではないと思うのですが、合致するものが意外にないものですね_('､3｣∠)_

メジャーどころのWordPressも触りかけたのですが、なによりデカいのと、セキュリティ問題が度々あって、これは管理しきれないなと。軽量CMSでは、Typesetter CMSやOneThird CMSなども触ってみたものの、どうも自分にはしっくりこない (あくまで個人の感想です)。面倒くさくなってしばらく投げていたところで、すっかり重くなった腰を上げて触ってみたら良さそうだったのが、Gravでした。

getgrav.org

他のCMSと比べると日本語の情報が少なくて、とっつきにくい印象はありますが、世界的には人気の軽量CMSらしいです。

 

CMSに欲しかった機能・仕様

どのCMSを使おうかと探し始めると、「ぼくのかんがえたさいきょうのCMS」みたいなのが検索にワンサカ引っかかってきて、くじけそうになりませんか……、ぇ、そんなことはない？そうですか。

私がCMSに求めていたのは、以下のような機能や仕様です。数多あるCMSでも、一つクリアするごとに候補がバサバサ減っていきます。もし「お前は俺か？」と思った人は、Gravを試してみることをお薦めしておきます。そうでない人は、この先読む必要はなさそうです。

  • DB不要で、導入が容易な、軽量CMS。
  • XREAのようなウェブホスティングにも簡単に導入できること。
  • 自分以外にもコンテンツをいじらせたいが、サーバにログインさせたくはないので、ウェブ画面上でコンテンツ管理できること。
  • ページの記述はなるべく標準的なフォーマットがよく、できればMarkdown対応のエディタがあるとよい。
  • 自動生成された英数字の羅列などがURLに含まれないように、管理者が手動で命名・固定したURLが使え、他サイトから各ページを参照しやすいこと。
  • トップページをCMS管理下に置いても、既存コンテンツのツリーをできるだけ維持し、共存させられること。(過去に別のCMSを使っていた場合はこの限りではない)
  • ファイルのツリー構造がURLと対応付けられた、フラットファイル型CMSであること。
  • CMSのトップページの位置をサイト内で変更しても、コンテンツ内の内部参照リンクを変更しなくても済むこと。
    (例えば example.com/cms/ から example.com/home/ にリネームするような場合)
  • コンテンツのバックアップがとりやすく、ファイルシステム上でコンテンツの抽出や修正が可能なこと。(コンテンツがDBの奥底で触りにくいようなシステムは論外)
  • 軽量といっても、それなりに拡張性があると嬉しい。
  • 静的コンテンツの生成ができると、なお嬉しい。
  • 外国人でもコンテンツ編集できるように、海外でもメジャーなものだと嬉しい。日本語の情報もそれなりに欲しい。
  • 最近でもきちんとメンテナンスされていること。

どうでしょう。二分木みたいに、候補が急速に減ったのではないでしょうか。

 

インストールは容易 (のはず)

XREAの場合

XREAへの導入は恐ろしいほど簡単でした。

https://getgrav.org/downloads にある Grav Core + Admin plugin のURLをコピーしておき、XREAのサーバにsshでログイン、

 $ wget <コピーしたURL>

を実行すると、バージョン名のファイル (例えば 1.7.9) ができます。これはZip形式なので、

 $ unzip ファイル名

で展開し、ディレクトリ名を適宜変更すれば、ファイル一式の導入は完了です。XREAのコントロールパネルからPHP74を有効にして、展開したディレクトリに対応するURLの後ろに admin/ を付けてブラウザからアクセスすれば、初期設定画面が現れます。

Linuxの場合

Linuxというか、Apache2の場合ですが、環境によって千差万別なので、マイ備忘録だけ残しておきます。

openSUSE Leap 15.2に導入してみましたが、落とし穴が幾つか。

まず、Apache2がインストールされていても、PHP7は別パッケージなので、zypper install apache2-mod_php7 が必要です。他のディストリビューションでは、使うツールが違います (aptなど)。

yastのHTTPD設定ツールは、折角設定したvhost.dを壊してしまうなど、色々と面倒くさかったので、使わない方が無難です。PHP7を有効にするには、/etc/sysconfig/apache2 の中の APACHE_MODULESに php7 を追加します。

バーチャルホストの設定で、PHP7の設定ファイル /etc/apache2/conf.d/mod_php7.conf をIncludeする必要があります。

<Directory ...> セクションの中で、

  AllowOverride All
  Options FollowSymlinks

の設定が必要です。このFollowSymlinksを忘れていたら、管理画面がブランクのままで、かなりの時間を溶かしました_(ﾟ｡3」∠)_

「私はドキュメントをよく読みませんでした」の札を首から下げている……

 

[2023/10/18追記] 別サイトを立ち上げるために久しぶりに初期設定から始めていたら、またもや管理画面がブランクのまま🫠 httpdがUID=wwwrunで動いているので、rootでunzipしていたらダメという話でした (忘れがち)。Gravを展開したディレクトリで chown -R wwwrun:www . して、無事に動き始めました。

 

設定の色々

テーマとカスタマイズ

気に入ったテーマをインストールして、そのまま使ってもよいでしょう。もし少しカスタマイズしたければ、下の「参考になったサイト」を参照して、ベースになるテーマの複製を作り、それをいじるとよいでしょう。(こういった方向性を示してもらえるだけで、ありがたいのです)

[2022/7/18追記]
参考になったサイトが404になっていたので、備忘録のために、自分で書きます。例えばテーマquarkをコピーしてmyquarkを作るには、以下のようにします。

  • usr/themes/quark の中身をごっそり usr/themes/myquark にコピーする。
  • usr/themes/myquark に入って、quark.php と quark.yaml をテーマ名に合わせてリネームする。
  • myquark.php を編集して、class 定義にある名前を myQuark に変更する。
  • blueprints.yaml を編集して、冒頭にある name: を myQuark に変更する。slug: を myquark に変更する。

タイトルの設定

真っ先にサイトのタイトルを変更したいと思いますが、これは管理画面のスパナのアイコンから、Configuration - Siteで設定できます。

ロゴとfaviconの設定

ヘッダーがGravのロゴのままでは恥ずかしいので、変更します。これは、テーマ設定の中にある Header Defaults, Custom Logoに画像をアップロードすれば変更できます。Mobile Custom Logoにも画像を入れておかないと、スマホで閲覧したときにGravのロゴのままになってしまいます。

ブラウザが使うアイコン、つまり favicon.ico も、すぐに変更したいでしょう。user/themes/<テーマ名>/images/favicon.png があるので、32×32画素のPNGファイルを作って、上書きすればよいようです。管理画面でキャッシュをクリアして反映。別の名前のファイル名にしたければ、templates/partials/base.html.twig を編集して、ファイル名を変更すればOK。(管理画面のどこかに、faviconを変更するところがあるかもしれませんが、未確認)

既存ファイルの同居

Grav管理下のディレクトリに、適当にサブディレクトリを掘ったりして既存のHTMLファイルなどを置けば、従来のURLのままでアクセスできるようです。Gravのファイル名やディレクトリ名とぶつかるとダメですが。

フォントを大きくする [2022/7/18追記]

標準のスタイルではフォントが小さすぎる気がします。少し大きくするために、user/themes/myquark/css/custom.css に以下のように書いてみました。Gravとブラウザのキャッシュをクリア (そのページだけリロード) しないと反映されません。

@media screen and (min-width: 480px) { html { font-size: calc(18px + 4 * ((100vw - 480px) / 800)); } }
@media screen and (min-width: 1280px) { html { font-size: 24px; } }

 

参考になったサイト

以下のサイトが参考になりました。

 

感想

日数も浅く、まだあまり使い込んでいないのですが、率直な感想は「ちょっと動作がトロいかな」といった程度です。静的コンテンツはまだ試していません。

 

終