Netlify＋Hugoで静的サイトの公開を試してみた

ここしばらく、ブログを静的サイトジェネレータに載せ変えようと検証を進めています。 静的サイトジェネレータは、Hugoを使おうと考えています。

kapiecii.hatenablog.com

kapiecii.hatenablog.com

Hugoで作成した静的サイトを公開する環境として、どうやらNetlifyが便利そうです。

www.netlify.com

ということで、Hugo＋Netlifyの組み合わせを試してみました。

目次

参照URL

Hugoのドキュメントに沿って進めます。

gohugo.io

「Netlify can host your Hugo site with CDN, continuous deployment, 1-click HTTPS, an admin GUI, and its own CLI.」 だそうです。とても便利ですね。

Hugoの環境作成

先日の記事と同様に、Hugoコンテンツを作成します。

Golang製の静的サイトジェネレーター「HUGO」を試してみた - kapieciiのブログ

今回は「hugo-primer」というテーマで試してみました。

themes.gohugo.io

$ hugo new site hugo-on-netlify-sample
$ cd hugo-on-netlify-sample/
$ git submodule add https://github.com/qqhann/hugo-primer.git themes/hugo-primer

Hugo themeのドキュメントに従って、config.tomlを下記のように編集します。

# config.toml

baseURL = "https://test-hugo-kapiecii.netlify.com"
title = "kapiecii's Blog"
theme = "hugo-primer"
languageCode = "ja"
# If you are using Chinese, Japanese, or Korean, I highly recommend you to set this true.
hasCJKLanguage = true
summaryLength = 70
# Code pen
pygmentsCodeFences = true
pygmentsUseClasses = true
googleAnalytics = ""

# Enter a copyright notice to display in the site footer.
# To display a copyright symbol, type `©`.
copyright = "©kapiecii 2019"

[frontmatter]
# update sitemap.xml's lastmod datetime by file change time, instead of git.
lastmod = ["lastmod", ":fileModTime", ":default"]

[params]
description = "Describe what your web page is about"
twitter = "kapiecii"
# You can use favicon by addin them manually.
useIcon = true
useTwitterCard = true
# Use MathJax.js. Disabling site-wide and you still can enable in indivisual pages
math = true

shareTo = ["Twitter", "Hatena", "Facebook", "Pocket"]
showFooterCredits = true

コンテンツを作成

公開するコンテンツを作成します。 このとき、「draft」の値が「true」になっていると、Netlifyで公開する際に記事が公開されません。

$ hugo new posts/test-post.md
$ cat content/posts/test-post.md 
---
title: "Test Post"
date: 2020-01-09T18:49:04+09:00
draft: fault
categories:
- TestCategory
tags:
- TestTag
keywords:
- TestKeyword
---

# test hugo on netlify
* this is a test post.

$ hugo server -D

                   | EN  
+------------------+----+
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  3  
  Processed images |  0  
  Aliases          |  6  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 79 ms
Watching for changes in /xxx/hugo-on-netlify-sample/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /xxx/hugo-on-netlify-sample/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

コンテンツができました。

最初からTwitterやはてブのボタンが表示されるのはありがたいですね。 このコンテンツをNetlifyに載せてみます。

Githubにリポジトリ作成

Netlifyにアップロードするにあたり、まずはGithubにリポジトリを作成します。

$ git remote add origin https://github.com/kapiecii/hugo-netlify-test.git
$ git add .
$ git commit -m "init"
$ git push -u origin master

Netlifyの設定

Netlifyにログインし、先程作成したGithubリポジトリと連携したサイトを作成します。

「New site from Git」

Githubを選択

先ほど作成したHugoのリポジトリをNetlifyから参照できるように設定します。

Hugoのリポジトリを選択すると、自動でHugoを認識してくれていました。 「Deploy site」を実行

公開されました。

「netlify.toml」を追加

netlify.tomlでNetlify上のHugoの設定をします。

ローカルで使っているHugoのバージョンを調べておきます。

$ hugo version
Hugo Static Site Generator v0.61.0-9B445B9D/extended linux/amd64 BuildDate: 2019-12-11T08:33:29Z

調べたバージョン情報を入れて、netlify.tomlを作成します。

netlify.toml

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.61.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.61.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.61.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.61.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

netlify.tomlをGithubにpushします。

$ git add .
$ git commit -m "add netlify.toml"
$ git push

ブラウザから確認する

Githubにpushすると、自動でNetlify上でデプロイされます。 デプロイしたログは、Netlifyの「Deploys」内から確認することができます。

URLにアクセスすることで、コンテンツを確認することができました。

最後に

Hugo＋Netlifyで、静的コンテンツを公開してみました。
やはり静的コンテンツは表示が早くていいですね。「阿部 寛のホームページ」には敵いませんが、SNSのアイコン読み込みを含めても1秒程度で画面が表示されました。
Hugo+Netlifyを使う方法はわかったので、次はブログ全体の内容や構成を作り込んでいこうと思います。