867 - blog post

フラットファイルな当ブログの書き方

Posted by 867 on

How to Blog with Markdown

社内向けの資料として書いたエントリーですが、ちょっとリライトして、フラットファイルCMSな当ブログの書き方、更新方法を簡単にご紹介します。フラットファイルにしたことで、オフラインでの執筆が普通になり、特別なソフトもいらない、HTMLを書かなくてもいいということで、コンテンツを書くスタイル自体が大きく変わったように思います。

フラットファイルCMSとは?

データの保有にDBを使わない、最近話題の新種のCMS。

なぜフラットファイルCMSなのか。

  • 軽い、早い。
  • 設置が簡単。
  • 「コンテンツ」の保存に相応しい。(資産として)

→レスポンシブを始め、モバイルでの閲覧に対する配慮が重要になっている。
屋外での閲覧などを考え、コンテンツの軽量化・表示の高速化が求められる。

使用しているCMSの仕様。

  • システム設定は、.yaml(ヤムル)というXMLファイルで指定。
  • コンテンツデータは、.md(マークダウン)というテキストファイルで保有。
  • 処理は、PHP。

<その他>

  • キャッシュコントロール付。
  • 管理画面はあるが、使わなくてもOK。(今は使っていない)

主要なディレクトリ・ファイル。

システム配下のうち、主要なディレクトリ・ファイルは次の通り。

 _add-ons/ …PHPの拡張機能入れ。
 _cache/ …キャッシュファイル入れ。中のファイルを消すとキャッシュが消える。
 _config/ …設定ファイル(.yaml)入れ。
 _content/ …コンテンツファイル(.md)入れ。★
 _themes/granfairs/ …テンプレートHTML入れ。
 upload/ …コンテンツ画像入れ。★

運用で使用するのは、★の2つ。

コンテンツ公開までは簡単3ステップ!。

  1. ローカル環境で.mdファイルを作る。(コンテンツを書く)
  2. 社内ローカルサーバの指定フォルダに置く。ブラウザで表示確認。
  3. 本サーバの指定フォルダにアップ。完了!

→超分かりやすい。つまり、「ブログを書く=.mdファイルを作る」

マークダウンとは?

マークダウンと記法

マークダウンとは、Wikiによると

文書を記述するための軽量マークアップ言語のひとつ。(中略)プレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット。

記法が標準化されている。
Markdown 公式
チートシート

主要な要素を一覧にした次ページの.mdファイルを開いて見るのが分かりやすい。
MarkDownで表現できる全エレメント

ファイルとコンテンツの仕様

1).mdファイルの文字コードは「UTF-8」(BOM無)

2).mdファイルは、各自のブログ用ディレクトリに置く。

 /blog/_content/2-ceo
 /blog/_content/3-cto
 /blog/_content/4-staff

3)ファイル名

  • 先頭に日付:yyyy-mm-dd-
  • その後ろに半角英数時で任意に名前を付ける。

ファイル名の日付=公開日。この日付以前にサーバにあっても公開されない。
ファイル名の任意の名前=ブログ記事ページのURL。(URLの競合に注意)

\4-staff\2014-01-06-cyclenav.md → /staff/cyclenav

4)ファイルの先頭は設定ブロック。

---
title: <記事のタイトル>
cat: <カテゴリを指定>
author: <名前を指定>
img: <メインビジュアルのファイル名>
---

※上下の点線も重要なので削除しないように。

5)1記事に一つ、メインビジュアルを用意する。

  • 各自素材を調達(著作権に注意)。
  • 指定のPSDでフィルタを掛け、トンマナを合わせる。
  • ファイル名:[カテゴリ名]-[.mdファイルと同名].[拡張子]
  • 設置先:\blog\upload\

おまけ

サイト内の英語に使用しているWeb font(Roboto)は、インストール版を次からDLできます。
Web fontと同じフォント:Android用のRoboto

画像に英字を使用する場合は、このフォントを使用すると揃ってていい感じ。

Let's talk!
PageTop

Copyright © GRANFAIRS inc. All Rights Reserved.