avatar Hiroyuki Nishizawa / Docker と HUGO と Netlify で Web サイトを作る - (1)
Created 2020-01-12 Modifyed 2020-05-24

2558 Words

Build a website with HUGO on Docker and deploy to Netlify - (1).

自分のWebサイトを作ろうとしたのですが、
「イケてるデザインが良い」
「Markdown でブログ書きたい」
「https 化したい」
「簡単に作りたい」
「独自ドメインにしたい」
「無料が良い」
など要望が多すぎた為（我がままか）、Qiita や note、はてなブログ、GitHub Pages などが候補から消えました。

そこで Docker でローカル環境を汚さず、HUGO で簡単に Markdown でブログが書けるイケてるデザインな Web サイトを作り、Netlify に無料で独自ドメインで https 化してデプロイしました。
今回はその過程で作ったテンプレートを紹介しつつ、ハマったポイントなどを書きます。

環境

  • macOS Catalina バージョン 10.15.2
  • Docker version 19.03.5, build 633a0ea
  • docker-compose version 1.24.1, build 4667896b

他人任せな一言技術紹介

タイトルに登場した Docker、HUGO、Netlify について他人任せに紹介します。

Docker って？

Docker はコンテナ型の仮想環境です。
詳細はコンテナ技術入門 - 仮想化との違いを知り、要素技術を触って学ぼうやいまさらだけど Docker に入門したので分かりやすくまとめてみたをご覧ください。

HUGO って？

HUGO は Golang 製の静的ページジェネレータです。
詳細は HUGO とは？や HUGO で静的サイトを作成してみたをご覧ください。

Netlify って？

Netlify は静的なサイトを簡単にホスティングできるサービスです。
詳細は高機能ホスティングサービス Netlify について調べて使ってみたをご覧ください。

テンプレートを使い、Web サイトを構築する

今回作ったテンプレートを使って Web サイトの構築と Deploy までやってみます。
基本的には README.md の手順に従えばできると思います。

1. GitHub からテンプレートをクローンする

