ぱっと静的サイトを作ってGitHub Pagesで公開する時にHarpが便利だった。
Harpはソース群から静的サイトをまるっと生成して返すサーバだが、コマンドを叩けば生成したファイルを吐いてくれる。
$ harp compile [options] [projectPath] [outputPath]
使える道具が以下に制限されているものの、該当の拡張子のファイルを置いておけばそれをよしなにコンパイルしてくれる。
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を参照出来る。
画像等のファイル群もメタデータみたいに扱える。
公開
GitHub PagesやHerokuやAzureにデプロイする方法もドキュメントされている。基本的に
$ harp compile [options] [projectPath] [outputPath]
で、静的サイトのファイル群を吐いてくれるので、それを好きなところに出すと良いという話。
Dropboxに置いてるHarpのプロジェクトを公開してくれるサービスもある。
GitHub Pages向け便利セット
これから何度か静的サイト生成の場面に出会うこともありそうと思い、GitHub Pagesへの公開を前提にしたソースセットを作った。公式のドキュメント通りにデプロイの度にGitのコマンドをごにょごにょやるのは辛いのでnpmのgh-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,}