---
title: "CloudBuildでブログの自動公開 | grasys blog"
url: "https://blog.grasys.io/post/matsubara/cloudbuild/"
description: "こんにちは松原です。 このEngineer blogですが、HugoというGo言語で実装された静的ファイル作成ツールによってページ作成をしています。 このブログを公開するまでの流れとしては、gitリポジトリからローカルへcloneを行い、Markdown記法でファイルを作成し、HugoコマンドにてHTMLファイルに変…"
---

# CloudBuildでブログの自動公開

-   ![](/_astro/noicon.CTHOhNiB_1HMs6A.webp)[matsubara](/authors/matsubara/)
-   公開日：2021年3月15日
-   カテゴリー：[Tech](/categories/tech/)
-   タグ：[#Cloud Build](/tags/cloud-build/)[#Google Cloud](/tags/google-cloud/)

![CloudBuildでブログの自動公開](/_astro/og-image.DDSiu2Ny_XHpDd.webp)

こんにちは松原です。

このEngineer blogですが、HugoというGo言語で実装された静的ファイル作成ツールによってページ作成をしています。  
このブログを公開するまでの流れとしては、gitリポジトリからローカルへcloneを行い、Markdown記法でファイルを作成し、HugoコマンドにてHTMLファイルに変換、その後にGCSへとアップロードを行なっています。  
今回はCloudBuildを使い、ビルドから公開までを自動化していきたいと思います。

## Hugoのイメージを作成

Hugoの公式のDockerイメージはないため、Dockerイメージを作成していきます。

Plain textcontent\_copy

```
FROM alpine:3.13.0

ENV HUGO_VERSION='0.80.0'
ENV HUGO_NAME="hugo_extended_${HUGO_VERSION}_Linux-64bit"
ENV HUGO_BASE_URL="https://github.com/gohugoio/hugo/releases/download"
ENV HUGO_URL="${HUGO_BASE_URL}/v${HUGO_VERSION}/${HUGO_NAME}.tar.gz"
ENV HUGO_CHECKSUM_URL="${HUGO_BASE_URL}/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_checksums.txt"

SHELL ["/bin/ash", "-eo", "pipefail", "-c"]
RUN apk add --no-cache --virtual .build-deps wget && \
    apk add --no-cache \
    bash \
    libc6-compat \
    libstdc++

WORKDIR /hugo

RUN wget --quiet "${HUGO_URL}" && \
    wget --quiet "${HUGO_CHECKSUM_URL}" && \
    grep "${HUGO_NAME}.tar.gz" "./hugo_${HUGO_VERSION}_checksums.txt" | sha256sum -c - && \
    tar -zxvf "${HUGO_NAME}.tar.gz" && \
    mv ./hugo /usr/bin/hugo && \
    rm -rf /hugo && \
    apk del .build-deps

WORKDIR /workspace

ENTRYPOINT ["/usr/bin/hugo"]
```

CloudBuildで動かすため、WORKDIRはデフォルトの`/workspace`にしています。  
こちらのDockerfileからDockerイメージを作成し、GCRへpushします。

Plain textcontent\_copy

```
docker build -t asia.gcr.io/xxxxxxxx/hugo .
docker push asia.gcr.io/xxxxxxxx/hugo
```

### CloudBuildの構成ファイルを作成

次にCloudBuildの構成ファイルを作成します。  
先ほど作ったHugoのビルド用のイメージの実行設定と、ビルドによって`public`配下へ配置された成果物をGCSへアップする設定を行います。  
`cloudbuild.yaml`というファイル名で作成します。

Plain textcontent\_copy

```
steps:
  - name: 'asia.gcr.io/xxxxxxxx/hugo:latest'
    args: ["--cleanDestinationDir"]
  - name: 'google/cloud-sdk'
    entrypoint: "bash"
    args:
      - "-c"
      - |
                gsutil -m -h "Cache-Control:public,max-age=3600" rsync -j js,css,html,json,xml -c -r -d -p public gs://xxxxxxxx/public
```

＊`gcr.io/cloud-builders/gsutil`を使用し`gsutil rsync`を行なってみましたが、オプションの設定がうまく動作しなかったため、 CloudSDK内のgsutilを使うためイメージは`google/cloud-sdk`を使用することにしました。

### CloudBuildのトリガー設定

次にCloudBuildのトリガー設定です。  
Google Consoleから`CloudBuild`\>`トリガー`の順に遷移し、トリガー作成をします。  
`新しいリポジトリに接続`をクリックします。

![CloudBuildのトリガー設定の画面（1）](/_astro/01-16-1-916x1024-96a27f27.Cna2Ielq_Z1TDe6k.webp)

リポジトリについては既存のBitbucketのリポジトリをミラーリングします。

![CloudBuildのトリガー設定の写真（1）](/_astro/02-17-1-da84a7e3.Ct130O_A_1L8ts8.webp)

トリガー名とブランチ名を設定します。

![CloudBuildのトリガー設定の写真（2）](/_astro/03-18-1-938x1024-f6db3d94.D7NFRcMx_Im3rT.webp)

ビルド構成は先ほど作った構成ファイル`cloudbuild.yaml`を指定します。

![CloudBuildのトリガー設定の画面（2）](/_astro/04-19-21644a2a.ChFsuZMV_fyPe7.webp)

設定項目は以上なのでトリガーを作成します。

![CloudBuildのトリガー設定の画面（3）](/_astro/05-20-1024x165-b2895469.C3RsQGRs_vtkLD.webp)

作成されました。  
CloudBuildの設定が完了です。

これでBitbucketのリポジトリへのpushをするだけで、 HugoのビルドとGCSへのアップロードをCloudBuildが行なってくれる様になりました。

## この記事を書いた人

[![](/_astro/matsubara.B6oqBkIq_hrBOG.webp)](/authors/matsubara/)

### [matsubara](/authors/matsubara/)

matsubaraのプロフィールと執筆記事をご覧いただけます。

[プロフィールと記事一覧](/authors/matsubara/)