サイトを作り始めた日の記録

サーバーやネットワークは、もともと興味がある分野だった。アイデアはあるのに、具体的な知識や技術がなくて手が出せなかった。それがAIを使って挑戦してみたら、楽しかった。

やってきたことを共有して、同じ境遇の人の役に立てたらいいなと思って、このサイトを作ることにした。

一番思い入れがあるのは WireGuard

これまでAIと一緒に作ったものの中で、一番気に入っているのは WireGuard（VPN）。モバイルデータでも、自宅でも、オフィスでも、自宅の環境が使える。そこが魅力だった。

そのために借りたのが、さくらのVPS 1G（月935円）。メールサーバーと WireGuard を立てるつもりで契約した。

レンタルサーバーだと思っていた

サイトを作るにあたって Claude Code に相談したら、いきなり作るのではなく、まず質問攻めにされた。誰に読んでほしいか、何を書くか、どれくらいのペースで更新するか。

その途中で契約中のプランを聞かれて、管理画面の表記を貼ったら「これVPSですね」と言われた。ずっとレンタルサーバーだと思っていた。

VPSだと Nginx も HTTPS の設定も自分でやることになる。ただ、このVPSではもう WireGuard と Pi-hole が動いているので、壊さないようにサイトを同居させないといけない。

SSHで中を見てもらったら、Pi-hole の管理画面がすでに80番と443番を使っていた。Webサイトも80と443を使うのでぶつかるのでは、と思ったら、Pi-hole が使っているのは VPN 側のアドレス（10.66.66.1）の80/443で、サイトはインターネット側のアドレスの80/443を使えばいいらしい。ポート番号はIPアドレスごとに別扱いになる。

ドメインと Astro

ドメインは yukikitech.com。Cloudflare で取った。

サイトは Astro で作る。PCに Node.js が入っていなかったので、そこから。

winget install --id OpenJS.NodeJS.LTS -e

ブログ用のテンプレートでプロジェクトを作る。

npm create astro@latest yukikitech-site -- --template blog --install --git

テンプレートは英語向けなので、日付の表記、フォント、デザイン、タグ機能を直してもらった。

今日いちばん「おっ」となったのは、実際にHTMLが出力されたとき。

まだ自分のPCの中でしか見られない。次は VPS に Nginx を入れて、外に出す。