Hugo・VPS・SSH・Nginxとは何か、初心者向けにまとめてみた

ブログを一から自作する過程で、Hugo・VPS・SSH・Nginxという4つの技術を触ることになったので、初心者向けに整理しておきます。

⚠️ この記事を読みながら自分の環境で作業する人へ この記事中に出てくる xxx.xxx.xxx.xxx や 【ここには何も書かない】 のような部分は、あなた自身の環境の値に置き換えて使う場所です。詳しくは記事の最後の「⛔ 絶対に公開してはいけない情報」を必ず読んでから作業してください。

1. Hugoとは

Markdownで書いた記事を、自動でHTML/CSSのサイトに変換してくれる「静的サイトジェネレーター」です。

インストール(Windows)

winget install Hugo.Hugo.Extended

基本コマンド

コマンド	意味
`hugo new posts/ファイル名.md`	新しい記事を作る
`hugo server`	手元のPCだけでプレビューする
`hugo`	公開用ファイル(`public`フォルダ)を生成する

2. VPSとは

Webサイトを24時間インターネット上に公開しておくために間借りする、仮想の専用サーバーです。ConoHa VPSなどで契約すると、IPアドレス(サーバーの住所)が発行されます。

このIPアドレスは、この記事では xxx.xxx.xxx.xxx と表記します。

3. SSHとは

自分のパソコンから、遠くにあるVPSに安全に接続してコマンドを打つための仕組みです。

接続コマンド(例)

ssh root@xxx.xxx.xxx.xxx

より安全な公開鍵認証への切り替え

ssh-keygen -t ed25519
ssh-copy-id root@xxx.xxx.xxx.xxx

4. Nginxとは

VPSの中で動く、Webサーバーソフトです。「誰かがサイトにアクセスしてきたら、Hugoで作ったファイルを返す」役目を担います。

インストール(VPS内で実行)

sudo apt update
sudo apt install nginx

設定ファイルの例

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/example/public;
    index index.html;
}

example.comの部分は、実際には自分の取得したドメイン名に置き換えます。

全体の流れ

[自分のPC]                    [VPS]
Hugoで記事を書く   --SSH接続-->  Nginxが待機
 ↓ hugo コマンド                  ↓
publicフォルダ生成 --転送-->     Nginxが公開

⛔ 絶対に公開してはいけない情報

ブログにこの手の技術記事を書くとき、うっかりスクリーンショットやコマンド履歴をそのまま貼ってしまい、他人に知られてはいけない情報を公開してしまう事故が起きがちです。以下は、記事にする前に必ず隠す・書き換える項目です。

絶対に隠すもの	理由	記事内でどう書けばいいか
VPSのrootパスワード	知られると、サーバーを乗っ取られる	そもそも記事に載せない。載せる必要が本来ない
秘密鍵ファイルの中身(`id_ed25519`など、`.pub`が付いていない方)	これが漏れると公開鍵認証の意味がなくなる	絶対に貼らない。`.pub`(公開鍵)は貼っても基本問題ない
VPSのIPアドレス	直接そのサーバーへの攻撃対象にされうる	`xxx.xxx.xxx.xxx` のように伏せて書く
ドメインの管理画面のログイン情報	ドメインを乗っ取られる可能性がある	記事に載せない
AdSenseやASPの管理画面URL・ログイン情報	収益を盗まれる可能性がある	記事に載せない(広告コード自体の掲載は基本問題ない)
`.env`ファイルやAPIキーの中身	外部サービスが不正利用される	記事に載せない、`.gitignore`にも入れておく

見分け方のコツ:「これを他人が知ったら、あなたのサーバーやアカウントに勝手にログインできてしまうか?」を基準に考えると分かりやすいです。ログインできてしまう情報は全部NG、それ以外(コマンドの使い方、設定ファイルの書き方など)は基本的に公開して問題ありません。