AlmaLinux 10にHugo(Extended版)をインストールして静的サイトを公開する手順

記事内に広告が含まれています。

Go言語製の超高速な静的サイトジェネレーター「Hugo」(ヒューゴ)をAlmaLinux 10に導入し、新規サイトをブラウザで表示するまでの手順を解説します。

AlmaLinuxなどのRHEL系環境でモダンなテーマ(SCSS対応)を利用するには、最新のExtended版バイナリ(.tar.gz)を直接導入するのが最も確実でトラブルがありません。

本記事では最新のHugo Extended版の導入手順と、VPS環境での安全なプレビュー方法まで詳しく紹介します。

※この記事は、Ubuntu用のインストール手順をAlmaLinux 10用に再編集したものです。
元記事: https://vpslife.server-memo.net/ubuntu-hugo-install/

Hugoとは?なぜVPS運用に最適なのか

「Hugo」は、Markdown形式で書いた記事ファイルから、HTML/CSS/JavaScriptなどのWebサイト一式を生成(ビルド)してくれる静的サイトジェネレーター(SSG: Static Site Generator)です。

VPSでHugoを動かす3大メリット

  • 圧倒的な表示速度と低負荷: PHPやDBを使わず静的HTMLを配るため、安価なVPSでも高速に動作します。
  • 高いセキュリティ: 管理画面やDBがないため、不正アクセスやプラグイン脆弱性のリスクがほぼありません。
  • Gitで簡単バックアップ: 記事・設定がすべてプレーンテキストなので、Gitによるバージョン管理や保全が容易です。

テーマ導入で失敗しないための最重要知識:「Standard版」と「Extended版」

「Hugo」をインストールする前に、絶対に知っておくべき違いがあります。

それは「通常版(Standard)」と「拡張版(Extended)」の存在です。

  • Standard版: 基本的なMarkdown変換機能のみを持つ通常版。
  • Extended版: Standard版の機能に加え、Sass/SCSSのトランスパイル(CSSへの変換)機能や画像処理・WebP変換機能などを内包した機能拡張版。

テーマ導入で詰まる原因No.1!

近年人気のあるHugoテーマ(PaperMod、Blowfish、Ananke、Congoなど)の多くは、スタイルシートにSCSSを採用しています。

Standard版をインストールしてしまうと、SCSSを採用したテーマを適用した際にビルドエラーが発生してしまいます。

そのため、特別な理由がない限りは「Extended版」を選択することを強く推奨します。

インストール方法の選び方:なぜSnap版ではなく「バイナリ(tar.gz)版」なのか?

AlmaLinuxでHugoを導入する方法には主に「GitHub Releases(tar.gzバイナリ)」「Snap」「ソースからのビルド」などがありますが、VPS環境では「GitHub Releases(バイナリ tar.gz)」一択です。

インストール方法 バージョン Extended おすすめ度 特徴と注意点
GitHub Releases (tar.gz) 最新版 〇 ★★★★★ 【推奨】 単一バイナリで動作が軽量、依存関係トラブルがなく最新のExtended版が確実に手に入る。
Snap (snap install) 最新版 〇 ★★☆☆☆ 手軽だが、EPELが必要でVPS環境ではデメリットが多い(後述)。
ソースビルド (Go install) 最新版 〇 ★★☆☆☆ GoコンパイラやC言語ツールが必要で、ビルドにメモリと時間を消費する。

知っておくべき「Snap版」の3つのデメリット

コマンドで手軽に入るSnap版(snap install hugo)は一見便利ですが、AlmaLinuxのVPS運用では以下のデメリットがあります。

  • リソース(メモリ・ディスク)の浪費: 常駐デーモン(snapd)がメモリを常時消費し、複数バージョン保持によりディスクも圧迫します。
  • サンドボックスによる権限エラー: 隔離環境で動作するため、「/var/www」への配置やGit等の外部ツール連携でパーミッションエラーが発生しやすくなります。
  • 強制的な自動更新によるビルド破壊: バックグラウンドで勝手に更新されるため、Hugoの仕様変更によって突然サイトがビルドできなくなるリスクがあります。

そのため、余計な常駐プロセスがなく、環境を汚さない 「GitHub Releases(バイナリ tar.gz)」 を使ってインストールします。

GitHub Releasesから最新のExtended版をインストール

GitHub Releasesで配布されているアーカイブ(.tar.gz)から実行バイナリを取り出し、システム(/usr/local/bin)へインストールします。

前提ツールのインストール

ファイルのダウンロードに必要な「curl」と解凍用の「tar」、テーマ管理で必須となる「git」をインストールしておきます。

# curl、git、tarのインストール
sudo dnf install -y curl git tar

最新バージョンのExtended版アーカイブをダウンロード

まずはお使いのサーバーのCPUアーキテクチャを確認します。

