つちのこです！
Hugo × GitLab × Netlifyでブログ環境を構築しましたが、情報が散見していたので主観で集約しました。

目次

概要

「表示速度が遅い!!」はイライラのもと

PageSpeed insightsは、Webサイトの表示速度を計測することが可能です。
Googleの調査では、表示速度が遅いと直帰率が増加することが示されています。

直帰率は、そのページから始まったすべてのセッションで、そのページがセッションに存在する唯一のページだった割合を示します。
出典：Googleアナリティクスヘルプ 離脱率と直帰率の違い

つまり、せっかく記事を読みに来てくれたのに
ブログの表示速度が遅いと他の記事を読まれる確率が低くなる…

高速なブログを無料で作りたい！

WordPressのようなブログサービスでは、サーバ上にDBを構築し、リクエストに対して都度HTMLを生成することで、Webブラウザで画面を確認することができます。
一方で、静的サイトジェネレータ(SSG:Static Site Generator)では、事前にHTMLを生成＋ホスティングによって画面を公開します。
参考：【2021注目】フロントエンド開発「静的サイトジェネレータ」

ちなみに、本ブログのPageSpeed insightsにおける評価は
パソコン：98/100点　モバイル：79/100点！！(多分結構早い方)

本ブログの目標

手順 サービス
ブログサイトの作成 Hugo
ホスティング Gitlab　×　Netfily
（独自ドメイン：~~~.netlify.app）

によって、無料で高速なブログを作ることを目標とします。

前提

  • WSL環境構築済み
    (作業環境としてWindowsでLinuxを使っているだけです)
  • gitLabアカウント作成済み

全体像

1.ブログサイトの作成

  1. Hugoのインストール
  2. サイトの立ち上げ
  3. テーマの設定(今回はtranquilpeak使用)
  4. 記事の作成
  5. サイトの確認
  6. テーマのカスタマイズ

2.ホスティング

  1. netlify.tomlの設定
  2. GitLabに構築したサイトをpush
  3. Netlifyのアカウント作成
  4. GitLabのホスティング

1-1. Hugoのインストール

[公式]Hugoインストールより、自分の環境に応じたコマンドを用いてHugoをインストールします。 ここでは、Linux環境なのでbrewコマンドを使用します。

brew install hugo

或いは

# .debのダウンロード
wget https://github.com/gohugoio/hugo/releases/download/v0.86.1/hugo_extended_0.86.1_Linux-64bit.deb
# hugoのインストール
sudo dpkg -i hugo_extended_0.86.1_Linux-64bit.deb

バージョンはこれで確認可能です。

hugo version

バージョン等はリリース状況はこちらから確認できます。
また、「hugo_」と「hugo_extended_」から始まるファイルの違いは、extendedから始まるものはSASS/SCSSにも対応しているということです。
上記のようにバージョンや普通版/extended版は選択するテーマによって依存しますので、各テーマの説明を確認してください。

例えば、m10cでは、0.55以上のバージョンが必要、scssにて自動コンパイルを行いたい場合はhugo_extendedが必要という条件があります。注意してください。

商用利用の際には、ライセンスにも注意してくださいね。

1-2. サイトの立ち上げ

下記コマンドにより、サイトを立ち上げます。

hugo new site {フォルダ名}

下のようなフォルダが新規に構成されます。 参考：[公式]ディレクトリ構造

{フォルダ名}
　├── config.toml --> サイト全体設定ファイル
　├── archetypes 
　　　　└── default.md --> 記事の共通設定ファイル
　├── content --> 記事格納用
　├── data    --> サイト生成データ格納用
　├── layouts --> HTML格納用
　├── static  --> 画像、CSS、Javascript格納用
　└── themes  --> テーマ格納用

この段階では、フォルダ内は基本的にはほぼ空です。ここからテーマを追加します。

1-3.テーマの設定(今回はtranquilpeak使用)

[公式]テーマ一覧から、好みのテーマを選択します。
デザインだけではなく、拡張性やライセンス面からも選ぶとよいでしょう。
参考に、テーマの人気ランキング(非定期更新?)も貼っておきます。 私はWeb制作関連の知識は乏しい方なので、config.tomlをいじるだけで簡単にカスタマイズが可能なTranquilpeakを選択しました。

[公式]NetlifyでHugoテーマを使うによると、git cloneでテーマをインストールする方法はNetlifyでサポートされていません。 よって、themesフォルダ内にhugo-tranquilpeak-themeをサブモジュール化*します。

*サブモジュール化とは、ある時点のコミット状態の外部gitリポジトリを自分のgitリポジトリのサブディレクトリとして登録すること。参考：Git submodule の基礎

cd {上記で生成されたフォルダ名}
git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/hugo-tranquilpeak-theme

