【第7回】記事の作成編 — Hugoで書いて公開するまで

この記事を読み終えると、記事を書いて、自分のサイトに公開できるようになります。

筆者は最初、記事を書くたびに「この後なんのコマンドを打つんだっけ」と迷っていました。手順に加えて、それぞれのコマンドが何をしているのか、実際にどこでつまずいたのかもまとめます。

公開までの全体の流れ

1. 記事を書く        (content/posts/ にファイルを作る)
2. 手元で確認する    (hugo server)
3. 公開用に変換する  (hugo)
4. サーバーに送る    (scp)
5. 読み取り権限を直す (chmod)  ← 実は毎回必要だった
6. Nginxに反映する   (systemctl reload nginx)

番外編2でGitHub連携をすると、3〜6は git push 1回で自動になります。まずは手動で流れをつかみます。

操作手順

1. サイトのフォルダでPowerShellを開く

hugo から始まるコマンドは、すべて hugo.toml があるフォルダの中で打ちます。

一番かんたんなのは、エクスプローラーからPowerShellを開く方法です。

1. エクスプローラーでサイトのフォルダ(hugo.toml があるフォルダ)を開く
2. 上のアドレスバー(フォルダの場所が書いてあるところ)をクリックする
3. powershell と打ってEnterを押す

これで、最初からそのフォルダでPowerShellが開きます。cd で移動する場合はこうです。

cd "C:\Users\ユーザー名\...\mysite"

2. 記事ファイルを作る

hugo new posts/my-first-post.md

content/posts/my-first-post.md ができます。ファイル名がそのままURL(/posts/my-first-post/)になるので、英数字とハイフンでつけるのがおすすめです。

3. VSCodeで書く

ファイルの先頭はこうなっています。

+++
title = "記事のタイトル"
date = 2026-09-25T10:00:00+09:00
draft = true
categories = ["beginners"]
+++

+++ で囲まれた部分を「フロントマター」と呼び、タイトルや日付などの情報を書きます。その下に本文を書きます。見出しは ##、箇条書きは - です。

4. 手元で表示を確認する

hugo server -D

ブラウザで http://localhost:1313 を開きます。保存するたびに自動で更新されます。-D は、下書き(draft = true)の記事も表示する指定です。終わるときは、PowerShellをクリックしてから Ctrl + C を押します。

5. 公開する準備をする

先頭の draft = true を draft = false に変えて保存します。

6. 公開用のファイルを作る

hugo

public フォルダに公開用のファイルができます。赤い ERROR が出ていなければOKです。

7. サーバーに送る

scp -r public/* root@xxx.xxx.xxx.xxx:/var/www/yourlog/public/

たくさんのファイル名が流れて、止まったら完了です。

8. 読み取り権限を直して反映する

ssh root@xxx.xxx.xxx.xxx "chmod -R 755 /var/www/yourlog && systemctl reload nginx"

ブラウザで自分のサイトを開き、記事が出ていれば公開完了です。見た目が古いままなら Ctrl + Shift + R(キャッシュを使わずに読み込み直す)を押してください。

よく使うHugoコマンド

コマンド	何をするか	使うとき
hugo new site フォルダ名	新しいサイトの骨組みを作る	最初の1回だけ
hugo new posts/名前.md	フロントマター付きの記事ファイルを作る	記事を書き始めるとき
hugo server	手元のPCだけで見られるプレビューを動かす	公開前に見た目を確認するとき
hugo server -D	下書きも含めてプレビューする	書きかけの記事を確認するとき
hugo	公開用のファイルを public フォルダに作る	サーバーに送る直前
hugo --minify	hugo と同じだが、余分な空白を削って軽くする	公開用。少しだけ表示が速くなる

hugo server と hugo は別物

ここが一番間違えやすいところでした。

	hugo server	hugo
役割	確認用のプレビュー	公開用のファイルを作る
見られる人	自分のPCだけ(localhost:1313)	このコマンドだけでは誰にも見えない
公開するには	このままでは公開されない	できた public をサーバーに送る

筆者は最初、hugo server で確認して満足し、hugo を打たずに転送して「サイトが変わらない」と悩みました。確認は hugo server、公開するファイルを作るのは hugo です。何も付けない hugo は「完成品を出荷する」と覚えています。

scpは何をしているのか

手順7の scp は、毎回なんとなく打っていたのですが、分解するとこうなっています。

scp -r public/* root@xxx.xxx.xxx.xxx:/var/www/yourlog/public/

部分	意味
scp	ファイルを安全にコピーするコマンド(Secure Copy)
-r	フォルダの中身をまるごとコピーする指定
public/*	コピー元。手元の public フォルダの中身全部
root@xxx.xxx.xxx.xxx	コピー先のユーザー名とサーバーのIPアドレス
:/var/www/yourlog/public/	サーバーの中の置き場所

:(コロン)の前が「誰として、どのサーバーに」、後ろが「サーバーのどこに」です。

sshとscpの関係

コマンド	できること
ssh	サーバーに入って、コマンドを打つ
scp	サーバーとの間で、ファイルをコピーする(入って操作はしない)

scp は、中でSSHの仕組みをそのまま使っています。だから第5回で鍵認証にしたあとは、scp でもパスワードを聞かれません。「パスワードを聞かれずに転送が始まる」のは、鍵認証がちゃんと効いている証拠です。

実際にハマったこと:転送のたびに403

記事を送ったあと、ブラウザで開くと 403 Forbidden が出る、ということが何度もありました。最初は「最初の1回だけの不具合」だと思って chmod で直していたのですが、記事を足して scp で送り直すたびに、同じことが起きました。

原因は、送ったファイルやフォルダの読み取り権限が、Nginxから読めない状態になっていたことです。なので手順8の chmod -R 755 は、最初の1回ではなく毎回やる手順として組み込んでいます。

確認するときは、CSSファイルを直接開くと分かりやすいです。

https://(自分のドメイン)/css/style.css

CSSの中身(コード)がそのまま表示されれば正常です。403や404になったら、権限の問題が残っている合図です。

この権限の問題は、GitHub連携で自動化したあとにも形を変えてもう一度起きました。そのときの話は CSSが404になった原因はフォルダの権限だった にまとめています。

うまくいかないとき

起きたこと	原因と対処
Unable to locate config file と出る	hugo.toml があるフォルダにいない。cd し直す(一番よくあるミス)
記事が表示されない	draft = true のまま、または date が未来になっている(未来の記事は公開されない)
公開したのにサイトが変わらない	hugo を打たずに送った。または古い表示が残っているので Ctrl + Shift + R
403 Forbidden になる	手順8の chmod を忘れている
デザインが崩れる・CSSが読まれない	権限の問題。→ CSSが404になった原因
文字化けやエラーが出る	VSCodeの右下が「UTF-8」になっているか確認。メモ帳で保存すると壊れることがある
content にHTMLを置いたらエラーで止まった	content は記事(Markdown)を入れる場所。HTMLのファイルはテーマの layouts に置く

エラーが出たら、PowerShellに出た英語のメッセージをそのままコピーして検索するか、AIに聞くと早いです。ただし、IPアドレスやパスワードが写っている部分は、貼る前に必ず消してください。

次の記事

【第8回】Google Search Console編 — Googleにサイトを登録する