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

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

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

CREWZには情報公開の場として、MediumとCREWZ技術ブログの2つを使用しています。 今回は、技術ブログであるlab.rewzで使っている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ごとに異なるので、各ドキュメントを参照してください。

Blackburnの設定方法について記載します。

ローカルサーバーの起動

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

-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の流れは以下の通りです。

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

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

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

general:
  build_dir:
    /
  branches:
    only:
      - master
      - deploy_ci

checkout:
  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.deb

machine:
  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 public

test:
  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を書くだけなので、非エンジニアの方にもそこまでハードルは高くないと思います。