静的サイトジェネレータ・サーバ Harp

ぱっと静的サイトを作ってGitHub Pagesで公開する時にHarpが便利だった。

• Harp, the static web server with built-in preprocessing

Harpはソース群から静的サイトをまるっと生成して返すサーバだが、コマンドを叩けば生成したファイルを吐いてくれる。

$ harp compile [options] [projectPath] [outputPath]

使える道具が以下に制限されているものの、該当の拡張子のファイルを置いておけばそれをよしなにコンパイルしてくれる。

• The Rules – Harp, the static web server with built-in preprocessing

CSSプリプロセッサとして

• LESS
• Sass
• Stylus

テンプレートエンジンとして

• EJS
• Jade
• Markdown

が使える。あと、CoffeeScriptが使える。

デフォルトというかイニシャライズするとLESS、Jadeでのサンプルが出力されるけど、特段何を使います！みたいな設定はなく、それぞれ使いたいものの拡張子のファイルを置けば良いだけ。

$ harp init src
$ ls src/
404.jade     _layout.jade index.jade   main.less

Herokuが無料で常時稼働とはならない今、ぱっと何かページをおっ立てるのにGitHub Pagesを選び、その時にJekyllやMiddlemanを使うという場面が増えた気がする。

そういう静的サイトをそれらのライブラリのことをよく知らないデザイナーといざ協力して作りますかという時に、それぞれのジェネレータ特有の設定や開発言語由来の謎のファイル、ビルドに関わるおまじない的な存在が割とあって、どこを編集したらいいんでと余計な情報の切り分けをやる量が極めて少ないのが素敵。多分Jadeだけ頑張って貰えば良さそう。

ES6で！とかReactとかEmberを使って！みたいなレベルの静的サイト（静的とは...）になるとHarpの制約からはみ出て、ビルド周りが面倒でどうしようもないことになるので、そういう時は最初からHarpでなくBrunchとかを使うのが良さそう？

ローカル

$ harp server [options] [path]

でlocalhost:9000にて確認出来るようになる。

メタデータ

MiddlemanでいうData Filesみたいな機能があって、テンプレートから置いてあるJSONを参照出来る。

• Metadata – Harp, the static web server with built-in preprocessing

画像等のファイル群もメタデータみたいに扱える。

• Contents – Harp, the static web server with built-in preprocessing

公開

GitHub PagesやHerokuやAzureにデプロイする方法もドキュメントされている。基本的に

$ harp compile [options] [projectPath] [outputPath]

で、静的サイトのファイル群を吐いてくれるので、それを好きなところに出すと良いという話。

Dropboxに置いてるHarpのプロジェクトを公開してくれるサービスもある。

• Harp Platform — Effortless web publishing through Dropbox

GitHub Pages向け便利セット

これから何度か静的サイト生成の場面に出会うこともありそうと思い、GitHub Pagesへの公開を前提にしたソースセットを作った。公式のドキュメント通りにデプロイの度にGitのコマンドをごにょごにょやるのは辛いのでnpmのgh-pagesを使う。

• hmsk/harp-gh-pages-boilerplate: The boilerplate of harp project publishing GitHub Pages

クローンしたリポジトリから自分のGitHubのプロジェクトに必要なファイルをコピーしてnpm installして、npm run publishでGitHub Pagesへすぐに公開できる。

$ npm run preview

でlocalhost:9000にてHarpのサーバが立ち上がるので、ソースをいじりながらブラウザで確認。

$ npm run publish

でリポジトリのgh-pagesにコンパイルされた静的サイトがpushされて、公開される。

Circle CIでデプロイする

手動でpublishを実行するのも面倒（出すことを忘れがちなのと、どのリビジョンを出したのか確認しやすくしたい）であればCIに頼って、masterの更新都度自動でやれる。

Circle CIの設定のサンプルをリネームして編集、Circle CI側でリポジトリを登録して、GitHubと共にリポジトリへ書き込み可能なSSHキーを設定をする。

$ mv circle.yml{.sample,}
$ vim circle.yml # Edit git config variables
$ mv src/circle.yml{.sample,}