【Pico】データベースを使わない、Markdownで記述する軽量CMSを使ってみた。

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

お久しぶりです。

最近Markdownファイルでメモを書いては、sublime text のプラグイン「Markdown Preview」でブラウザ側に表示し確認したりしていたのですが、
単体表示では全然使いやすかったのですが、まとめてMarkdownファイルを確認できるものはないのかなと探してみたら、
「Pico」というPHPベースのCMSが良さげだったのでご紹介します。

アジェンダ

  • picoとは?
  • セットアップ
  • ディレクトリ構成
  • Markdown記述方法
  • テーマの作成

Picoとは?

データベースを使わずにファイルベース(Markdown)で管理するPHP製のCMSです。構築も簡単で、PHPが動く環境にファイルを設置すれば動いてくれます。

公式サイト

セットアップ

まずは公式サイトからファイルをダウンロードし展開します。ファイル構成には以下の構成になっています。

img-pico-001

[Pico-masterフォルダ」内のファイル一式ををphpが動作する環境へアップロードし、
ブラウザ側からアクセスすると以下の画面が表示されれば成功です。

img-pico-002

Picoを動作させるには、PHPバージョン5.2.4以上の動作環境が必要です。

ディレクトリ構成

Markdownファイルは、contentフォルダに格納し管理します。ブラウザ側からアクセスする際は、以下の形式で表示されます。

参考ディレクトリ構造 参考表示URL
content/index.md /
content/sub.md /sub
content/sub/index.md /sub
content/sub/page.md /sub/page
content/a/very/long/url.md /a/very/long/url

Markdownの記述方法

Pico用にMarkdownファイルを記述方法をご説明します。
以下の設定をMarkdownファイルの先頭に記述後は通常のMarkdown記法で記述します。

/ *
Title: Welcome 
Description: This description will go in the meta description tag
Author: Joe Bloggs
Date: 2013/01/01
Robots: noindex,nofollow
*/
項目名 説明
Title 記事タイトルを記載
Description 記事の概要を記載
Author 執筆者を記載
Date 記事の執筆日付を記載
Robots 検索エンジン・クローラー用の設定を記載

表示してみる。

Markdownファイルを作成

[sample.md]を作成し、以下記述します。

/*
Title: サンプル記事
Description: これはサンプル記事ですよ。
Author: Takashi Kiyota
Date: 2013/07/23
Robots: noindex,nofollow
*/

# サンプル大見出し

## サンプル小見出し

サンプルテキストを記載

sample.mdファイルを以下に格納します。
/content/sample.md

表示の確認

ブラウザから[http://xxxxxxxxxx/sample]にアクセスすると以下が表示されれば成功です。

img-pico-003

テーマの作成

Picoにはテーマ機能が組み込まれており、自身で作成したテーマにてMarkdown表示することが可能です。
簡単にテーマ反映方法までご説明します。

テーマ用ファイルの構成

img-pico-004

上記はデフォルトで用意されているテーマになります。

  • index.html
  • style.css
  • scriptフォルダ

デフォルトテーマの構成として三つあります。テーマ使用する際に必須なのがテーマフォルダ/index.htmlになります。index.htmlはマークダウンの出力用テンプレートして使用されています。

style.cssや、srciptフォルダ等は表示用なのでご自分の好きな構成で構築ができます。

index.htmlの中身

以下は、デフォルトテーマのindex.htmlになります。
html内に{{ page.title }}{{ content }}等の見慣れない表記がありますが、これがpico専用のMarkdown情報の出力用タグになります。

出力タグの詳細は公式サイトのドキュメントに記載されています。

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="utf-8" />
	
	<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
{% if meta.description %}
	<meta name="description" content="{{ meta.description }}"> 
{% endif %}{% if meta.robots %}
	<meta name="robots" content="{{ meta.robots }}">
{% endif %}
	
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" type="text/css" />
	<link rel="stylesheet" href="{{ theme_url }}/style.css" type="text/css" />
	
	<script src="{{ theme_url }}/scripts/modernizr-2.6.1.min.js"></script>
</head>
<body>

	<header id="header">
		<div class="inner clearfix">
			<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
			<ul class="nav">
				{% for page in pages %}
				<li><a href="{{ page.url }}">{{ page.title }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</header>

	<section id="content">
		<div class="inner">
			{{ content }}
		</div>
	</section>
	
	<footer id="footer">
		<div class="inner">
			<a href="http://pico.dev7studios.com">Pico</a> was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a> 
			from <a href="http://dev7studios.com">Dev7studios</a>.
		</div>
	</footer>
    
</body>
</html>

オリジナルテーマの設定

bootstrapを使用して簡単に作成したテーマ反映しました。以下が今回作成したテーマフォルダ構成です。

img-pico-005

テーマ反映の流れ

  1. テーマフォルダの設置
  2. config.phpの修正

テーマフォルダの設置

今回はbootstrapというテーマフォルダを作成しました。作成したテーマフォルダを/themes/フォルダに格納します。
サンプルで作成したテーマを以下に配置しましたので参考にしていただければと思います。

pico-theme

config.phpの修正

config.phpにてbootstrapテーマを表示するよう指定します。

<?php 

$config['theme'] = 'bootstrap';

?>

ブラウザで確認する。

bootstrapのスタイルでMarkdownファイルが表示されていれば成功です。

img-pico-006

まとめ

急ぎ足で、Picoをご紹介しました。なかなか実務でこのCMSを使うことはないかもしれませんが、、、、
書き溜めたMarkdownファイルの管理・閲覧するには、いい感じのツールかと思います。