Hexo+Github+Werckerでブログ構築

静的サイトジェネレータでブログを作ろうと思って、 Static Site Generatorsを見た感じ、

• Metalsmith
• Hexo

あたりが良さそうだと思い、少し触ってみたら、

• Metalsmithはコードをゴリゴリ書かないとブログを作れない
• Hexoはymlファイルを少し変更するぐらいで、ほとんどコマンド１発でブログが作れる

という感じだったので、Hexoで作ってみました。

今回は、ブログのソースをgithubリポジトリにUPして、werckerでビルド、github.ioリポジトリにデプロイする形にしてみました。

Hexo

インストールとブログの作成

まずは、公式サイトに載っている通りにインストール・ブログ作成します。

$ sudo npm install -g hexo
$ hexo init blog
$ cd blog
$ npm install

テーマを変更する場合は、テーマ内の.gitディレクトリを削除しておくこと。 テーマ内にはたいてい設定ファイルがあるのでサブモジュールにするのもダメです。

$ git clone https://github.com/hexojs/hexo-theme-light.git themes/light
$ rm -rf themes/light/.git

設定

_config.ymlを好きなように修正します。

$ vim _config.yml

静的ファイルの生成

CSSやHTMLなどの静的ファイルを生成します。

$ hexo generate

HTTPサーバーを起動

HTTPサーバーを起動してブラウザで確認し、問題がないか確かめます。

$ hexo server

Github

1. ブログソース用のリポジトリと、github.ioリポジトリ作っておきます。
2. Authorized applicationsでPersonal access tokensを作成します。publicリポジトリなら、repoのチェックを外してpublic_repoにチェックを入れること。トークンは忘れないようにどこかに保存しておきます。
3. ブログソース用のリポジトリの設定で、Collaboratorsにwerckerbotを追加します。

Wercker

wercker.ymlの作成

wercker.ymlをブログプロジェクト下に作成します。

box: wercker/nodejs
build:
  steps:
    - npm-install
    - script:
        name: Install Hexo
        code: |
          sudo npm install -g hexo
    - script:
        name: Generate static files
        code: |
          hexo generate
deploy:
  steps:
    - script:
        name: Get commit message
        code: |
          export COMMIT_MSG=$(git log --pretty=format:"%s" -1)
    - script:
        name: Configure git
        code: |-
          git config --global user.email "user@email.com"
          git config --global user.name "user"
          rm -rf .git
    - script:
        name: Deploy to github pages
        code: |-
          cd ./public
          git init
          git add .
          git commit -m "$COMMIT_MSG"
          git push -f $GIT_REMOTE master

アプリの作成・設定

Werckerでブログソース用のリポジトリを指定してアプリを作成した後、デプロイ先をCustom Deployで作成します。

GIT_REMOTEには先に取得しておいたパーソナルアクセストークンを使用し、https://{ACCESS_TOKEN}@github.com/{USERNAME}/{USERNAME}.github.io.gitのように指定してやります。

最後に

ブログソースをgit pushしたらWerckerが自動でgithub.ioリポジトリにデプロイするので少し待ちます。 github.ioにきちんとファイルがpushされていたら終わりです。お疲れ様でした。