これにより、フォルダ構成は以下の用に変わります。
先の類似構成がhugo-tranquilpeak-themeフォルダ内に作成されます。

{フォルダ名}
　├── config.toml --> サイト全体設定ファイル
　├── archetypes 
　　　　└── default.md --> 記事の共通設定ファイル
　├── content --> 記事格納用
　├── data    --> サイト生成データ格納用
　├── layouts --> HTML格納用
　├── static  --> 画像、CSS、Javascript格納用
　└── themes  --> テーマ格納用
<以下の構成はテーマによって異なります>
　　　 └── hugo-tranquilpeak-theme
　　　 　　　├── archetypes
　 　　　　　├── exampleSite
　　　　 　　　　　├── ・・・
　　　 　　　　　　└── config.toml
　 　　　　　├── layouts
　 　　　　　├── src
　 　　　　　├── static
　 　　　　　├── tasks
　 　　　　　├── ・・・
 　　　　　　└── README.md

Hugoでは同名ファイルの場合、上位ディレクトリのファイルを優先的に参照します。
そこで、上位のconfig.tomlをexampleSite内のconfig.tomlで上書きします。

cp themes/hugo-tranquilpeak-theme/exampleSite/config.toml .

これにより、tranquilpeakテーマに基づいた設定でサイトが構築されます(この段階はデフォルトの設定です)。

1-4. 記事の作成

下記コマンドにより、contentフォルダ内に記事が作成されます。

hugo new posts/{タイトル名}.md

その結果、以下の各々の設定内容で記事が作成されます。

  • デフォルトでは上位ディレクトリのarchetypesで指定された設定
---
title: "{タイトル名}"
date: {作成日時}
draft: true　　　--> 下書きか公開OKか
---

記事本文
  • テーマで設定されていれば、テーマ内archetypesで指定された設定
    (例えば、tranquilpeakの場合、上記コマンド「posts」→「post」にすると変わる)
---
title: "{タイトル名}"
date: {作成日時}
categories:
- category
- subcategory
tags:
- tag1
- tag2
keywords:
- tech
#thumbnailImage: //example.com/image.jpg
---

記事の概要（記事一覧画面に表示される）

<!--more-->

記事本文

1-5. サイトの確認(ローカル環境)

Hugoサーバを立ち上げ、ローカル環境でサイトを確認します。

hugo server

下書きの記事も公開したい場合は-Dをつけます。

hugo server -D

その後、localhost:1313にアクセスすることで、サイトを確認します。

1-6. テーマのカスタマイズ

テーマのカスタマイズは、[公式]テーマ一覧の各テーマ概要を確認してください。tranquilpeakの場合は、User documentationを参照ください。基本的にはconfig.tomlを変更することになります。

こちらはボリューム満点なので、別途記事で解説します。

2-1. netlify.tomlの設定

[公式]NetlifyにHugoバージョンを設定のnetlify.tomlを参考にし、HUGO_VERSIONを自分のHugoのバージョンに設定します。以下は、netlify.tomlの例。

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

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

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

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

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

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

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

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

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

設定したnetlify.tomlをconfig.tomlと同階層に配置します。

2-2. GitLabに構築したサイトをpush

ここは単純作業…

git remote add origin {リモートリポジトリ}
git status
git add .
git commit -m "{コメント}"
git push -u origin master

GitLabの対象リポジトリにてファイルが上がっているか確認します。

2-3. Netlifyのアカウント作成

netlify signupからアカウントを登録します。GitLabのアカウントと連携します。

2-4. GitLabのホスティング

「New site from Git」ボタンをクリックすると、以下の画面に遷移します。 「GitLab」を選択します。 ホスティングしたいリポジトリを選択します。

次の設定画面の内容はnetlify.tomlにて設定済みなので、「Deploy site」をクリックします。 サイトのデプロイ完了後、デフォルトでサブドメインが指定されていますが、こちらは変更可能です（この段階で、ネット上にGitLab上のサイトが公開されます）。

サブドメインが嫌であれば、お名前.com等から独自ドメインを購入(1,000-2,000円/年)し、Netlifyに登録することも可能です。その場合は「Add custom domain」から設定します。

また、万一ホスティングをやめたい場合は、General > Danger zone > Delete this siteboボタンよりサイトを削除することができます。

最後に

恐らくconfig.tomlを全く変更していない方は、適切なサイトが表示されていないと思います。 Netlifyで決定或いは購入したドメインをconfig.tomlのbaseURLに設定していないからです。

baseURL = "https://tsuchinoko-blog.netlify.app/"

これで、Hugo × GitLab × Netlifyを用いて、無料で高速なブログを簡単に構築することができました！