PR
PR

【Ubuntu】Hugo Extended版のインストール手順！VPSでの安全なプレビュー＆本番公開まで解説

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

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

Ubuntu標準の「sudo apt install hugo」ではバージョンが古く、現代のテーマで必須となる機能が使えないため、本記事では最新のExtended版（.deb）を導入する手順と、VPS環境での安全なプレビュー方法まで紹介します。

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

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

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

圧倒的な表示スピードと低負荷

WordPressのようにアクセスされるたびにPHPを動かしてデータベースに問い合わせる必要がありません。

事前に生成されたHTMLを配るだけなので、メモリ1GB〜2GBプランのVPSでも高速に応答します。

セキュリティリスクの低減

管理画面やデータベース、PHPスクリプトがWeb上に存在しないため、SQLインジェクションやWordPressプラグインの脆弱性を狙ったサイバー攻撃の心配がほぼゼロになります。

記事データの保全が容易

記事やサイト設定はすべてテキストファイル（MarkdownやTOML/YAML）なので、Gitを使ってGitHub等にプッシュするだけで完全なバックアップが完了します。

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

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

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

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

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

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

Standard版をインストールしてしまうと、テーマを適用するとエラーが発生してしまいます。 

error: failed to transform resource: TOCSS: failed to transform "css/main.scss" (text/x-scss).

そのため、「Ubuntu」に「Hugo」を導入する際に特別な理由がある場合以外は、「Extended版」を選ぶのが鉄則です。

インストール方法の選び方：なぜSnap版ではなく「.deb版」なのか？

UbuntuでHugoを導入する方法には主に「標準apt」「Snap」「GitHub Releases（.deb）」の3つがありますが、VPS環境では「GitHub Releases（.deb版）」一択です。

インストール方法 バージョン Extended おすすめ度 特徴と注意点
GitHub Releases (.deb) 最新版 〇 ★★★★★ 【推奨】 動作が軽量でトラブルがなく、最新のExtended版が確実に手に入る。
Snap (snap install) 最新版 〇 ★★☆☆☆ 手軽だが、VPS環境ではデメリットが多い（後述）。
Ubuntu標準apt 古い × ★☆☆☆☆ 非推奨。バージョンが古く、SCSS対応テーマが動かない。

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

コマンド1行で入るSnap版（sudo snap install hugo）は一見便利ですが、VPS運用では以下のデメリットがあります。

VPSのリソース（メモリ・ディスク）を浪費する

Snapを動かすには常駐デーモン（snapd）が必須でメモリを消費します。また過去バージョンを保持するためディスク容量も圧迫し、省リソースなVPSと相性が悪いです。

サンドボックス（権限隔離）によるエラー

Snap特有の隔離空間で動くため、「/var/www」への配置や、外部ツール（Git、Dart Sass、Node.js等）との連携時にパーミッションエラーを起こしやすくなります。

予期せぬ自動更新による「ビルド破壊」

Snapはバックグラウンドで勝手に最新版へ自動更新されます。Hugoはアップデートで仕様が変わることがあるため、「ある日突然ブログがビルドできなくなった」という事故の原因になります。

そのため、余計な常駐プロセスがなく、環境を汚さない 「GitHub Releases（.debパッケージ）」 を使ってインストールします。

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

Ubuntu標準のパッケージ管理形式である「.deb」ファイルを使って、最新の「Hugo Extended版」をインストールします。

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

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

# パッケージリストの更新
sudo apt update

# curlとgitのインストール
sudo apt install -y curl git

最新バージョンのExtended版パッケージをダウンロード

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

# CPUアーキテクチャの確認（通常は amd64、ARM系の場合は arm64）
dpkg --print-architecture

公式GitHubリポジトリのリリース一覧から、該当するアーキテクチャの「.deb」ファイルを確認します。
Hugo Releases (GitHub)

  • hugo_extended_<バージョン>_linux-amd64.deb（通常のIntel/AMD系VPS）
  • hugo_extended_<バージョン>_linux-arm64.deb（ARM系VPS）

