読者です 読者をやめる 読者になる 読者になる

Github README.mdからGithub Pagesを自動生成する

Github

kawauso7c.hatenablog.com

上の記事の続き。Github README.mdからGithub Pagesを自動生成する方法。

f:id:kawauso7c:20150815193706p:plain

処理過程順に説明する。

1. README.mdを更新する

masterブランチでREADME.mdの更新が発生。pushしたタイミングでデモサイト用に用意したGithub PagesもREADME.mdを元に更新されて欲しい。

2. GithubのWebhookでCircleCIに通知

1コンテナであれば無料ということで、CircleCIを利用してみた。
masterブランチからのhookのみに限定するために、circle.ymlで設定する。

general:
  branches:
    only:
      - master

3. CircleCIがJekyll用にファイルを調整しpush

CircleCIのdeploymentで、以下のように記述する。

dependencies:
  pre:
    - git config --global user.name "CircleCI"
    - git config --global user.email "circleci@example.com"

deployment:
  production:
    branch: master
    commands:
      - |
        # 3-1
        git clone -b gh-pages git@github.com:kawausokun/wcl-tooltip.git ~/.wcl-tooltip
        cd ~/.wcl-tooltip
        # 3-2
        npm install browserify -g
        gem install compass
        # 3-3
        npm run build
        if [ "$(git diff)" != '' ]; then
          # 3-4
          git commit -a -m 'Update demo site via CI [ci skip]' && git push origin gh-pages
        fi

3-1. gh-pagesブランチをclone

3-2. browserifyとcompassをインストール

JavaScriptCSS(SCSS)をビルドするため。

3-3. サイト用に諸々ビルド

JavaScriptをbrowserifyでビルドし、SCSSをcomassでビルドし、masterから取得したREADME.mdをJekyll用フォーマットに合わせて調整する。

{
  "scripts": {
    "get-source": "curl https://raw.githubusercontent.com/kawausokun/wcl-tooltip/master/README.md -o _includes/README.md; sed -i '/__SITE_DEMO__/c\\{% include demo.html %}' _includes/README.md; sed -i 's/```\\(.\\+\\)/{% highlight \\1 %}/' _includes/README.md; sed -i 's/```$/{% endhighlight %}/' _includes/README.md",
    "build": "npm run get-source && npm uninstall wcl-tooltip && npm install && browserify javascripts/src/main.js -o javascripts/bundle.js && compass compile stylesheets"
  }
}

Jekyllはmarkdown記法で"```html" - "```"を認識してくれなかったので、{% highlight html %} - {% endhighlight %}に置換する。
また、README.md内容の途中に差し込みたい内容 (ツールのデモ) があったので一工夫。README.md側の差し込みたい場所に印 (__SITE_DEMO__) をコメントとして書いておき、{% include demo.html %}に置換する。

3-4. gh-pagesブランチにプッシュ

コミットメッセージに[ci skip]と書いておくと、CircleCIはそのコミットを無視してくれる。circle.ymlでもmasterに限定してあるけど一応。
CircleCIにGithubリポジトリへのwrite権限を与える必要がある。
HugoとCircleCIでGitHub PagesにBlogを公開してみたら超簡単だった · Hori Blogの「CircleCIの設定」あたりを参考にさせてもらった。

4. gh-pagesを元に、GithubGithub Pagesを更新

完了。