ゴーリストデザイン部のミツイです。 １月ももうすぐ終わりですね。 もう１年の１／１２。。早いっ。
え〜、最近BTC（ビジネス、テクノロジー、クリエイティブ）型人材モデル1と言うものを知り、ビジネス×クリエイティブ、テクノロジー×クリエイティブというのを意識しています。2 ということで、新年一発目の今回は、いつもと趣向を変えてテクノロジー的なことを。
Hugo × circleCI × S3
このフロー自体目新しいものではないので、ハマった部分についてだけ書こうと思います。
ゴーリストデザインチームではHugoを使って静的サイトの生成を行っています。 目的としてはヘッダー・フッターなどの共通部品をテンプレート化してメンテナンスを楽にすること。 リンクのチェック、修正などがかなり効率化されます。
では、早速手順を追っていきましょう。
１．まずは、Hugoのテーマファイルを作成してコンパイルします。
その辺の作業は、こちらの記事が詳しいです。
【Hugo】ゴリラでも分かる静的サイトジェネレーターHugoでオリジナルテーマ作り https://blog.mismithportfolio.com/web/20160207hugomyblog
２．そしてそれをGithubにアップ。
Hugoファイルごと、まるっとあげます。 Gitが分からない人はこの辺で勉強しましょう。
git入門 (全22回) - プログラミングならドットインストール https://dotinstall.com/lessons/basic_git
３．ここでCircleCIの登場
CircleCIは、GithubやBitBucketへpushするとゴニョゴニョしてくれるCIサービスです。 ※CIとは、開発の現場ではビルドやテストを自動化して継続的に実行していく「継続的インテグレーション」だそうです。 要するに、、ゴニョゴニョしてくれるってことです。
CircleCI https://circleci.com/
、、と、ここからすでにハマりました。 ゴーリストではGithubのorganizationアカウントにGitレポジトリを作成しているのですが、CircleCIをThird-party applicationで許可しなければなりません。
３−１．CircleCIのヘッダー左にあるSWITCH ORGANIZATIONから該当するorganizationアカウントに移動
SettingsのProjectsのあたりから、GithubへThird-party applicationへ加えてもらうよう申請します。 （設定後だと、その画面が見れないので詳細わからずすいません。。）
３−２．Githubのヘッダー右にあるユーザーアイコンから
Settings＞Organization settings＞Third-party access Third-party application access policyを許可します。
はい。これで一つハマりポイントを通過です。ふ〜。
４．CircleCIでHugoをコンパイルしてくれるように設定します。
４−１．CircleCIのProjectsからAdd Project。
今回はLinuxベースで作成してます。
４−２．で、Gitで管理しているファイルに.circleciというフォルダを追加し、中にconfig.ymlを作成。
このconfig.ymlを設定していつも通りpushすれば、CircleCIがゴニョゴニョを初めます。 すごい便利ですね。 CircleCIは割と最近アップデートしたそうなので、新しい記法で中身を書きましょう。 以下を参考にしました。
CircleCI2.0事始め -新しいcircle.ymlとworkflows編- #circleci https://blog.stormcat.io/post/entry/circleci2.0-overview01/
CircleCI 2.0を使うようにするだけで、こんなに速くなるとは夢にも思わなかった！ http://blog.otakumode.com/2017/06/09/cicle_ci_2/
この辺を読めば、Hugoでコンパイルするまではいけるはず。 と言うか、HugoのGithubに、CircleCIのconfigが既にあったりもします。 https://github.com/gohugoio/hugo
５．CircleCIからS３にアップできるようにAWSのIAMなど設定
CircleCI用にユーザを作成し、ポリシーを設定します。 参考は以下。
CircleCIからS3にアップロードするための設定 https://qiita.com/tjinjin/items/c03e39cd46b222d0b3a3
６．さあ、準備は整った
CircleCIとGithubの連係はしましたか？ config.ymlの設定は終わりましたか？ AWSのIAMは設定しましたか？ では、pushしましょう。
エラー。。
長くなってきたので、以下、どんな対策が必要かだけ書いておきます。
！注意 machine: trueだとGO(GO言語)のバージョンが古いため、hugoがインストールできない。awscliは使える。 ！注意 docker: image: felicianotech/docker-hugo:0.21だと、awscliが使えない（みたい） ！注意 良さ気なdockerを探したけど、見つからず。CircleCIのドキュメントには、「ないなら、作ればいいじゃない」と書いてある（意訳） https://circleci.com/docs/2.0/custom-images/
Dockerを学ぶしかないか、と諦めかけていてふと思う。 「前出の記事たちはなぜうまく行っていたのか？ CircleCIのバージョンが新しくなってるから失敗しているんじゃないか？」 試してみました、古いやつ。 今まで image: circleci/classic:latest を使ってましたが、 image: circleci/classic:201708-01 に変えます。 と、 前出の記事通りのやり方で通りました！ 実際に使ったconfig.ymlはこんな感じ
version: 2
jobs:
build:
working_directory: ~/project
machine:
image: circleci/classic:201708-01
steps:
- checkout
- run:
name: install hugo
command: go get -v github.com/gohugoio/hugo
- run:
name: build hugo
command: hugo
- save_cache:
key: site-{{ epoch }}
paths:
- ~/project/public
deploy:
working_directory: ~/project
machine: true
steps:
- restore_cache:
keys:
- site
- run:
name: deploy hugo
command: aws s3 sync public s3://バケット名/
workflows:
version: 2
build_and_deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only: master
いやー、デザインする時間が削られました。 あと、精神も。 テクノロジー×クリエイティブ、一朝一夕ではないですね。 ざっくり過ぎる記事ですが、以上で終わりです。 ではまた。
「ビジネス」「テクノロジー」「デザイン」の三要素の結合からイノベーションが生まれる https://industry-co-creation.com/icc-salon/74
もしくは、Takramさんのポッドキャスト。めちゃめちゃ為になります。
Takram Cast By Takram https://itunes.apple.com/jp/podcast/takram-cast/id1161310459?mt=2
