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を使う嬉しさが若干半減してる気もしますが、いいんです。