Harp

Harp <harpjs.com>です。なんて素敵な名前... 

Harp, the static web server with built-in preprocessing, makes Markdown, LESS, CoffeeScript, and more, as easy to use as HTML, CSS, and JavaScript.
Harp in 25 wordsHarp, the static web server with built-in preprocessing

てことで、名前から興味をもったのですがなかなか面白そうですよね。

簡単な使い方としては

$harp init _myproject

ってすると_myprojectというディレクトリ配下に

.
├── 404.jade
├── _layout.jade
├── index.jade
└── main.less

ってファイルができます。ここで

$harp server

ってすると、static web serverが起動します。これで後はブラウザからアクセスすると上記Harpの定義にある通り各種ファイルが適切に処理されていい感じでページが表示されます。

そんな感じでHarpをWebサーバーとして使ってもいいのですが、今回はコンパイルしてGitHub Pages用のstaticなwebページを作ってみたいと思います。やっぱ時代はstaticなwebページっす! やりかたは簡単で

$harp compile

ってすると、

.
├── 404.jade
├── _layout.jade
├── index.jade
├── main.less
└── www
    ├── 404.html
    ├── index.html
    └── main.css

wwwというディレクトリができて、その名の通りjadeとかlessとかがコンパイルされてstaticなwebページができているのがわかります。この出来上がったファイル群をGitHub Pagesにアップする方法も丁寧な解説があります。GitHub使ってるけどGitHub Pagesは作ってないよ、という人もこれなら簡単に設置できますよね。

とはいえ、内容をどうするかというのはありますよね。今回僕がやってみたかったネタはこちら。

自然石構築法

自然石構築法では、アイデアを「石」として使う。 おもしろいと思った文章、写真、図、引用、絵、参考書などの断片である。 これらの「自然石」を集めて、論文、レポート、本、台本といった「壁」を作る。
ワインバーグの文章読本

本読んだり、Webみたりして「これは!」って思ったのを自分のGitHub Pagesに記憶しておける(読む人を意識しない)、これって素敵じゃないですか。tumblrでいいじゃんって言いっこなしで!

で、そこのネタからブログの記事(読む人を意識する)を書くという流れにしていきたいんですよ。

こんな構成にしたい

さっきのデフォルトのプロジェクトホームに

fieldstones

ってディレクトリを作って、その中に「1石1ファイル」でアイデアの断片を記録していく。それをコンパイルするとバラバラだった「石」のファイルがstaticなページになって、 GitHub Pagesにアップできる→ひと目で自分の頭の中が見える!という感じにしたいです。

できなかった事

やりたいことが決まれば後は作るだけです。そのなかで、やりたいイメージはあるけど実装できなかった事もありまして。Harpどーこーじゃなくて、主にjade関連ですが。

指定ディレクトリ配下のファイル名を取得できない?

jadeには他のファイルをインポートする機能があるんで、index.jadeのなかで、ゴリゴリとfieldstones配下のファイルを読み込もうとおもいました。が、ディレクトリ指定のインポートは出来なくて、ファイルを一個ずつ指定しないといけないみたいです。

というか、そもそも変数にいれたファイル名をインポートできない?

できないのかも?

ってことで、スマートではないですがmdファイルを一旦スクリプトでHTMLに変換してやることにしました。…HARPを使う嬉しさが若干半減してる気もしますが、いいんです。

ってことで

できましたよ!