Hexo+MagnumCIでビルドを自動化する

目次

  1. 1. はじめに
  2. 2. 目標
  3. 3. Hexo全体をGithubでソース管理
  4. 4. MagnumCIの準備
    1. 4.1. アカウントの取得
    2. 4.2. CIの設定
    3. 4.3. .magnum.ymlの作成
    4. 4.4. _config.ymlファイルの変更
    5. 4.5. GithubにPush

はじめに

前回構築した環境では以下のような手順を踏む必要がありました。

  1. VagrantでVMを起動
  2. hexo new post
  3. hexo serverでプレビュー
  4. hexo generate
  5. hexo deploy

これはすごく面倒なのでMagnumCIを利用して自動化してみたいと思います。

目標

ブロック図

Hexo全体をGithubでソース管理

Hexoのルートディレクトリで以下のコマンドを実行します。

git init
git checkout -b source
git remote add origin git@github.com:<ユーザ名>/<ユーザ名>.github.io.git
git push origin source

これでHexo全体がGithubのsourceブランチにアップロードされます。

MagnumCIの準備

アカウントの取得

Magnum CI

上記サイトからアカウントを登録してください。

CIの設定

Add a New Projectボタンから新しいプロジェクトを作成します。

  1. Name : プロジェクトの名前です。後から変更できます。
  2. Repository URL : git@github.com/<ユーザ名>/<ユーザ名>.github.io.git
  3. Integration : Github
  4. Source control : Git
  5. Project type : Node.js
  6. Create Project

Githubと連携させるために情報が表示されるので以下のように設定します。

  1. Githubの対象リポジトリを開く
  2. 表示されているWebHookアドレスを、Githubの対象リポジトリのWebhooksに追加する
  3. 表示されているDeployKeyを、Githubの対象リポジトリのDeploy keysに追加する

※ここでテストビルドを行ってもMasterブランチが空のため100%失敗するのでやらなくてOKです。

MagnumCIに戻り、画面上部のSettingsボタンからその他の設定を行います。

  1. Build Configrationに移動する
  2. Build on branches : Only Specified
  3. List branches : source
  4. Runtime Version : 0.10
  5. Save Changes

.magnum.ymlの作成

コンソールから、Hexoのルートディレクトリ上に.magnum.ymlを作ります。

node: 0.10.0

before_install:
  - echo "Asia/Tokyo" | sudo tee /etc/timezone
  - sudo dpkg-reconfigure --frontend noninteractive tzdata
  - cat /etc/timezone

install:
  - npm install -g hexo
  - hexo -v

before_script:
  - git config --global user.name <Githubのユーザ名>
  - git config --global user.email <Githubに登録したメールアドレス>

script:
  - hexo generate
  - hexo deploy

_config.ymlファイルの変更

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:<ユーザ名>/<ユーザ名>.github.io.git
  branch: master

デプロイするブランチをmasterブランチに変更します。

GithubにPush

git add .
git commit -m "Add .magnum.yml"
git push origin source

これでsourceブランチに変更をPushすると、Webhook経由でMagnumCIが起動して、ビルドとmasterブランチへのPushが行われます。

この時点で、Githubのサイト上から記事を書いたりすることができるようになります。