# CPUアーキテクチャの確認(通常は x86_64、ARM系の場合は aarch64)
uname -m

公式GitHubリポジトリのリリース一覧から、該当するアーキテクチャの「.tar.gz」ファイルのダウンロードURLを取得します。
Hugo Releases (GitHub)

  • x86_64 (Intel / AMD系VPS): hugo_extended_<バージョン>_linux-amd64.tar.gz
  • aarch64 (ARM系VPS): hugo_extended_<バージョン>_linux-arm64.tar.gz
  1. GitHub Releasesを開き、「Latest」と表記された最新リリースの 「Assets」 項目を開きます(見当たらない場合は「Show all xx assets」をクリックして展開)。
  2. 該当するExtended版の「.tar.gz」ファイルを右クリックし、「リンクのアドレスをコピー」 します。
  3. コピーしたURLを指定し、サーバー上で curl コマンドを実行してダウンロードします。

例えば、バージョンが「v0.168.0」(amd64)の場合は以下のように実行します。

curl -LO https://github.com/gohugoio/hugo/releases/download/v0.168.0/hugo_extended_0.168.0_linux-amd64.tar.gz

最新バージョンのダウンロードを自動化するコマンド

Webブラウザでダウンロード用URLをコピーしてダウンロードする以外にも、以下のコマンドを実行すると、GitHub APIを利用してお使いの環境に合った最新のExtended版の「.tar.gz」ファイルを自動で判定・ダウンロードできます。

ARCH=$(uname -m | sed -e 's/x86_64/amd64/' -e 's/aarch64/arm64/')
LATEST_URL=$(curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest \
| grep "browser_download_url.*hugo_extended_.*_linux-${ARCH}.tar.gz" \
| grep -v "withdeploy" \
| cut -d '"' -f 4)

echo "ダウンロードURL: $LATEST_URL"
curl -LO "$LATEST_URL"

※1行目でCPUアーキテクチャ(x86_64 / aarch64)を判定し、最新のExtended版アーカイブを取得しています。ダウンロード完了後は、ファイル名が最新バージョンになっているか確認してください。

アーカイブの展開とインストール

ダウンロードした「.tar.gz」アーカイブを展開し、実行バイナリ「hugo」をPATHの通っている「/usr/local/bin/」に配置します。

# アーカイブ名と同名のディレクトリを作成して解凍
tar -zxvf hugo_extended_0.168.0_linux-amd64.tar.gz --one-top-level

# バイナリを /usr/local/bin へインストール(実行権限の付与)
sudo install -m 755 hugo_extended_0.168.0_linux-amd64/hugo /usr/local/bin/hugo

# 展開したディレクトリの削除(任意)
rm -rf hugo_extended_0.168.0_linux-amd64

※「--one-top-level」オプションを付けることで、アーカイブ名と同名のディレクトリが自動作成され、その中にファイルが展開されます(カレントディレクトリにファイルが散らばるのを防げます)。

また、「install -m 755」コマンドを使うことで、実行権限(755)を付与した状態で安全に配置できます。

インストールの確認(バージョンのチェック)

インストールが正常に完了したか、バージョンの確認をします。

hugo version

出力例:

$ hugo version
hugo v0.168.0-e27a6760c5547237f87d353aebe0580feadb20f4+extended linux/amd64 BuildDate=2026-10-13T16:42:50Z VendorInfo=gohugoio

重要なのは、バージョン表記の中に「+extended」の文字が含まれていることです。

この表記があれば、SCSS対応テーマも問題なく動作するExtended版が正しくインストールされています。

新規サイトの作成から表示確認まで

「Hugo」のインストールが完了したら、実際に新しいサイトを作成してブラウザで表示される状態まで動かしてみます。

サイトの雛形を作成

「hugo new site」コマンドを実行すると、新規サイト用のディレクトリと必要な設定ファイルの雛形が作成されます。

今回はユーザーのホームディレクトリ直下に「myblog」という名前で、新規サイトを作成していきます。

# 「myblog」というディレクトリ名で新規サイトを作成
hugo new site myblog

# 作成されたサイトのディレクトリに移動
cd myblog

# ディレクトリ構成の確認
ls -la
total 44
drwxr-xr-x 10 tamohiko tamohiko 4096 Oct 19 12:12 .
drwx------  9 tamohiko tamohiko 4096 Oct 19 12:12 ..
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 archetypes
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 assets
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 content
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 data
-rw-r--r--  1 tamohiko tamohiko   80 Oct 19 12:12 hugo.toml
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 i18n
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 layouts
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 static
drwxr-xr-x  2 tamohiko tamohiko 4096 Oct 19 12:12 themes

