Webサイト作成として最も先に挙がるのはマーケットシェア40%を超えるWordpressです。一方で個人で運用するとなると、記事を大量生産する方やWordpressの習熟している方でないと、無用の長物になってしまうこともあります。私もWordpressの環境構築を通してLinuxの勉強をしたりしていましたが、記事の作成はそこまでしていないため、HTMLより手軽に書けるMarkdown記法で記事を書けるHUGO を試してみました。HUGOはCloudflare にデプロイすることで、手軽に爆速環境のWebサイトを構築することができます。インストールは以下の手順です。

HUGO の公式手順は以下です。 https://gohugo.io/getting-started/quick-start/

1. 環境構築

1.1. 前提条件

WSL2 (Linux)
Ubuntu 24.04.1 LTS

1.2. hugo コマンドのインストール

インストールコマンドを実行。extended版(sass有効版)をインストール。私の場合は0.160でした。

$ wget https://github.com/gohugoio/hugo/releases/download/v0.160.0/hugo_extended_0.160.0_Linux-64bit.tar.gz
$ tar -xvzf hugo_extended_0.160.0_Linux-64bit.tar.gz 
$ sudo mv hugo /usr/local/bin/

1.3. サイト作成

サイトを作成し、テーマファイルをインストールします。テーマの一覧は以下から確認できます。今回は将来的にテーマの部分変更を行う可能性がありますので、テーマをforkして取り込みます。

https://github.com/CaiJimmy/hugo-theme-stack のページを開き、fork ボタンからforkし、自分のgitアカウントに forked リポジトリとして登録します。

その後、自分のリポジトリをcloneします。

$ hugo new site blog
$ cd blog
$ git init
$ clone https://github.com/<your-git-account>/hugo-theme-stack.git themes/stack
$ rm -rf "themes/stack/.git"

公式サイトのチュートリアルではadd moduleが推奨されていますので、特にテーマを変更する必要がなければadd modueを利用しましょう。

$ hugo new site blog
$ cd blog
$ git init
$ git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

1.4. サイト情報を更新

カレントディレクトリの下に hugo.toml が存在するため、このファイルにエンコード情報などを記載します。

baseURL = 'https://example.org/'
languageCode = 'ja-jp'
title = 'はろぐ'
theme = "stack"

1.5. 最初の記事を作成

content / posts の下に sample.md を作成し、最初の記事を書きます。

$ mkdir content/posts
$ touch content/posts/sample.md

記事の内容

---
title: "最初の投稿"
date: 2026-04-06T18:00:00+09:00
draft: false
tags: ["hugo", "test"]
categories: ["tech"]
---

1.6. サーバ起動

以下でテスト起動

$ /usr/local/bin/hugo server -D

正式ビルド

$ /usr/local/bin/hugo

1.7. 公開後

カレントディレクトリの下の hugo.toml のドメイン情報を更新します。

baseURL = 'https://log.hashihei.com'

1.8. Cloudflare 連携

Cloudflare では HUGO を公開するための簡単な設定があります。以下のメニューからGithub　と連携した自動更新を実施できます。

コンピュート > Workers & Pages > アプリケーションを作成する > Pages を導入しようとお考えですか? 始める > 既存の Git リポジトリをインポートする