最新バージョンを選択し、表示されたバージョンが「Latest」であることを確認します。

画面を下にスクロールすると「Assets」という項目があるので、そこでダウンロードしたいファイルを探してください。

一覧に無い場合は、項目の下部にある「Show all xx assets」をクリックすると、まだ表示されていない部分も表示されるので、そこから探してください。

ダウンロード対象のファイルが見つかったら、「右クリック」で表示されるメニューから「リンクのアドレスをコピー」を選択して、ダウンロードURLをクリップボードにコピーしてください。

Extended版hugoの最新バージョンの「.deb」ファイルをダウンロードするためのURLが確認できたら、「curl」を使ってダウンロードします。

今回は最新が「v0.167.0」だったので、下記のようにダウンロードを行いました。 

curl -LO https://github.com/gohugoio/hugo/releases/download/v0.167.0/hugo_extended_0.167.0_linux-amd64.deb

最新バージョンのパッケージダウンロードを自動化するワンライナー

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

# アーキテクチャを自動判定して最新のExtended版debファイルをダウンロード
ARCH=$(dpkg --print-architecture)
LATEST_URL=$(curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest \
| grep "browser_download_url.*hugo_extended_.*_linux-${ARCH}.deb" \
| grep -v "withdeploy" \
| cut -d '"' -f 4)

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

ダウンロードされたファイルが最新バージョンであるかの確認は行ってください。

aptコマンドでインストール

ダウンロードした「.deb」ファイルを依存関係を自動解決してくれる「apt install」を使いインストールします。 

sudo apt install ./hugo_extended_0.167.0_linux-amd64.deb

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

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

hugo version

出力例:

$ hugo version
hugo v0.167.0-3fff6fb5c267dacb26280c78dbe8c344054249c8+extended linux/amd64 BuildDate=2026-09-28T14:50:38Z VendorInfo=gohugoio

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

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

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

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

サイトの雛形を作成

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

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

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

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

# ディレクトリ構成の確認
ls -la

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

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

テーマを導入する

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

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

今回は、Hugo公式クイックスタートでも採用されている定番テーマ 「Ananke」 を「Git submodule」として導入します。 

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

# Anankeテーマをサブモジュールとして追加
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# 設定ファイル（hugo.toml）に使用テーマを追記
echo "theme = 'ananke'" >> 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-06T15:42:35+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   │  4 
 Static files     │  1 
 Processed images │  0 
 Aliases          │  1 
 Cleaned          │  0 

Built in 93 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/

ファイアウォール（UFW）で「1313」番ポートへ通信を許可します。 

# 【リモートサーバー側で実行】
sudo ufw allow 1313/tcp
sudo ufw reload

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

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

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

# 【リモートサーバー側で実行】
sudo ufw delete allow 1313/tcp
sudo ufw reload

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

プレビューで表示やレイアウトに問題がなければ、本番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で新しいバージョンが出た場合は、最新の「.deb」ファイルをダウンロードして再度「apt install」コマンドで上書きインストールするだけで、既存の環境を維持したまま安全に更新できます。

アップデート手順

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

hugo version

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

ダウンロードが完了したら、「apt install」コマンドでインストールを実行します。 

sudo apt install ./hugo_extended_<新しいバージョン>_linux-*.deb

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

hugo version

まとめ

  • Extended版が必須: モダンなSCSS対応テーマを利用するため、必ず「Extended版」をインストールする。
  • VPSでは.deb版一択: Snap版はメモリ消費やサンドボックス隔離、予期せぬ自動更新のデメリットがあるため、軽量で安定した「.deb」版（GitHub Releases）を導入する。
  • テーマを入れないと表示されない: 新規作成後は必ずテーマ（Anankeなど）を導入し、「hugo.toml」に設定する。
  • VPSでのプレビューはSSHトンネルを活用: 外部ポートを開放せずに「ssh -L」で安全にプレビュー確認する。

コメント

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