Hugo+Circle CI+AWSによるBlog開設

Takahiro Numata

Published in

CREWZ Blog

7 min readApr 11, 2018

はじめまして、CREWZのエンジニアの沼田です。

CREWZには情報公開の場として、MediumとCREWZ技術ブログの２つを使用しています。

今回は、技術ブログであるhttp://lab.crewzent.com/で使っているHugoについて紹介していきます。

Hugoのメリット

Hugoについて一言でまとめるなら、静的なページをMarkdownから生成してくれるフレームワークです。

公開されるのは静的はHTMLなので、WordPressのようにAdminサイトが公開状態になることもありません。

流石にカスタマイズの幅には制限がありますが、最小限のコストで運用するのであれば充分だと思います。

The world’s fastest framework for building websites

最終的なゴール

ローカルでプレビューしながら記事を編集
AWS上に静的ページをホストする
GithubのmasterBranchにpushするとデプロイが開始する

サイト準備編

Hugoのインストール

まずはローカルにHugoをインストールします Macの場合はHomeBrew Windowsの場合はChocolateyが使えます。

Install Hugo

自分はmacなのでHomebrew経由でインストールしました。

brew install hugo

Hugoのサイト作成

インストールが終わったら、Hugoのプロジェクトを作成します。your_project_nameには好きな名前を入れます。

hugo new site your_project_name

Themeのダウンロード

Hugoでは、作成したコンテンツをThemeの設定に従って静的ページを生成します HugoのThemesのページから好きなThemeをダウンロードします。

Complete List

BlogからOne Pageデザインなものまで、手広く揃っています。

CrewzではBlackburnを採用しました。

Blackburn

インストール方法はThemeの説明ページに記載されています。

// your_project_name directoryにて
 mkdir themes
 cd themes
 git clone https://github.com/yoshiharuyamashita/blackburn.git

Themeのconfigを設定

それぞれのThemeにはconfig.tomlというファイルが存在します。これはサイト名、GoogleAnalytics IDといった内容をカスタマイズするためのものです。

変数の指定方法はThemeごとに異なるので、各ドキュメントを参照してください。

ローカルサーバーの起動

記事を作成したり、設定の変更をローカルサーバーで確認できます。

-t の後の変数は指定するTheme名です。

hugo serve -t blackburn

問題なく進んでいればport1313でローカルホストにアクセスするとサイトが表示されます。

http://localhost:1313/

Host編

ここまでで、Hugoのサイトが準備できました次はホスト先のS3の設定を行います。

静的ページのみ、デプロイするため、S3だけでブログの運営ができるのはHugoの大きなメリットだと思います。

S3の用意

まずはS3のバケットを用意します Route53でドメインを設定する予定なので、バケット名は公開予定のドメイン名と同じにしておきます今回はlab.crewzent.comです。

バケット作成後、Static website hostingの項目を設定し、静的ページとして公開します。

この時インデックスドキュメントはindex.htmlとします。

最後にバケットポリシーを設定してS3の設定は完了です。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-backet-name/*"
            ]
        }
    ]
}

より具体的はS3ホスティングの方法はAWSのドキュメントで確認できます。

静的ウェブサイトホスティング用に S3 バケットを設定する方法 — Amazon Simple Storage Service

独自ドメインへの設定はRoute53を使用しましたここでは割愛します。

デプロイ編

ホスト先のS3の準備が完了したので、次はデプロイ自動化の設定を行います。

Circle CIからS3へデプロイする設定ファイルを作成しましょう。

CIの流れは以下の通りです。

hugoのインストール
hugoコマンドで静的ページを生成
publicディレクトリをS3にデプロイ

CrewzでのHugo運用ルールとして、publicディレクトリはgit管理下に置いていません。そのため、毎回publicディレクトリを再生成しています。

これでmasterにコミットがpushされると、S3上のページが更新されます。

general:
  build_dir:
    /
  branches:
    only:
      - master
      - deploy_cicheckout:
  post:
    - wget https://github.com/gohugoio/hugo/releases/download/v0.37.1/hugo_0.37.1_Linux-64bit.deb
    - sudo dpkg -i hugo_0.37.1_Linux-64bit.debmachine:
  timezone:
    Asia/Tokyo
dependencies:
  pre:
    - sudo pip install awscli
  post:
    - touch application-`date +"%Y-%m%d-%I-%M-%S"` && mv application-* $CIRCLE_ARTIFACTS
    - hugo
    - cd publictest:
  override:
    - echo "skip test"deployment:
  production: # just a label; label names are completely up to you
    branch: master
    commands:
      - ls
      - aws s3 sync ./public s3://lab.crewzent.com/ --delete  staging:
    branch: deploy_ci
    commands:
      - ls
      - aws s3 sync ./public s3://lab.crewzent.com/ --delete

使ってみた感想など

初期設定は少し手間ですが、終わってしまったあとはメンテ・セキュリティ的に運用コストはほぼ0でまわしていけると思います。脆弱性の発覚ニュースやアタックなどに怯えなくていいのも、精神衛生上非常に良いです。

設定後はmarkdownを書くだけなので、非エンジニアの方にもそこまでハードルは高くないと思います。

CREWの技術ブログは実際にHugoで運用されていますので、Hugoでのブログがどういう見え方をするのか、ぜひアクセスして確認してみてくださいhttp://lab.crewzent.com/

CREWZでは、ブロックチェーン開発に注力しています。

オリジナルの記事はこちら（CREWZラボ）