ウェブサイト構築2026春
2026年春版のウェブサイト構築術をまとめておきます。
2026年春時点では、 Value Domainで取得した独自ドメインのDNSをCloudflareへ移管せず管理し、 GitHubへpushした内容をCloudflare Pagesで公開している。 ローカル環境はVS CodeとNode.jsを使用している。
独自ドメインとCloudflare DNS
2026年春時点では、独自ドメインはValue Domainで取得し、DNSはCloudflareで管理している。 以前はレンタルサーバへFTPでアップロードする構成が一般的だったが、現在運営している shimosuwa.info ではCloudflareを中心とした構成へ移行している。ドメインの管理会社を変更することなく、DNSのみをCloudflareで管理できるため、既存ドメインでも比較的導入しやすかった。 Cloudflareを利用する最大の理由は、DNS管理だけでなく、Cloudflare Pagesやキャッシュなどの機能を同じサービス上で利用できることにある。特に個人サイトでは、サーバを意識する場面が大きく減り、コンテンツ作成に集中しやすくなった。 現在は shimosuwa.info の運用を通じて得た経験を renya.com にも反映しており、今後新たな独自ドメインを取得する場合も、同様の構成を第一候補として考えている。
GitHubとCloudflare Pages
GitHubとCloudflare Pagesを利用することで、ウェブサイト公開の流れは大きく変わった。 以前はローカルで作成したHTMLをFTPソフトでサーバへアップロードしていたが、現在はGitHubへ push するだけで公開が完了する。公開作業そのものよりも、コンテンツ作成や管理に時間を使えるようになった。 shimosuwa.info の構築を進める中で、ページ数の増加やスクリプトによる自動生成を行うようになり、更新履歴を管理できるGitの利点も大きく感じるようになった。何を変更したのかが記録として残り、必要であれば過去の状態へ戻すこともできる。 Cloudflare PagesはGitHubとの連携が容易で、特別なサーバ管理を意識せずに運用できる。個人サイトの規模であれば十分な性能があり、独自ドメインとの組み合わせも自然だった。 2026年春時点では、HTMLを直接編集しながらも、その公開基盤にはGitHubとCloudflare Pagesを利用している。静的サイトを運営する上で、非常に扱いやすい組み合わせだと感じている。
VS CodeとNode.js
ローカル環境はVS CodeとNode.jsを中心に構成している。 HTMLやCSSの編集はVS Codeで行っている。特別なウェブ制作ツールを使用しているわけではなく、テキストエディタとしての使いやすさと拡張性の高さから選定した。文章作成からコード編集まで一つの環境で完結できるようになっている。 Node.jsはウェブアプリケーションを作るためというより、サイト運営を補助するスクリプトの実行環境として利用している。ページ一覧の生成やサイトマップの作成など、人手で行うと面倒な処理を自動化するために欠かせない存在になった。 shimosuwa.info の構築を進める中で、ページ数が増えるにつれて手作業による管理には限界があることを感じた。一方で、本格的なCMSを導入するほどでもない。HTMLを直接管理するシンプルさを維持しながら、一部だけをスクリプト化する現在の方式は、自分にとってちょうど良い落とし所になっている。 2026年春時点では、VS Codeで編集し、Node.jsで補助し、GitHubへ push する。この流れが日常的なウェブサイト更新の基本になっている。
現在は Node.js を利用して、ページ一覧、タグ一覧、サイトマップの生成を自動化している。新しいページを追加した後は build スクリプトを実行するだけで各種一覧が更新される。HTMLそのものは手作業で作成しているが、一覧管理や検索エンジン向けのサイトマップ生成だけをスクリプト化することで運用負荷を減らしている。 また、ページ作成や写真アルバム作成のための小さな補助スクリプトも利用している。新規ページはテンプレートから自動生成し、写真ページは画像一覧からギャラリーHTMLを生成することで、繰り返し発生する単純作業を減らしている。
with AI
今回のサイト構築は生成AIのHelpも大きい。ChatGPTを最初はFreeで次にPlusで最後はGoで使いながら、500行を超えるCSSやNode.jsのスクリプトの生成、Cloudflareの操作方法などを二人三脚でやってきた。事実確認が必要な内容では注意も必要だが、ループに嵌ると抜け出せない事もあるけど、決まった動作については一発でいいコードを出してくれたりする。今回時代が変わったと感じる一番がこれかも。
FTPも残る
一方、renya.comは昔ながらのレンタルサーバを利用している為、FTPでの更新が継続している。コンテンツその物はVS Codeで更新しているが、最後はFFFTPから乗り換えたWinSCPによる同期でサイトを更新している。GitHub経由のデプロイよりも反映が早いのがうれしいところ。
