Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
35
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@hmsk

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

ぱっと静的サイトを作って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 PagesHerokuAzureにデプロイする方法もドキュメントされている。基本的に

$ 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,}
35
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
35
Help us understand the problem. What is going on with this article?