生成された主なディレクトリと役割

  • archetypes/default.md : 新規記事の雛形テンプレート
  • assets/ : Hugoで最適化・加工するアセット(SCSSや画像など)を格納する場所
  • content/ : 実際の記事(Markdown)を格納する場所
  • data/ : 構造化データ(JSON / YAML / TOML)を格納する場所
  • i18n/ : 翻訳ファイルを格納する場所
  • layouts/ : 自作のHTMLテンプレートを格納する場所
  • static/ : 加工せずそのまま配信する静的ファイル(画像・favicon等)を格納する場所
  • themes/ : 外部から導入したテーマを格納する場所
  • hugo.toml : サイトの全体設定ファイル

テーマを導入する

「Hugo」の初期状態はデザインテンプレート(テーマ)を持っていません。

そのため、テーマを設定せずにサーバーを起動すると、ブラウザでアクセスしても真っ白な画面になってしまいます。

今回は、シンプルで高速・機能豊富な人気テーマ 「PaperMod」 を「Git submodule」として導入します。

# Gitリポジトリを初期化
git init

# PaperModテーマをサブモジュールとして追加
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# 設定ファイル(hugo.toml)に使用テーマを追記
echo "theme = 'PaperMod'" >> hugo.toml

テスト記事を作成する

「hugo new content」コマンドで「posts」ディレクトリ配下に新規記事(Markdown)を作成します。

hugo new content posts/my-first-post.md

このコマンドは、プロジェクトルートの「archetypes/default.md」の内容をもとに「content/posts/my-first-post.md」を作成してくれる機能です。

作成された「content/posts/my-first-post.md」をエディタで開いてみると、Markdownの冒頭につけるフロントマターと呼ばれるメタデータがあらかじめ記述されていますので、そこに本文を追記してみます。

+++
date = '2026-10-19T15:04:58+09:00'
draft = true
title = 'My First Post'
+++
以下追加した本文
## Hello World !!  
Hugoでブログを立ち上げました。

※「draft = true」は「下書き状態」を意味します。

開発サーバーを起動

Hugoにはローカルで動作する高速な開発用サーバー機能が備わっていますので、下書き(draft)状態の記事も含めてリアルタイムにプレビューできるよう、「-D」オプションをつけて起動します。

「hugo new site」で作成したサイトのルートディレクトリに移動して、以下のコマンドを実行してください。

# 下書き(draft)記事も含めて表示するように開発サーバーを起動
hugo server -D

カレントディレクトリを移動せずに実行したい場合は、「-s」(--source)オプションでディレクトリのパスを指定して起動することも可能です。

hugo server -s ~/myblog -D 

起動時のログ例

開発サーバーが正常に起動すると、ターミナルに以下のようなビルド情報とURLが出力されます。

$ hugo server -D
Watching for changes in /home/tamohiko/myblog/archetypes, ...

### 中略 ###


                  │ EN 
──────────────────┼────
 Pages            │ 11 
 Paginator pages  │  0 
 Non-page files   │  0 
 Static files     │  0 
 Processed images │  0 
 Aliases          │  2 
 Cleaned          │  0 

Built in 6 ms
Environment: "development"
Serving pages from disk
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

プレビュー画面の表示方法

開発サーバーを起動したら、ブラウザ上でリアルタイムに記事のプレビューを確認することができます。

「Hugo」をインストールした環境が「ローカル環境(手元のPC)」か「リモートサーバー(VPS等)」によってプレビュー画面を表示する方法が異なるので、それぞれの方法について説明します。

ローカル環境(手元のPC)に「Hugo」をインストールした場合

手元のPCで直接「Hugo」を動かしている場合は、Webブラウザで「http://localhost:1313/」を開くだけでプレビュー画面が表示されます。

リモートサーバー(VPS等)に「Hugo」をインストールした場合

VPSなどのリモートサーバー上で「Hugo」を動かしている場合、手元のブラウザでプレビュー画面を表示するには主に以下の2つの方法があります。

  • SSHポートフォワーディングを使う(推奨)
  • バインドIPを指定して直接アクセスする(手軽な方法)

SSHポートフォワーディングを使う(推奨)

SSHのポートフォワーディング(トンネリング)機能を使用すると、VPS側のファイアウォール設定を変更することなく、外部に開発ポートを晒さずにアクセスできるので、最も安全でおすすめの方法です。

手元PCの端末(ターミナルやPowerShell)から以下のコマンドを実行し、リモートサーバーとの間にSSHでトンネルを確立します。

# 【手元PC側で実行】リモートサーバーの1313ポートを手元PCの1313ポートに転送
ssh -L 1313:localhost:1313 ユーザー名@リモートサーバーのIPアドレス

トンネルが作成されると、手元PCの「1313」番ポートへの通信がリモートサーバーの「1313」番ポートへ安全に転送されます。

手元PCのWebブラウザで「http://localhost:1313」 を開くと、トンネル経由でリモートサーバー上の「Hugo」で作成されたプレビュー画面を表示できます。

