Pico は、とてもシンプルで高速な CMS（コンテンツ・マネジメント・システム）です。一般的な CMS はデータベースを使いますが、Pico はデータベースを必要としないため、インストールやサーバーの移行が簡単にできるのが特徴です。また、外部からアクセスできるような管理画面が無いためセキュリティ的にも安心して使えます。そこで今回は、Pico のインストールと初期設定、テーマのカスタマイズ方法までの手順をまとめてみました。
Pico の魅力
冒頭にも書きましたが Pico はブログ記事などのコンテンツをデータベースではなく、すべて普通のファイルに保存するため、コンテンツフォルダにマークダウンと呼ばれる記法で書かれたファイルをアップロードするだけで、Webページを作成できます。
すなわち、Pico はすべて普通のファイルで構成されるため、Pico で作成された Webサイトは GitHub などの Git リポジトリで管理することができます。これは普段から Git リポジトリを使っているエンジニアの方などにとって大きな魅力ではないでしょうか。
また、Pico には外部からコンテンツの作成や編集ができるような管理画面が無いため、一般的な CMS のようなセキュリティ対策（パスワード管理、２段階認証、IPアドレス制限など）が必要ありません。（当然ですがサーバーのセキュリティ対策は必要です）
Pico の魅力はとにかくシンプルであることです。そのため、検索機能やエディタ機能なども無く、カテゴリやタグすらありません。もし、Pico では機能不足と感じたら WordPress など高機能な CMS を利用することをオススメします。
Pico は超高速
インストール直後の Pico サイト を、Webサイトのパフォーマンスを測定できる PageSpeed Insights で測定してみました。
一般的な CMS の場合、データーベースへのアクセスや JavaScript や CSS ファイルを多数読み込むため、なかなかスコア100は出ませんが、Pico はモバイルのスコアは98、パソコンは100満点が出ています。
Pico のインストール
Pico のインストール要件
Pico は、PHP バージョン 5.3.6 以上、および PHP エクステンションの dom と mbstring が必要になります。サーバーOSが CentOS の場合は、以下のコマンドで PHP エクステンションの dom と mbstring をインストールできます。
sudo yum install php-mbstring
Pico のダウンロード
Pico は GitHub のリリースページからダウンロードできます。
Releases · picocms/Pico · GitHub
PHP 8.0 の場合は、Pico バージョン3（現在はアルファ版）をインストールする必要があります。Pico がサポートしている PHP バージョンは次の通りです。
- Pico バージョン２（PHP 5.3.6 〜 PHP 7.x.x）
- Pico バージョン３（PHP 7.0.8 〜 PHP 8.0.x）
現時点（2021年7月21日）で、Pico バージョン３ はアルファ版ですが、Pico バージョン２と同じくらい安定しているため本番環境でも利用できます。
参考資料：https://github.com/picocms/Pico/issues/575
Pico のインストール
冒頭にも書きましたが Pico のインストールは簡単です。ダウンロードした Pico を Webサーバーのドキュメントルートにアップロードするのみです。
ブラウザでアップロードした Pico にアクセスして、下のような「Welcome to Pico」のページが表示されていればインストール完了です。
Pico の初期設定
Pico のインストールが終わったら、サイト名などの初期設定を進めていきましょう。
例として Pico を以下の環境にインストールしたとして説明します。ご自分の環境に読み替えてください。
- Webサーバーのドキュメントルート：/var/www/html/
- Pico のインストール先 ：/var/www/html/pico/
設定ファイルの作成
Pico をインストールしたディレクトリに移動します。
config ディレクトリの下に、設定ファイルのテンプレート「config.yml.template」がありますので、これを「config.yml」にリネームすることで設定ファイルを作成できます。
以前 Pico の設定ファイルは PHP でしたが、現在は YMAL（「ヤムル」と読むことが多いようです）というフォーマットで書くようになっています。コンテンツファイルのヘッダ部分も YMAL フォーマットで書きますので、YMAL の作法になれておくと良いでしょう。
YMAL の作法
- インデントの縦を合わせる
- キーと値の区切り文字「:」の後ろは必ず空ける（× name:foo、○ name: foo）
- 構文エラーになる場合は、クォートしてみる
参考資料：YAML Ain’t Markup Language
サイト名の設定
作成した設定ファイルを編集して、サイト名を適当な名前に変更します。
vi config/config.yml
↓
site_title: サンプルサイト
ブラウザをリロードしてサイト名が変更されたことを確認しましょう。
URLの設定
初期状態では「https://＊＊＊/pico/?sub/page」というURLになりますが、これを一般的なURL「https://＊＊＊/pico/sub/page」に変更します。
Webサーバーが Apache httpd の場合は、mod_rewrite モジュールが有効なこと、および「AllowOverride All」が設定され「.htaccess」が使えることを確認してください。
URLの設定を変更します。
vi config/config.yml
↓
rewrite_url: true
ブラウザで「https://＊＊＊/pico/sub/page」にアクセスできることを確認してください。「Not Found」が表示される場合は、Apache httpd の設定を見直しましょう。
ロゴとキャッチコピーの設定
ロゴとキャッチコピーの設定は、設定ファイルではなく「_meta.md」という名前のファイルを「content」ディレクトリ下に置くことで設定できます。（初期状態で「content」ディレクトリは空になっています）
「content」ディレクトリの下に「index.md」が無い場合は、「vendor/picocms/pico/content-sample/」下のファイルを読み込んでしまいますので、適当な「index.md」を作成します。
vi content/index.md
Title: トップページ
Description: 仮のトップページです。
---
## ようこそサンプルサイトへ
ブラウザで作成したページが表示できることが確認できたら、「assets」ディレクトリにロゴをアップロードしておきます。（仮にアップロードしたロゴは「logo.png」とします）
「content」ディレクトリ下に、ロゴとキャッチコピーを設定するための「_meta.md」ファイルを作成します。
vi content/_meta.md
Logo: %assets_url%/logo.png
Tagline: Picoのサンプルサイト
---
ブラウザをリロードすると、ロゴとキャッチコピーが変更されていることが確認できると思います。
テーマのカスタマイズ
イメージカラーやフッダ部分を変更したい場合は、テーマのカスタマイズが必要になります。テーマのカスタマイズ方法は次の通りです。
デフォルトのテーマフォルダをコピーします。（デフォルトのテーマは編集せずに残しておくことが推奨されています）
設定ファイルを編集して、テーマをコピーしたテーマ「my_theme」に変更します。
vi config/config.yml
↓
theme: my_theme
試しにヘッダ部分の色を変更してみましょう。
vi themes/my_theme/css/style.css
↓
#header { background: #00BFFF; }
ブラウザをリロードして、変更が反映されていることが確認できればOKです。
Webページの作成
Pico の Webページは、「content」ディレクトリ下にマークダウンで書かれたファイルをアップロードするのみで作成できます。
ファイルのヘッダ部分やマークダウンの書き方は、公式ドキュメントおよび以下のサンプルファイルが参考になります。
公式ドキュメント：Docs text-file-markup | Pico
サンプルファイル：vendor/picocms/pico/content-sample/theme.md
例えば「content」ディレクトリ下に「about.md」を作成すると、、、
vi content/about.md
Title: このサイトについて
Description: このサイトの説明
---
# このサイトについて
URL「https://＊＊＊/pico/about」の Webページとして表示できます。
おわりに
Pico はシンプルがゆえに出来ることが限られているため、サイトを公開した後もあれこれ悩む必要がありません。Pico の一番の魅力は「良い記事を書くことに集中できること」なのかもしれませんね。
コメント