>><(( o> git clone https://github.com/PiroHiroPiro/docker_template_hugo_netlify.git
Cloning into 'docker_template_hugo_netlify'...
remote: Enumerating objects: 35, done.
remote: Counting objects: 100% (35/35), done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 35 (delta 9), reused 35 (delta 9), pack-reused 0
Unpacking objects: 100% (35/35), done.

>><(( o> cd docker_template_hugo_netlify
>><(( o> git remote remove origin

クローンした後、リモートリポジトリを削除します。
これは後ほど Web サイトを Netlify にデプロイするために、リモートリポジトリを皆さんのリモートリポジトリに変更するからです。

2. Docker image をビルドする

>><(( o> docker-compose build
Building hugo
Step 1/9 : FROM golang:1.13-alpine3.11
 ---> 57ce7b9daa9b
Step 2/9 : ENV HUGO_VERSION="0.62.2"
 ---> Using cache
 ---> 16880e99b51a
Step 3/9 : ENV HUGO_NAME="hugo_extended_${HUGO_VERSION}_Linux-64bit"
 ---> Using cache
 ---> 1d14f9b118fc
Step 4/9 : ENV HUGO_BASE_URL="https://github.com/gohugoio/hugo/releases/download"
 ---> Using cache
 ---> 464c3a0f0897
Step 5/9 : ENV HUGO_URL="${HUGO_BASE_URL}/v${HUGO_VERSION}/${HUGO_NAME}.tar.gz"
 ---> Using cache
 ---> 6ef2512f2151
Step 6/9 : ENV HUGO_CHECKSUM_URL="${HUGO_BASE_URL}/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_checksums.txt"
 ---> Using cache
 ---> d3c6e3da45a5
Step 7/9 : SHELL ["/bin/ash", "-eo", "pipefail", "-c"]
 ---> Using cache
 ---> cc13d221117f
Step 8/9 : RUN cd /tmp     && apk add --no-cache     git     ca-certificates     libc6-compat     libstdc++     && apk add --no-cache --virtual .build-deps wget     && 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     && cd /     && apk del .build-deps     && rm -rf /hugo
 ---> Using cache
 ---> be1c78fbb243
Step 9/9 : CMD [ "hugo", "server", "--bind=0.0.0.0", "--buildDrafts" ]
 ---> Using cache
 ---> 328b9032f679
Successfully built 328b9032f679
Successfully tagged docker_template_hugo_netlify_hugo:latest

3. Web サイトを構築する

>><(( o> docker-compose run hugo hugo new site .
Creating network "docker_template_hugo_netlify_default" with the default driver
Congratulations! Your new Hugo site is created in /usr/src/site.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

git にコミットしておきましょう。

>><(( o> git add .
>><(( o> git commit -m "✨ create new site"

4. テーマを選んで GitHub からクローンする

テーマは Hugo Themes から選べます。
今回は NormandErwan/Blogpaper にしました。

>><(( o> git submodule add https://github.com/NormandErwan/Blogpaper site/themes/Blogpaper
Cloning into '/Users/nishizawa/dev/docker_template_hugo_netlify/site/themes/Blogpaper'...
remote: Enumerating objects: 682, done.
remote: Counting objects: 100% (682/682), done.
remote: Compressing objects: 100% (309/309), done.
remote: Total 1991 (delta 342), reused 603 (delta 287), pack-reused 1309
Receiving objects: 100% (1991/1991), 8.27 MiB | 988.00 KiB/s, done.
Resolving deltas: 100% (1016/1016), done.

site/config.toml で選択したテーマ名を指定します。
これは site/themes 配下にあるディレクトリの名前になります。

...
theme = "Blogpaper"

この時点で Web サイトができているかと思います。
下記コマンドでサーバを立ち上げ、localhost:1313 をブラウザで開いてください。

>><(( o> docker-compose up

FireShot Capture 003 - My New Hugo Site - My New Hugo Site - localhost

こんな感じになったのではないでしょうか？
まだ何もないので、ここまでの変更をコミットして次に記事を追加していきましょう。

>><(( o> git add .
>><(( o> git commit -m "🎨 change theme"

5. ブログ記事を追加する

site/content/posts 配下においたファイルが一つの記事として扱われます。 hugo new コマンドで site/archetypes/default.md から記事を生成できます。

>><(( o> docker-compose run hugo hugo new posts/first-post.md

いくつか記事を追加して確認してみましょう。

>><(( o> docker-compose run hugo hugo new posts/second-post.md
>><(( o> docker-compose run hugo hugo new posts/third-post.md

FireShot Capture 002 - My New Hugo Site - My New Hugo Site - localhost

無事に追加されていますね！
ブログっぽくなってきました。

6. GitHub にプッシュする

⚠️ この記事では GitHub で話を進めますので、GitLab 等お使いの方は適宜書き換えてください。

では今作った Web サイトを実際に公開してみましょう。

まず先ほど作った記事を修正する必要があります。
site/content/posts/ 配下のファイルに対して、draft: true と書かれた一行を削除して下さい。
この一行がある場合、記事はデフォルトでは非公開になります（参考：Front Matter - Front Matter Variables - Predefined - draft）。
ではなぜローカル環境では表示されるのかというと、docker/hugo/Dockerfile 内に書かれているローカルサーバの起動コマンドに --buildDrafts オプションがついている為です。

続いて GitHub で新しくリポジトリを作成してください。
Public リポジトリでも Privete リポジトリでも問題ありません。
リポジトリが作れたらリモートリポジトリに追加し、プッシュします。

>><(( o> git add .
>><(( o> git commit -m "👍 add posts"
>><(( o> git remote add origin [REMOTE REPOSITORY URL]
>><(( o> git push -u origin master

7. Netlify にデプロイする

では Netlify にデプロイしてみましょう。

まず Netlify にアクセスし、ログインします。
トップページで New site from Git をクリックして下さい。

  1. Connect to Git provider
    GitHub を選択します。
  2. Pick a repository
    リポジトリの一覧が出てくるので、先ほど作ったリポジトリを選びます。
  3. Build options, and deploy!
    何も変更せず、一番下の Deploy site をクリックします。

少し待つと Site deploy in progress が消え URL となると思います。
URLをクリックすると先ほどの画面が見れるのではないでしょうか？

お疲れ様です！
デプロイが完了しました🎉

ハマったポイント

テンプレートを作る時にハマったところについて説明したいと思います。

Netlify へのデプロイ周り

[build]
base    = "site/"
publish = "public"
command = "hugo --minify --gc --enableGitInfo"

[context.production.environment]
HUGO_VERSION = "0.62.2"

まず netlify.toml の設定ですが、リポジトリのルートではなく site/ 配下に HUGO のプロジェクトがあります。
その為 base = "site/" とする必要があります。

また HUGO では記事の更新日時を Git の情報から取得することができます。
設定するには config.toml に enableGitInfo = true を書く方法と、ビルド時に --enableGitInfo オプションを付ける方法があります。
前者の場合ローカル環境でサーバを立てる場合にも Git の情報が使われますが、Docker コンテナ内にはファイルの変更を追跡しているリポジトリはない為エラーが出ます。
なので後者を採用し、Netlify でビルドするタイミングで Git の情報から更新日時を取得しています。

まとめ

今回は HUGO でサイトを構築し Netlify にデプロイしました。
しかしデプロイしたサイトにアクセスすると Netlify より Alert: Insecure mixed content detected in SITE NAME といった趣旨のメールが届いたのではないでしょうか？
次回はこれらの解決や独自ドメインの追加、HUGO の各種設定について書いていきたいと思います。

comments powered by Disqus