バインドIPを指定して直接アクセスする(手軽な方法)

SSHトンネルを使わずに、直接リモートサーバーのIPアドレスへアクセスする方法です。

外部からの接続を受け付けるため、「--bind 0.0.0.0」と 「--baseURL」オプションを使用して開発用サーバーを起動します。

開発用サーバーを起動している場合は、終了させてから以下の方法で起動します。(リモート側で実行)

# 【リモートサーバー側で実行】
hugo server -D --bind 0.0.0.0 --baseURL http://リモートサーバーのIPアドレス:1313/

ファイアウォール(firewalld)で「1313」番ポートへの通信を許可します。

# 【リモートサーバー側で実行】1313番ポートの通信を一時許可
sudo firewall-cmd --add-port=1313/tcp

これで、手元のPCからWebブラウザで「http://リモートサーバーのIPアドレス:1313/」にアクセスすると、プレビュー画面が表示されます。

プレビュー確認後はポートを閉じる

プレビューの確認作業が終わったら、セキュリティのため忘れずに「1313」番ポートへの通信許可を解除しておきましょう。

# 【リモートサーバー側で実行】通信許可を削除
sudo firewall-cmd --remove-port=1313/tcp

本番公開用の静的ファイル生成(ビルド)

プレビューで表示やレイアウトに問題がなければ、本番Webサーバーで配信するための静的ファイル(HTML、CSS、JavaScript、画像等)を生成します。

サイトのルートディレクトリで以下のコマンドを実行します。

# 【サイトのルートディレクトリで実行】HTML/CSS等を圧縮して本番ビルド
hugo --minify --cleanDestinationDir

ビルドが成功すると、プロジェクトルート直下に 「public」ディレクトリが作成(または更新)され、その中に公開用のファイル一式が出力されます。

オプションの解説

  • --minify : HTMLやCSS、JSファイルを圧縮し、ページの読み込み速度を最適化します。
  • --cleanDestinationDir : 過去にビルドされた不要な古いファイルを削除してから再生成するため、記事の削除やリネーム時にもゴミが残りません。

「draft = true」(下書き状態)記事の扱い

「hugo server -D」とは異なり、オプションを付けない本番ビルドでは「draft = true」(下書き状態)の記事は自動的に除外されて出力されないので、誤って下書きが本番公開されることはありません。

Webサーバーのドキュメントルートへ配置

生成された「public」ディレクトリ配下の全ファイルを、「rsync」や「cp」を使って、本番Webサーバー(NginxやApache)のドキュメントルート(/var/www/html)へ配置すればサイトの公開は完了です。

# Webサーバーのドキュメントルートへコピーする場合の例
sudo rsync -av --delete public/ /var/www/html/

ドキュメントルートの場所は、ご自分の環境にあわせて適宜読み替えてください。

Hugoのアップデート方法

GitHub Releasesで新しいバージョンが出た場合は、最新の「.tar.gz」アーカイブをダウンロードして展開し、再度「install」コマンドで上書き配置するだけで、既存の環境を維持したまま安全に更新できます。

アップデート手順

まずは作業前に、現在インストールされているHugoのバージョンを確認しておきます。

hugo version

続いて、Hugo公式のGitHub Releasesページから最新のExtended版「.tar.gz」ファイルをサーバー上にダウンロードします。

# 新しいバージョンのダウンロード例
curl -LO https://github.com/gohugoio/hugo/releases/download/v<新しいバージョン>/hugo_extended_<新しいバージョン>_linux-amd64.tar.gz

ダウンロードが完了したら、アーカイブを展開して「/usr/local/bin/hugo」を上書きします。

# アーカイブ名と同名のディレクトリを作成して解凍
tar -zxvf hugo_extended_<新しいバージョン>_linux-amd64.tar.gz --one-top-level

# バイナリを上書き配置
sudo install -m 755 hugo_extended_<新しいバージョン>_linux-amd64/hugo /usr/local/bin/hugo

# 展開したディレクトリの削除(任意)
rm -rf hugo_extended_<新しいバージョン>_linux-amd64

インストールが完了したら、バージョン表示コマンドを実行して最新バージョンに切り替わっていることを確認します。

hugo version

まとめ

  • Extended版が必須: モダンなSCSS対応テーマを利用するため、必ず「Extended版」をインストールする。
  • VPSではバイナリ(tar.gz)版一択: Snap版のようなメモリ消費や常駐デーモンの制約がないため、軽量で依存関係のない公式バイナリ(tar.gz)を「/usr/local/bin」に導入する。
  • テーマを入れないと表示されない: 新規作成後は必ずテーマ(PaperModなど)を導入し、「hugo.toml」に設定する。
  • VPSでのプレビューはSSHトンネルを活用: 外部ポートを開放せずに「ssh -L」で安全にプレビュー確認する。

コメント

タイトルとURLをコピーしました