Hugo + GitLab + Cloudflare Pagesで新しいblogを初めた(技術編)

今回はじめて作ったHugoサイトで使った技術について軽くまとめました。

Hugo環境の構築

環境構築はNix flakeで行いました。

まず、

1

nix flake init

を実行して、テンプレートのflake.nixを生成します。 これを以下のように編集して、Hugoと今後使いそうな画像処理ツールを導入したnix shellを作るようにします。

  • flake.nix
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  description = "Blog by Hugo";

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
  };

  outputs =
    { self, nixpkgs }:
    let
      platform = "x86_64-linux";
      pkgs = nixpkgs.legacyPackages.${platform};
    in
    {
      devShells.${platform}.default = pkgs.mkShell {

        packages = with pkgs; [
          hugo
          ## For image processing
          pngquant
          imagemagick
          exiftool
        ];

      };
    };
}

後はシェルから、

1

nix develop

を実行すればHugoが使えるシェル環境に入れます。

より便利にするために筆者はnix-direnvを導入しています。 nix-direnvでは、.envrcを以下のように用意して

  • .envrc
1

use flake

以下を実行して実行を許可すると、ディレクトリの移動でflakeの内容が適用されたシェルに入れるので便利です。

1

direnv allow

リポジトリのセットアップ

以下のブログ記事とそのリポジトリを参考にしました。特に.gitignore,hugo.yamlはとても参考になりました。

まず以下を実行してblogを作成しました。

1

hugo new site . --force

使用しているテーマStackは以下のようにsubmoduleとして導入しました。

1

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

Stack側のconfigであるhugo.yamlをプロジェクトルートにコピーして、デフォルトのconfigであるhugo.tomlを削除します。

1
2

cp themes/hugo-theme-stack/hugo.yaml .
rm hugo.toml

記事を追加する時は

1

hugo new content post/<post title>/index.md

を実行してから、index.mdに記事を書きます。

ローカルでの確認

以下を実行して表示されたURL(デフォルトではlocalhost:1313)にブラウザからアクセスすればokです。 記事やconfigに変更があると自動で再ビルドを実行して反映してくれます。

1

hugo server -D

デプロイ

Cloudflare Pagesにデプロイしました。 Cloudflare側から引っ張ってくるリポジトリを指定して、デプロイするブランチ(普通はmain)を指定すればそのリモートブランチへのpushをトリガにデプロイしてくれます。

ドメイン取得

Cloudflareは明朗会計でよくお勧めされていて、サイトをCloudflare Pagesでホスティングすることもあるので、Cloudflare Registrarで取得しました。 基本的には、トップページのドメインを購入するから手順通りに操作すれば良いです。 日本の住所を英語で入力するのは、慣れずに少し手こずりましたがそれ以外はすんなりと取得手続きできました。

Pagesにドメインを指定するには、Pagesの画面から独自ドメインを設定すればokです。

画像の配信

直接画像もリポジトリにpushしてしまうと、ビルドが重くなってしまうので他の方法で配信する方法を探していました。 以下の記事によると、個人ブログならCloudflare R2の無料枠で十分そうなので採用することにしました。

適当な名前のR2バケットを作成してから、Cloudflareで取得したこのサイトのドメインakiblog.orgのサブドメインimages.akiblog.orgで公開するように設定すれば、自動でDNSに設定されました。

以下はテストとして、筆者のアイコンの画像を配信した例です。

現状は、R2の管理画面から画像をアップロードしていますが、 AWS S3互換なのでAWS CLIを使ったアップロードなども検討しています。

ハマったポイント

最初、Cloudflareの画面からPagesの設定に行くのが分かりませんでした。 というのも、右側の コンピューティングとAI -> Workers & Pages -> アプリケーションを作成する、と進むと出てくるのはWorkersの選択画面でPagesが見つからなかったからです。

と思ったら下にLooking to deploy Pages? Get startedと小さくありました！(これは見落しそう)

CC BY
© 2020 - 2025 Aki
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。