俺のblogはこうやってデプロイ

Posted on | Edited on | In

TL;DR

一言申し上げますと、本ブログは、GitHub + HEXOで構成され、travis-CIでCI＆CDを実行される仕組みである。
サーバレスの構成で、費用はですね、なんと、0です〜

諸々説明

Gitpages+HEXO

  • HEXOは、静的サイトジェネレーターの一つで、かなりシンプルで、今回採用しました。
  • Github pagesは、githubの一つの機能で、これを利用すると、静的サイトをgithubドメインで公開可能になります。
  • Travis-ciは、GitHubと連携できる継続的インテグレーションツールのひとつである。

このブログの仕組み

deploy流れ

  1. githubでrepository新規作成し、branch追加する(pages-branch)。settingでsourceをpages-branchにすることで、同じrepositoryでソースコードも格納できるし、gitpagesも閲覧できるように実現。
  2. hexoのインストール＆configure調整。こちらに関しては、割愛させて頂きます。詳細はgoogle先生に聞いてください。
  3. hexoの_config.ymlで、「deploy」項目があって、それを1で作成したモノに修正する。
  4. travis-ciでCI＆CD。

travis-ciでCI＆CD

  • Travis-ciのアカウントを登録しログインする。まぁ、気軽くにgithubのアカウントでもログイン可能ですね。
  • 先ほど新規作成したrepositoryとtravis-ciと紐づけられるように、スィッチをONにする。
  • Personal access tokenで、Generate new tokenを押し、新規のtokenを取得します。
    ※select scropesはrepoとuserにする
  • Generate tokenを押すと、tokenが表示されます。必ずコピペしてください。（このページから離したら、もう二度と見えないので）
  • Travic-ciに戻り、先ほど紐づけれたrepoで「more options」⇒[setting]⇒[environment variables]新規追加し、valueは先ほどのgithub token、nameはご自由に
  • ローカルに戻り、hexoフォルダで、「.travis.yml」を追加してください。内容は下記通り
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
language: node_js  
node_js:  
 - "6"  
before_script:  
 - npm install hexo-cli -g  
 -   
script:  
 - hexo generate  
  
deploy:  
 provider: pages  
 local_dir: public  
 repo: xxxx/oooo.github.io  
 skip_cleanup: true  
 github_token: $XXX #ご自分設定のname 
 on:  
  branch: master  #ソースコードbranch名
  target_branch: pages-branch #pages-branch名

最後

サーバ費用：なし
運用費用：なし
その他費用：なし
総計コスト：ゼロ

いかがでしょう、もしあなたのブログ作成にお役に立てると、嬉しい限りですー