posts

【第2回】機材編 — 必要なPC・ソフトと、これから使う4つの道具

(更新 )

この記事を読み終えると、ブログ構築に必要なPC・ソフト・アカウントがすべて揃い、これから使う4つの道具(Hugo・VPS・SSH・Nginx)が何をするものか分かる状態になります。

これから使う4つの道具

このシリーズでは、次の4つを組み合わせてブログを作ります。最初に役割だけ押さえておくと、この先の手順で迷いにくくなります。

道具 ひとことで言うと どこで動くか
Hugo Markdownで書いた記事を、Webページ(HTML/CSS)に変換する道具 自分のPC
VPS 24時間インターネットにつながっている、自分専用の仮想サーバー ConoHaなどのデータセンター
SSH 自分のPCから、遠くのVPSに安全に入ってコマンドを打つ仕組み PCとVPSの間
Nginx 「サイトを見せて」と来た人に、ページを返すソフト(Webサーバー) VPSの中

全体の流れはこうです。

[自分のPC]                         [VPS]
Hugoで記事を書く    --SSHで接続-->   Nginxが待っている
  ↓ hugo コマンド                     ↓
publicフォルダができる --転送-->    Nginxが世界に公開

Hugoとは

Markdown(## で見出し、- で箇条書き、のような簡単な書き方)で書いた記事を、自動でHTML/CSSのサイトに変換してくれる「静的サイトジェネレーター」です。WordPressのようにデータベースを使わないので、軽くて安全です。

VPSとは

Webサイトを24時間公開しておくために借りる、仮想の専用サーバーです。契約するとIPアドレス(サーバーの住所。xxx.xxx.xxx.xxx のような数字)がもらえます。このシリーズでは、IPアドレスは xxx.xxx.xxx.xxx と書きます。

SSHとは

自分のPCから、遠くにあるVPSに安全に接続してコマンドを打つための仕組みです。通信は暗号化されています。最初はパスワードで入り、あとで「鍵」で入る方式(公開鍵認証)に切り替えます。

Nginxとは

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

揃えるもの

1. PC

WindowsでもMacでも作れます。目安は次のとおりです。

項目 最低限 おすすめ
メモリ 8GB 16GB(Dockerも使うなら)
空き容量 20GB 50GB以上
OS Windows 10 / macOS Windows 11 / 最新のmacOS

ノートPCで十分です。ブログを作るだけなら、高性能なデスクトップは要りません。

2. ソフト

ソフト 用途 入れ方
Chrome 管理画面の操作・表示確認 公式サイトから
VSCode 記事や設定ファイルを書く 公式サイトから
PowerShell コマンドを打つ Windowsに最初から入っている
Hugo 記事をWebページに変換する 下のコマンド
Git 番外編(GitHub連携)で使う 下のコマンド

HugoとGitはPowerShellで入れます。

winget install Hugo.Hugo.Extended
winget install Git.Git

Hugoは「Extended(拡張版)」を選びます。無印版だと使えない機能があるので、迷ったら拡張版です。

入れ終わったら、PowerShellを一度閉じて開き直してから確認します。バージョンが表示されればOKです。

hugo version
git --version

3. アカウント

  • Googleアカウント(Search Console・Analytics・AdSenseで使う)
  • GitHubアカウント(番外編で使う。後からでOK)

4. 支払い手段

VPSとドメインの支払いにクレジットカードを用意します。

あると便利なもの

  • パスワード管理アプリ(rootパスワードなどを安全に保管)
  • 作業メモ(打ったコマンドと結果を残しておくと、トラブル時に助かる)
  • 2画面(手順を見ながら操作できる)

Hugoを入れるときに実際につまずいたこと

Linux用のコマンドを打っていた

最初、調べて出てきた sudo apt install hugo を打ってエラーになりました。これはLinux用のコマンドで、使っていたのはWindowsのPowerShellだったので動かなくて当然でした。今、Windows・Mac・Linuxのどれの上で作業しているのかを意識するのが大事だと学びました。この先、自分のPC(Windows)とVPS(Linux)を行き来するので、ここは何度も効いてきます。

1つ上のフォルダで hugo server を打っていた

サイトのフォルダ(yourlog-site)の中身はこうなっています。

yourlog-site/
├── hugo.toml       ← サイト全体の設定ファイル
├── content/        ← 記事を書く場所
└── themes/         ← デザインのテンプレート

このフォルダの1つ手前で hugo server を打つと、こう言われます。

ERROR command error: Unable to locate config file or config directory.

hugo.toml が見つからない、という意味です。cd yourlog-site でフォルダの中に入ってから打てば動きます。

PowerShellを開き直すたびに迷子になる

PowerShellは、開き直すたびに今いる場所が C:\Users\(ユーザー名) に戻ります。毎回 cd するのが面倒だったので、今はこうしています。

  1. エクスプローラーでサイトのフォルダを開く
  2. 上のアドレスバーをクリックして powershell と打ち、Enter

こうすると、最初からそのフォルダでPowerShellが開くので cd が要りません。

初めての起動

正しいフォルダで hugo server を打ち、次の表示が出れば成功です。

Web Server is available at http://localhost:1313/
Press Ctrl+C to stop

ブラウザで http://localhost:1313 を開くと、自分のPCの中だけで動いているプレビューが見られます。止めるときは Ctrl + C です。

記事やスクショに載せてはいけない情報

このシリーズを真似して作業するとき、あとで人に質問したり、ブログに書いたりする場面が出てきます。そのとき、うっかりスクショやコマンドの結果をそのまま貼ってしまう事故が起きがちです。次のものは必ず隠してください。

隠すもの 理由 どう書けばいいか
VPSのrootパスワード 知られるとサーバーを乗っ取られる そもそも載せない
秘密鍵の中身(.pub が付いていない方) 漏れると鍵で入る仕組みの意味がなくなる 絶対に貼らない。.pub(公開鍵)は貼っても基本問題ない
VPSのIPアドレス 直接攻撃の的にされうる xxx.xxx.xxx.xxx のように伏せる
ドメイン管理画面のログイン情報 ドメインを乗っ取られる 載せない
AdSenseやA8.netのログイン情報 収益を盗まれる 載せない
税務フォームや本人確認の画面 本名・住所・マイナンバーが写る 載せない

迷ったら、「これを他人が知ったら、自分のサーバーやアカウントに勝手にログインできてしまうか?」で判断します。ログインできてしまう情報は全部NGです。コマンドの使い方や設定ファイルの書き方は、公開しても問題ありません。

つまずきやすい注意点

Windows標準の「メモ帳」で設定ファイルを編集しない

保存するときの文字コードの関係で、文字化けやHugoのエラーの原因になります。必ずVSCodeを使ってください。実際にやってしまった話は hugo.tomlをメモ帳で直したら文字化けした話 に書きました。

Googleアカウントを短期間にいくつも作らない

ブログ用・連絡用と次々に作った結果、1つが停止されました。ブログ用のアカウントは1つに絞るのが安全です。

学校用と個人用のアカウントを混ぜない

同じPCで学校用のGitHubアカウントを使っていると、個人ブログの作業で認証がぶつかります。番外編で対処法を書いています。

パスワードをメモ帳に書いて保存しない

PCの中を見られたら終わりです。パスワード管理アプリに入れてください。

次の記事

【第3回】ConoHa編 — VPSを契約してサーバーを起動する