Circle CIでHugoのビルド・デプロイを実行する

Circle CIでHugoのビルド・デプロイを実行する

この記事で書くこと

  • Circle CIの設定
  • Circle CIからさくらVPS(CentOS 6.4)へのrsyncでハマったこと
  • circle.ymlのRuby, Pythonの設定

実現したいこと

GitHubのリポジトリに、git pushした後、以下の作業をCIで実現したい。

  • (事前準備)TF-TDFに食わせるためのファイル生成
  • TF-IDFで関連記事生成
  • Hugo build
  • さくらVPSにrsync
  • 関連記事生成で変更分をGitHubにコミット

目的

Hugo単体でbuild -> さくらVPSへ転送まではローカルで完結するため、あまりCIとかは必要ないと思っていました。しかし、 PythonでTF-IDFによる文書推薦で、TF-IDFによる関連記事生成のタスクを追加したことで、若干buildまでの時間が掛かるようになりました。

そこで、GitHubにpushしたら、関連記事の生成からHugoビルド・デブロイまでCIで面倒を見てもらうようにしたい。

また、GitHubで管理することによって履歴が分かるようになること、ブラウザベースで記事を修正できるようになることも狙いの1つです。

Circle CIとは

CircleCI

自分のCircle CIの認識は、継続的インテグレーション(CI)を実現するためのSaaS型のWebサービスです。同様のCIサービスには、TravisCIや、Weckerがあります。各サービスごとに、細かい違いはあるようですが、そのなかでも人気がありそうなCircle CIを選びました。

How どうやって実現するか

  1. Circle CIからGitHubを連携させる
  2. circle.ymlに処理を記述する
  3. 対象リポジトリにgit pushする

実際の設定自体は単純で、circle.ymlというCircle CI用の設定ファイルを作ってあげるだけで、Circle CIが動き出す。

ハマった点

  • Circle CIからさくらVPSへのrsync
  • GitHubへのコミット権限は、ユーザ定義を指定しなければならない

Circle CIからさくらVPSへのrsync

Circle CIで毎回生成されるコンテナ(Ubuntu)からブログ記事をホストしているさくらVPSへのrsyncを行うために、SSHの鍵を登録する必要がある。

1. さくらVPSで鍵を生成する

$ ssh-keygen -t rsa # 生成の際にパスワードは設定しない

2. 公開鍵をauthorized_keysに登録する

$ cat id_rsa.pub >> authorized_keys

3. CircleCIのプロジェクト設定のSSH Permissionsから秘密鍵を登録

「1. さくらVPSで鍵を生成する」で生成した秘密鍵id_rsaをコピーして、Circle CIの「SSH Permissions」から登録します。

Circle CIでHugoのビルド・デプロイを実行する

4. Circle CIのDebug Via SSHからSSHログインしてCircle CI側からさくらのレンタルサーバー側にログイン確認

$ ssh -p port番号 さくらVPSのユーザ名@さくらVPSのIPアドレス

CircleCI側のSSHキーをさくらのレンタルサーバー側に登録する - Qiita

GitHubへのコミット権限は、ユーザ定義を指定しなければならない

「Checkout SSH keys」で最初に作られているdeploy keyだとGitHubにコミットができませんでした。

GitHubにコミットするためには、user keyを利用する必要がありました。

環境変数の設定方法

直接コードに埋め込みたくない値などは、Circle CIでも環境変数として定義できます。

Circle CIでHugoのビルド・デプロイを実行する

ここでは、さくらVPSのIPアドレス、ポート番号を環境変数として定義している。

Rake -qによるサイレント実行

せっかくあまり見せたくない変数をCircle CIの環境変数として定義したにも関わらず、Rakeの実行ログがCircle CIのビルド結果に残ってしまうのはあんまり意味がありません。

Rakeのオプションに -q, –quietがあったのでこのオプションを付けて実行します。

-q, --quiet   Do not log messages to standard output.

Mecabインストール

mecabインストールで参考にしたcircleci https://circleci.com/gh/bungoume/mecab-web-api/76#config

今後対応したいこと

  • TF-TDFのパラメータ調整
  • Textlintによる文章校正
  • GitHub Flowによる電子書籍作成
  • Circle CIの定期実行

改訂新版Jenkins実践入門 ――ビルド・テスト・デプロイを自動化する技術 (WEB+DB PRESS plus)
出版社:技術評論社
著者:佐藤 聖規和田 貴久河村 雅人米沢 弘樹山岸 啓川口 耕介佐藤 聖規
発売日: 2015/06/10

Backlinks

静的サイトジェネレータHugo
Hugo入門 静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する 静的サイトジェネレータ「Hugo」インストール 静的サイトジェネレータ「Hugo」〜公開方法〜 サイト構築 Hugoのテーマでsubmoduleを使う方法 HugoでのシンタックスハイライトにPython Pygmentsが不要となった HugoのRelated Contentを利用して関連記事を表示する gulpで画像の最適化 Hugoソースコードリーディング〜Taxonomy〜 Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する Hugoでブログカードを作成する(resources.GetRemote利用) Templates 【Hugo】Partial Templateでは複数returnを記述する早期Returnを使えない 【Hugo】images.TextでOGP画像を生成する Shortcodes Hugo Shortcodesの作り方 HugoのShortcodesを利用してAmazon紹介リンクタグを作成 HugoでAMP対応のブログカードを作る AMP対応 AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 AMP OptimizerによるAMPのさらなる最適化 AMP Service WorkerでPrefetch Linksを実現する Data Driven Content Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた Tailwind CSS HugoでTailwindCSSを利用しAMP Validなページを生成する ビルド npm-run-allでローカルAPI serverとHugo serverを同時に実行する GitHub Actionsのスケジューラ実行を利用して定期的にビルドする Circle CIでHugoのビルド・デプロイを実行する コンテンツ作成 Git pre-commitフックでFrontmatterの「更新日時」を自動更新する Hugoでブログ記事一覧ページ(ブログアーカイブページ)を作成する 移行 はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました JekyllからHugoへの移行ポイント Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する 書籍
2017-12-31