しばたテックブログ

気分で書いている技術ブログです。

Grav CMSを試してみる

正直作業記録です。
あまり役に立つことは無いかもしれません。

はじめに

個人的にちょっとしたサイトを作りたくなり*1、Markdownを扱えるフラットファイルCMSを探してみたところ、Grav CMSが良さそうだったので試してみることにしました。

getgrav.org

CMSには特段詳しくないでですが、今回Gravを選定した理由としては、

  • Markdownを扱える(必須)
  • フラットファイル型である(必須)
  • コードのシンタックスハイライトができるプラグインがある(必須)
  • 公開されているテーマのデザインが良い
    • 特にLearn2テーマが作りたいサイトにぴったりだったので

あたりになります。

今回はとりあえずローカル環境(Windows 10)で動かすところまでやってみます。

Grav CMSを試してみる

1. PHPのインストール

GravはPHP製ですので、まずはPHPをインストールします。

現在のバージョン(Ver.1.1.17)ではPHP 5.5.9以上が必要です。
いまのところバージョンの縛りもありませんので、私は最新のPHP 7.1.2を使うことにします。

公式サイトからPHP 7.1.2をダウンロードし、適当なディレクトリに展開します。

今回はC:\PHP\7.1.2\に展開しました。
あとはこのディレクトリにPATHを通せばOKです。
私はPHPを常用しないので必要な時だけPATHを通すことにしました。 

# PHPのインストール
Invoke-WebRequest -Uri "http://windows.php.net/downloads/releases/php-7.1.2-Win32-VC14-x64.zip" -OutFile ".\php-7.1.2-Win32-VC14-x64.zip"
Expand-Archive ".\php-7.1.2-Win32-VC14-x64.zip" -DestinationPath "C:\PHP\7.1.2\"

# PHPは常用しないので利用時だけPATHを通すことにする
$env:PATH += ";C:\PHP\7.1.2\"

また、環境によってはVC14 Runtimeのインストールが必要になりますので、必要があればインストールしてください。

2. php.iniの設定

Gravでは以下の拡張機能を使用するため、php.iniの設定が必要です。

  • gd
  • mbstring
  • curl
  • openssl

今回はとりあえずphp.ini-developmentをコピーし、以下の箇所を修正しました。

; php.ini

; extension_dirのコメントを解除
extension_dir = "ext"
; 以下の拡張のコメントを解除し有効化
extension=php_curl.dll
extension=php_gd2.dll
extension=php_mbstring.dll
extension=php_openssl.dll

3. Gravのインストールと起動

GravのインストールはZipをダウンロードして展開するだけです。
コア機能のGRAV COREと管理者用UIのついたGRAV CORE + ADMIN PLUGINの二種類選べますが、今回はGRAV COREにします。

# 別に手動で解凍しても構いませんが折角なので...
Invoke-WebRequest -Uri "https://getgrav.org/download/core/grav/1.1.17"-OutFile ".\grav-v1.1.17.zip"
Expand-Archive ".\grav-v1.1.17.zip" -DestinationPath ".\grav-v1.1.17"

今回はPHPのビルトインウェブサーバーを使ってGravを起動します。
先ほどのZipを展開したフォルダに移動し

php -S localhost:[ポート番号] system/router.php

を実行すればOKです。

実行例)

cd ".\grav-v1.1.17\grav\"
php -S localhost:8000 system/router.php

実行結果はこんな感じ。

f:id:stknohg:20170219222423p:plain

この状態でhttp://localhost:8000/にアクセスすると以下の様になります。

f:id:stknohg:20170219222504p:plain

ちなみに設定にエラーがあると以下の様になり、エラーを教えてくれます。
(これはgd拡張を有効にするのを忘れていた際に出たエラーです)

f:id:stknohg:20170219222611p:plain

これでGravのインストールは完了です。

あとは\user\配下の各設定を修正すれば自分の好きなサイトを作ることが出来ます。
コンテンツを修正するだけなら\user\pages\配下のmarkdownを修正するだけでOKです。

4. プラグインのインストール

Gravではプラグインを追加することで必要な機能を追加することができます。

getgrav.org

私の作りたいサイトではコードのシンタックスハイライトが必須なので、この機能を提供してくれるPrism Highlighterプラグインをインストールします。

Gravをインストールしたフォルダの\bin\フォルダに管理用のCLIコマンドが用意されており、このコマンドを使うことでプラグインをインストールすることができます。

プラグインをインストールするコマンドの書式は以下となります。

bin/gpm install pluginname

今回はWindows環境なのでShebangが使えないのため都度phpコマンドから呼び出す必要があり、Prism Highlighterをインストールするには以下の様にします。

php .\bin\gpm install prism-highlight

ここまで書いておいてアレなのですが、Prism Highlighterはこのコマンドからのインストールに対応していないそうで、実際にこのコマンドを使うと処理自体は完了するのですが、作成されるフォルダ名が不正になってしまします。
このため、以下の様にフォルダをリネームする必要があります。

# プラグインのフォルダ名がおかしいので直す
mv .\user\plugins\prism-highlight\ .\user\plugins\prism

Prism Highlightergit cloneでインストールするのが正しいやり方だそうです。

# git cloneでPrism Highlighterをインストール
cd .\user\plugins\
git clone https://github.com/alvr/grav-prism-highlight.git prism

Prism Highlighterの細かい設定については割愛しますが、インストールした結果は以下の様になり良い感じにコードのハイライトが有効になっています。

f:id:stknohg:20170219224858j:plain

5. テーマをインストールする

最後にテーマをインストールします。
プラグイン同様テーマもコマンドからインストールします。

getgrav.org

Learn2テーマをインストールするには以下の様にします。
また、

php .\bin\gpm install learn2

テーマをインストールした後はsystem.yaml(\user\config\system.yamlのほう)を修正することでテーマを変更します。

pages->themeの設定をデフォルトのantimatterからlearn2に変えればOKです。

# system.yaml
pages:
  theme: learn2

これでテーマの変更は完了です。

learn2テーマは他のテーマとドキュメントの構造が異なるため、デフォルト設定であるdefault.mdファイルのままだと表示エラーになりますのでドキュメントの名称をchapter.mddocs.mdにして適宜対応してください。

こちらも細かい設定については割愛しますが適用した結果は以下の様になります。

f:id:stknohg:20170219225408j:plain

最後に

とりあえずこんな感じです。

今回はローカルの環境でとりあえず動かすところだけやりましたが、Gravの設定や運用環境への展開については公式ブログのチュートリアルを参考にするのが良さそうです。

getgrav.org

ちなみにAzureへの展開についてはしばやん先生のブログがとてもわかりやすく参考になります。

blog.shibayan.jp

*1:つくるサイトについては具体的な形になったらお知らせしたいですね...