Markdownで記事を書く、データベース不要のCMS、Picoを使ってみた

だいぶご無沙汰しておりました。
久しぶりに自分のブログを見に行ったら広告が出現していて震えました。 前回から3ヶ月も経っていたとは。。。

激務に激務を重ね、ようやく落ち着いてきたので、広告消すためにも記事を。

案件が落ち着いてきたというのもあり、今までまわりになかった技術に手を出すようになり始めました。
今さらながらSublime Text2を使ってみたり、Emmetをつついてみたり。Markdownについても最近触れる機会が多く。

そんなときに、Markdownでコンテンツを記述する、データベース不要のCMS『Pico』なるものを見つけたので、今回ご紹介いたします（通販風）。

---

Picoとは

本家サイトはこちらです。→Pico
すっげえシンプルで、（DBを使わないので）表示がめっちゃ早いCMS。Webを簡単に作れるぜ！（超意訳）
とのこと。

特長は、データベースがなく、テキストをマークダウン形式で書くところ。
ヘッダーとフッターとサイドナビをPHPで自動で付与します。編集も可能です。
URLのルールとかはPico本家のドキュメントを見てください（割愛）。

ファイルはマークダウン形式（拡張子は「.md」）で生成して、直接サーバ上に置きます。
簡単にファイルを作成できるプラグインは後ほどご紹介します。
あ、データベースは必要ありませんが、PHPは必要です。PHP 5.2.4以上のバージョンが必要です。

自分は、Twitterでお気に入り登録した記事が埋もれて探せなくなるのを救出するために、
まとめリンク集をためしに作ってみました。（まだ調整中ですがフライングで

---

導入方法

1．ダウンロード

Picoダウンロードページから、Downloadボタンを押してファイルを取ってきます。

このタイミングで、同時にプラグインも落としました。
Picoプラグインページから、お好みのプラグインを取ってきます。
自分はあまりRSSに興味がなかったので（ブログとして使う想定ではないので）RSSは除き、それ以外の二つはダウンロードしました。
以降は、上記プラグインをダウンロードした前提で話が進みます（汗）。すみません。

2．サーバにアップ

PicoはPHP 5.2.4以上がサーバにインストールされている必要があります。

PHPのバージョンを確認したら、Pico-masterの中身をお好きなディレクトリにアップします。
ダウンロードしたプラグインは、Pico本体の「/plugins/」ディレクトリの中に入れてください。

Pico Editorというプラグインは、入れるとWeb上でMarkdown形式で記事を記載＆プレビューでき、自動でファイルを保存してくれるのでぜひ入れることをオススメします。

3．Pico Editorの設定

Pico Editorをダウンロードしたら、フォルダ内にある「pico_editor_config.php」を開きます。
任意のパスワードを設定してください。（何でもかまいません。）
パスワードはそのまま指定するのではなく、ジェネレータで変換したものを入れてください。

パスワードの設定が終わったら、Pico本体のpluginsディレクトリの中にアップします。

アップが終わったら、アップロードした場所のURLの後ろに /admin/ を入力すると、ログイン画面が開きます。
先ほど設定したパスワードを入力して、ログインします。

ログインすると、デフォルトのファイルが3つほど表示されていると思います。

何度か試してみたのですが、どうもこのエディタは、エディタ上で作られてないファイルは編集も削除も出来ないようです。
なので、デフォルトのファイルに関しては、エディタからではなく、サーバ側から直接削除します。

わたしは、Pico本体の「/content/」フォルダの中に入っている「/sub/」ディレクトリ配下の.md ファイルを削除し、
Pico本体の「/content/」フォルダの直下に入っている「index.md」をテキストエディタで編集してトップページを作りました。

4．サイトの設定

サイトのタイトルを編集するには、Pico本体のルートフォルダにある「config.php」を修正します。
初期状態では全てがコメントアウトになっている状態なので、 タイトルを変えたい場合は、
$config['site_title'] = 'Pico';
をコメントの外に出して調整します。

ヘッダーやフッターなど、共通部分のHTMLを変更したり、スタイルを変えたい場合は、
「/themes/default/」のHTMLとCSSを直接修正するか、
あたらしく「/themes/」ディレクトリにテーマ用ディレクトリを作成し、「config.php」に
$config['theme'] = 'ディレクトリ名'
を指定してください。

5．Pico Editorを使って記事を追加

http://アップロードURL/admin/ にアクセスし、ログインして記事投稿画面に遷移します。
画面の左側上部にある「＋」マークでページを追加します。

ページ追加のコツですが、2点あります。

• please enter a post titleの画面では、ファイル名（英数字）を入力すること。
• 新規作成すると、テキスト内にコメントで「Title:」と入っている部分があるので、そのファイル名を日本語に変更する。

そうすると、ディレクトリ名は英数字になり、サイト内のメニューとしては日本語が表記されるようになります。

エディタの右下に「目のマーク」があるのですが、これを押すとマークダウンされたものが簡易的にプレビューされます。

文字を入力していると、画面右上に「Saved」というアイコンが出ますが、
このエディタでは情報はリアルタイムにセーブされます。

「Saved」というアイコンが出る前に別のページに遷移しようとすると、
「セーブしてないからデータ消えるよ？いいの？（実際は英語）」とアラートが出るので、キャンセルを押して、
しばらく待つか、適当に文字を入力してみるか、「目のマーク」を押してプレビューしていると「Saved」が出るので、セーブされたことを確認して別のページに移動してください。
セーブまでには若干のタイムラグがあります。

ちなみに、Pico Editorを使わなくても、「ファイル名.md」でファイルを作成して保存し、
「/content/」ディレクトリ配下にFTPでファイルをアップロードすれば、ページを作ることは可能です。

---

一度セッティングが終わって使い慣れれば、かなり楽です。
セッティングするまでと、軌道に乗るまではだいぶ大変かもしれませんが･･･（笑

自分が主につまづいたポイントを整理します。

• アップロードしたけど、トップページが表示されない。
  →PHPのバージョンが足りていなかった。
• Pico Editorで記事が編集できない。
  →Pico Editorで作成したファイルでないと、編集が出来ないようです。（デフォルトで入っているファイルは編集できない）
• Markdownの記法を忘れた。
  →Markdownの文法はこちら

一度マークダウンに慣れると、HTMLもマークダウンで書いてしまいたくなります（笑） ぜひおためしくださいませ。