b-shock. Fortress

Hexoセットアップ

前々から始めようと思ってたブログを、ようやく今日から始める。
技術的な話題で割と分量があるものでも、今まではTwitterで連ツイしていたが、もういいかげんに ちゃんとしたブログを書こうと。そう思い立って、Markdown対応のブログエンジンとしては軽くて よさげだったHexoを導入した。
ちなみに当方、Markdownそのものもちょっとしか書いたことがない。このブログが三日坊主にならず、 更新を続けていくことが出来れば、Markdownに慣れる良い機会になるだろう。

今回は最初のエントリーだが、まずはHexoによる執筆環境の構築について。

VPSを用意したが…

Hexoの動作環境として、さくらインターネットさんからさくらのVPSをひとつ 借りた。(スペックは、1G/SSD)
さくらのVPSは既にいくつかインスタンスを所有しているが、どれも既にたくさん仕事をこなしていたので。

実は、Hexo以前にCrowiを検討していて、VPSを用意したのも Crowiの実行環境が必要だったから。ツール選考の際、「Markdownで書けるCMS」というところにばかり目が 行ってしまい、Crowiが記事の公開を目的としたツール ではない ということを知らなかった。(チーム内の Wiki等、閉じたグループでの情報共有を目的としたものらしく、記事の閲覧には事前にアカウント登録を行う必 要がある)
単に目的に合わなかったというだけで、Crowi自体はシンプルなよいツールだと思うので、引続きウォッチして いきたい。何かの機会に使うことがあるかも知れないしな。

Hexoの話に戻るが、Hexoはユーザーが記述したMarkdownの記事からHTMLを生成するツールで、Movable Type とよく似ている。
Movable Type(MT)にはとかく「重い」という印象があり(実際に運用した経験もあり)、当初、Hexoにも 同様の問題があるのではないかと懸念したが、DBMSも必要ない軽いツールである様だし、私が想定して いる用途ではパフォーマンスが問題になることはないだろうと思う。

VPSの用意はしたものの、そもそもその必要はあまりなかった。
また、本題ともあまり関係がないので、VPSにFreeBSDやnginxを構築する手順は、今回は割愛させて頂く。

Node.jsのセットアップ

今回のケースでは、Hexoの導入先は用意したVPSではなく、クライアントPCである。
Hexoはあくまで、MarkdownからHTMLを生成するツールとして使用し、アプリケーションサーバとしては 利用しない。クライアントPCで生成したHTMLはgitで管理し、VPSに対してはgitの機能を使用してデプロイ するものとする。

当方、最近はXubuntuなんかも使うけど、メインの環境はMac。 パッケージマネージャとしては、よく使われるHomebrew ではなく 、MacPortsを愛用している。
MacPortsによるNode.jsの環境構築に難しいところは全くない。

1
2
sudo port install nodejs6
sudo port install npm3

Homebrewには長いこと触ってないが、ほとんど同じ手順になると思われる。
注意が必要なのは、現行のHexo(3.3.8)は 最新のNode.js(8.x)では動作しないらしいということ。現状、安定版の6.x(及び、それに対応したnpm 3.x) を利用する必要がある。

Hexoのセットアップ

以下実行。

1
sudo npm install hexo-cli -g

記事リポジトリの作成

適当なディレクトリで、以下実行。
ディレクトリの名前 “blog” は任意のものでOK。 (以下、この名前でディレクトリを作成したものとして説明を続ける)

1
2
3
4
mkdir blog
cd blog
hexo init
npm install (8/23 19:30 追記:誤りを修正)

このままではAtomのフィードが生成できないので、blogディレクトリから出ずに、以下実行。

1
npm install hexo-generator-feed --save

_config.yml というファイルが出来ているはずなので、先頭の方を編集。(以下)

引続き hexo-generator-feed に対応する為に、 _config.yml の末尾に以下を追記。

更に、HexoのMarkdownでは、行末の改行(行末がスペース2文字で終わっていない改行)を勝手に<br> に置き換えてしまうという、一般的なMarkdownと互換性がない困った仕様がある。
この動作は設定ファイルで変更が可能なので、以下も記述しておく。

これらの編集を行ったblogディレクトリ全体をgitリポジトリとして登録し、GitHubにでもpushする。
このディレクトリに、適切な .gitignore ファイルが既にあるはずなので、通常はそのまま利用。

新しい記事を起こすとき

blogディレクトリの中で、以下実行。

1
2
cd blog
hexo new 記事の名前

記事の名前は、日本語可。
ここで指定した名前は、通常は記事の表示上のタイトル、URL、Markdownファイルの名前として使用される。
この例では、記事ディレクトリ内に _source/_posts/記事の名前.md_ というファイルが作成されるはずなので、 このファイルをMarkdown文書として編集すればよい。(編集の手順は後述)
source/_posts ディレクトリ内にファイルが作成される為、一見、同名の記事が作成できないように見えるが、 そんなことはない。同名の記事を作成しようとした場合、ファイル名やURLの末尾には連番が加えられるが、 記事タイトルは、過去に同名の記事があるかどうかに関わらずコマンドラインから指定したものになる。

Markdown書類の編集が終わったら、blogディレクトリ内で以下実行。

1
hexo generate

新しい記事を作成したり既存記事を修正した場合だけでなく、既存記事を削除した場合も、上記コマンドを実行 して変更を反映させる。
変更を反映したら変更をコミットし、設置先のVPS等でpull等を行って、変更を適用する。

Markdown文書の執筆環境

Macにも他のOSにも、Markdown文書を編集する方法は色々あるので、お好みの手順で。
以下、Sublime Text 3を利用した方法について述べる。

ほとんどのSublimeのユーザーはPackage Controlを既に導入済み と思われるが、もし導入していなかったらリンク先の指示に従って導入を行う。(手順は割愛)

Package Controlが既に導入されているなら、以下のパッケージをインストール。

OmniMarkupPreviewer

コマンド+オプション+o を押下することで、Webブラウザでプレビュー出来るようになる。(キーは変更可能)

上記キーを押下したらWebブラウザが404エラーを返す場合は、 OmniMarkupPreviewer.sublime-settings を 編集し(Macの場合は “Sublime Text” → “Preferences” → “OmniMarkupPreviewer” → “Settings - User” を開く)、以下を貼り付け。

TailingSpaces

行末のスペースを強調表示する様になる。(Markdownでは、行末にスペースを2文字置くことで改行を行うので)

もし、Sublimeの設定で _trim_trailing_white_space_on_save_ を有効にしている場合は、この機能との相性が よろしくない。
その場合、Markdown文書に対してのみ _trim_trailing_white_space_on_save_ 無効にする。
Markdown.sublime-settings を編集し (Macでは “Sublime Text” → “Preferences” → “Settings - Syntax Specific” を開く)、以下を貼り付け。

以上。
それでは、ナイスなHexoライフを!>各位