Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lt7 circle ci hugo

703 views

Published on

公開日 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/

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Lt7 circle ci hugo

  1. 1. CircleCI × Hugoで静的ブログ作成 実践的にCIツールを使ってみる
  2. 2. 🏁 このLTのゴール 今日は実際にCIを使ってみましょう! CIツールとはなんぞやの理解を深めるきっかけ作りになればいいです 🎉
  3. 3. 📖 目次 ・CircleCIとは ・Hugoとは ・実際にブログをつくってみる ・まとめ
  4. 4. CircleCIとは
  5. 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. 6. CIとは? CIとは、簡単に「〇〇した時には〇〇する」といった定型作業のこと! 例えば・・・ 「コード改修できたら、テストコード実行して結果が問題ないか確認する」 「テストが問題なければ、ステージング環境に反映(デプロイ)する」 「ステージング環境で問題なかったら、本番環境に反映(デプロイ)する」とか!
  7. 7. メリット そういったことが自動化できるので、 ・開発以外で掛かってくる工数の削減できる ・機械的に作業できるすばらしさ(手作業よくない!ミスの原因!) ・作業手順をコード化できて、管理できる ・エンジニアが必要だった作業も、エンジニアに依存しなくできる
  8. 8. Hugoとは
  9. 9. Hugoとは 種類: 静的サイトジェネレータ 形態: OSS (Apache License) 概要: マークダウンを書くだけでブログシステムができる! 公式サイト: https://gohugo.io/ テーマ: https://themes.gohugo.io/ 他の静的サイトジェネレータはこんなのがあるみたいです! Gatsby / HEXO/ Jekyll / React Static / Phenomic / METALSMITH
  10. 10. 静的サイトジェネレータとは? その名の通り、静的サイトを作り出すソフトウェアです。 静的というのは、基本HTML、CSS、JavaScriptだけでできているということ。 マークダウンをINPUTに、コマンド1つでサイトを生成してくれるので、 シンプルなサイトを作りたいといった要望には、とても有効です。
  11. 11. メリット メリットはいっぱい! システムがないので、 ・レスポンスが非常に高速! ・セキュリティが堅牢! ・運用が楽!
  12. 12. 実際にブログを作ってみる
  13. 13. 前提条件 ・GitHubへのユーザ登録が完了している https://github.com/ ・CircleCIへのユーザ登録が完了している https://circleci.com/gh/issy-s16 ・hugoコマンドをローカルにインストール(Mac) $ brew install hugo
  14. 14. 手順.1 ・CircleCI × Hugoのテンプレートリポジトリをフォークし、 devブランチをデフォルトブランチに変更してクローンする。 https://github.com/issy-s16/quickstart-circleci-hugo-githubpages
  15. 15. 手順.2 ・フォークしたリポジトリにて、GitHub Pagesのブランチ設定を行う。 ※masterブランチのdocs配下を参照するように設定。
  16. 16. 手順.3 ・CircleCI側でフォークしたリポジトリを監視するように設定する
  17. 17. 手順.4 ・デプロイキーをWrite権限ありのものに変更する SSHの鍵を生成する。 $ ssh-keygen 公開鍵をGitHub上の対象リポジトリ>Settings>Deploy keysに追加する。 $ cat ~/.ssh/id_rsa.pub 秘密鍵をCircleCI上の対象リポジトリ>Settings>SSH Permissionsに追加する。 $ cat ~/.ssh/id_rsa
  18. 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. 19. 手順.6 ・テーマに合わせてconfig.tomlを書き換える $ cp themes/cocoa-eh/exampleSite/config.toml . 例: https://themes.gohugo.io/cocoa-eh-hugo-theme/
  20. 20. 手順.7 ・GitHub(リモートリポジトリ)のdevブランチにpushする $ git add -A $ git commit -m ‘xxxxx’ $ git push origin dev
  21. 21. Fin. ・あとはCircle CIが ・hugoコマンドを叩いてビルド ・ビルドされてできたソースをmasterブランチにpushしてくれるので、 完成 🎉 # 記事を書くときはhugoをローカルにインストールして $ hugo new posts/my-first-post.md
  22. 22. 解説 Circle CIのバージョン JOB名 Hugoのビルドを行うJOB GitHubリポジトリのチェックアウト 仮想マシンにHugoをインストールする submodule(theme)もチェックアウトする hugoコマンドでマークダウンを読み込んで、publicディレクトリにブログを生成してくれる 仮想マシンの状態をキャッシュして、次のJOBで復元する
  23. 23. 解説 デプロイ(ビルドされたソースをGitHub Pagesが参照しているmasterブランチにプッシュする作業) build JOBの状態を復元する docsディレクトリを上書きする際に削除されたファイルが残るのが嫌なため、ディレクトリごと削除してお く hugoコマンドで生成されたpublicディレクトリを、GitHub Pages参照先のdocsディレクトリとしてコピーする gitの初期設定 gitの初期設定 masterブランチを作成し切り替える ビルド済みの状態のソースコードをコミットする リモートリポジトリのmasterブランチにプッシュする
  24. 24. 解説 devブランチにプッシュされた時をトリガーとすることを設定 JOBごとの設定 devブランチにプッシュされた時をトリガーとすることを設定 build JOBの実行に成功したら起動することを設定
  25. 25. まとめ CircleCIの記述自体、かなりシンプルで導入コストも少ないなと感じました。 やはり作業効率アップだけでなく、機械的作業になることは リスクが減ってとてもいいことなので、自動化進めていきたいです。 ※仮想マシン1台実行なら無料なところも魅力ですね!(CircleCI)
  26. 26. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする のこと

×