公開日 2018年8月20日 CircleCIとHugoを用いた静的ブログの作成を公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. CircleCI × Hugoで静的ブログ作成
実践的にCIツールを使ってみる

2. 🏁 このLTのゴール
今日は実際にCIを使ってみましょう！
CIツールとはなんぞやの理解を深めるきっかけ作りになればいいです 🎉

3. 📖 目次
・CircleCIとは
・Hugoとは
・実際にブログをつくってみる
・まとめ

4. CircleCIとは

5. CircleCIとは
種類: CIツール (継続的インテグレーション)
形態: SaaS (Software as a Service) 👈 Jenkinsとは違うところ！
料金: 1コンテナ※Linux なら無料 (2コンテナ目から+$50/月)
概要: GitHubやBitbucketへのプッシュに反応してコマンドを実行できる
https://circleci.com/
競合サービスは他にいっぱいあります。
Jenkins / Jenkins X / Travis CI / Codeship / Bamboo / Bitbucket
Pipelines ...

6. CIとは？
CIとは、簡単に「〇〇した時には〇〇する」といった定型作業のこと！
例えば・・・
「コード改修できたら、テストコード実行して結果が問題ないか確認する」
「テストが問題なければ、ステージング環境に反映(デプロイ)する」
「ステージング環境で問題なかったら、本番環境に反映(デプロイ)する」とか！

7. メリット
そういったことが自動化できるので、
・開発以外で掛かってくる工数の削減できる
・機械的に作業できるすばらしさ（手作業よくない！ミスの原因！）
・作業手順をコード化できて、管理できる
・エンジニアが必要だった作業も、エンジニアに依存しなくできる

8. Hugoとは

9. Hugoとは
種類: 静的サイトジェネレータ
形態: OSS (Apache License)
概要: マークダウンを書くだけでブログシステムができる！
公式サイト: https://gohugo.io/
テーマ: https://themes.gohugo.io/
他の静的サイトジェネレータはこんなのがあるみたいです！
Gatsby / HEXO/ Jekyll / React Static / Phenomic / METALSMITH

10. 静的サイトジェネレータとは？
その名の通り、静的サイトを作り出すソフトウェアです。
静的というのは、基本HTML、CSS、JavaScriptだけでできているということ。
マークダウンをINPUTに、コマンド1つでサイトを生成してくれるので、
シンプルなサイトを作りたいといった要望には、とても有効です。

11. メリット
メリットはいっぱい！ システムがないので、
・レスポンスが非常に高速！
・セキュリティが堅牢！
・運用が楽！

12. 実際にブログを作ってみる

13. 前提条件
・GitHubへのユーザ登録が完了している
https://github.com/
・CircleCIへのユーザ登録が完了している
https://circleci.com/gh/issy-s16
・hugoコマンドをローカルにインストール(Mac)
$ brew install hugo

14. 手順.1
・CircleCI × Hugoのテンプレートリポジトリをフォークし、
devブランチをデフォルトブランチに変更してクローンする。
https://github.com/issy-s16/quickstart-circleci-hugo-githubpages

15. 手順.2
・フォークしたリポジトリにて、GitHub Pagesのブランチ設定を行う。
※masterブランチのdocs配下を参照するように設定。

16. 手順.3
・CircleCI側でフォークしたリポジトリを監視するように設定する

17. 手順.4
・デプロイキーをWrite権限ありのものに変更する
SSHの鍵を生成する。
$ ssh-keygen
公開鍵をGitHub上の対象リポジトリ>Settings>Deploy keysに追加する。
$ cat ~/.ssh/id_rsa.pub
秘密鍵をCircleCI上の対象リポジトリ>Settings>SSH Permissionsに追加する。
$ cat ~/.ssh/id_rsa

18. 手順.5
・Hugo Themesから好きなテーマを選択し、submoduleとして追加する
https://themes.gohugo.io/
$ git submodule add https://github.com/mtn/cocoa-eh-hugo-theme themes/cocoa-eh
例: https://themes.gohugo.io/cocoa-eh-hugo-theme/

19. 手順.6
・テーマに合わせてconfig.tomlを書き換える
$ cp themes/cocoa-eh/exampleSite/config.toml .
例: https://themes.gohugo.io/cocoa-eh-hugo-theme/

20. 手順.7
・GitHub(リモートリポジトリ)のdevブランチにpushする
$ git add -A
$ git commit -m ‘xxxxx’
$ git push origin dev

21. Fin.
・あとはCircle CIが
・hugoコマンドを叩いてビルド
・ビルドされてできたソースをmasterブランチにpushしてくれるので、
完成 🎉
# 記事を書くときはhugoをローカルにインストールして
$ hugo new posts/my-first-post.md

22. 解説
Circle CIのバージョン
JOB名 Hugoのビルドを行うJOB
GitHubリポジトリのチェックアウト
仮想マシンにHugoをインストールする
submodule(theme)もチェックアウトする
hugoコマンドでマークダウンを読み込んで、publicディレクトリにブログを生成してくれる
仮想マシンの状態をキャッシュして、次のJOBで復元する

23. 解説
デプロイ(ビルドされたソースをGitHub Pagesが参照しているmasterブランチにプッシュする作業)
build JOBの状態を復元する
docsディレクトリを上書きする際に削除されたファイルが残るのが嫌なため、ディレクトリごと削除してお
く
hugoコマンドで生成されたpublicディレクトリを、GitHub Pages参照先のdocsディレクトリとしてコピーする
gitの初期設定
gitの初期設定
masterブランチを作成し切り替える
ビルド済みの状態のソースコードをコミットする
リモートリポジトリのmasterブランチにプッシュする

24. 解説
devブランチにプッシュされた時をトリガーとすることを設定
JOBごとの設定
devブランチにプッシュされた時をトリガーとすることを設定
build JOBの実行に成功したら起動することを設定

25. まとめ
CircleCIの記述自体、かなりシンプルで導入コストも少ないなと感じました。
やはり作業効率アップだけでなく、機械的作業になることは
リスクが減ってとてもいいことなので、自動化進めていきたいです。
※仮想マシン1台実行なら無料なところも魅力ですね！(CircleCI)

26. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと