非エンジニアが個人サイトを公開するまでにやったこと

個人サイト(ここ)を作成したので、公開までの過程を記しておく。

目次

1. はじめに

個人サイト作成のきっかけ

昔から「個人サイト」というものに漠然と憧れを持っていた。

おそらくそこには、21世紀生まれの筆者が経験しえなかった 90 年代やゼロ年代のインターネット文化への懐古趣味が、 多分に含まれている。¹

また、特定のサービスに依存せず、インターネットが本来の非中央集権的な性格を色濃く残す個人サイトの存在は、プラットフォーム全盛の現代にこそ意義深いと思われる。大企業の土地を耕す小作人から、自分の畑を耕す自作農へ、いつかはクラスチェンジしたいと考えていた。²

そうした思いに背中を押され、ちょうど機会を得て、このWebサイトを作成することとなった。

前提と目標

理想は高いものの、筆者は非エンジニア³で、今までにWebサイトを作ったことはない。広くIT的な経験を振り返っても、大学の授業で多少プログラムを書いた程度であり、特段の技術力を持っているわけでもない。

そこで、制作にあたっては次の点を考慮した。

• 導入やメンテナンスの難易度が低いツールを使うこと
• 特定のサービスに過度に依存しないこと
• 上2つが達成可能な範囲で、なるべくモダンな技術を用いること⁴

以降では、この方針に沿って、個人サイト公開までにとった手順を紹介する。

2. まずは公開してみる

最初に、ひとまず簡単なWebサイトを公開することを目標にした。使った時間は半日程度だった。以下では、その手順を順に記す。

ドメイン取得

まずは、インターネット上の住所にあたるドメインを取得することにした。

トップレベルドメインとしては.comや.orgも検討したが、短いドメインを取りやすい点から.jpを選択した。当初は3文字ドメインの空きを探していたが、途中で友人が見つけてくれた「uouo.jp」に惹かれ、最終的にはこれを使うことにした。

レジストラは、WHOIS情報公開代行⁵に対応している中で、もっとも費用の安かったXserverドメインを選んだ⁶。

ホスティング方法の検討

次に、Webサイトのデータをどこに置くかを検討した。

当初は、知識の範囲内でイメージしやすかったレンタルサーバを想定していた。しかし、LLMと相談しながら調べていくうちに静的ホスティングサービスという仕組みを知り、そちらに切り替えることにした。

この方式には、技術的に優れている点がさまざまあるようだが、今回のような個人サイトの規模では、次の点が決め手になった。

• サーバレスで管理の手間が少ない
• 多くのサービスに無料プランがある

各サービスの細かな違いまでは理解していなかったため、その時点で最も情報が多く勢いがありそうに見えた⁷ Cloudflare Pages⁸ の無料プランを利用することにした。

環境構築

まずは凝った機能は考えず、最低限Webサイトを公開できる形を整えることにし、次の準備を行った。

1. VS Codeの導入
   エディタとしてVS Codeを公式サイトからインストールした。

2. Gitの導入
   バージョン管理システムのGitを公式サイトからインストールし、基本的な使い方をLLMに教えてもらった。

3. GitHubのレポジトリ作成
   GitHub のアカウントはすでに保有していたため、個人サイト用の新しいリポジトリを作成し、手元の環境と連携した。なお、GitHubアカウントは実名と紐付いており、ポリシー上複数アカウントの作成が禁止されているため、このリポジトリは Private とした。

最小限のWebサイトを公開

ここまでで公開の準備が整ったため、Cloudflare Pagesの初期設定を済ませ、ローカルに「ようこそ！」とだけ書いたHTMLファイルを作成した。これをGitHubにプッシュすると、あとはすべての処理が自動で行われた。

ドメインの取得からWebサイトの公開までに要した時間はおよそ半日で、想像以上にあっけなく完了してしまった。しかし、その後DNSが伝播していく様子を眺めていると、自分の作ったWebサイトが全世界に公開されているのだと実感が生まれ、徐々に達成感が湧いてきた。

その後は日記を断続的に書きながら、約2か月ほど運用を続けた。

3. コンテンツの整備

次に、Webサイトの見た目と記事更新のための環境を整えた。一連の作業には丸1日かかった。

使用する技術の検討

文字列だけのページに日記を書き続けること2か月⁹、夏休みに入り余裕ができたので、Webサイトを最低限人に見せられる状態に整備することにした。

まず、HTMLとCSSについて最低限の理解が必要だろうと考え、YouTubeでそれぞれ1時間程度の解説動画を視聴した。当初はCSSをLLMに書いてもらい、それを貼り付けるだけで済ませるつもりだったが、想像よりも考えるべきこと¹⁰が多いと分かり、一からWebサイトを作るのは早々に断念した。

そこで、何か便利そうな仕組みを探す方向に切り替え、静的サイトジェネレータ（SSG）の利用に行き着いた。具体的なフレームワークはAstroを選択した。SSGが新しい技術として注目されているらしいこと、途中まで触ってみたAstroの公式チュートリアル¹¹が非常に分かりやすかったことが、決め手となった。

環境構築

Astroを使うには Node.js が必要なため、公式チュートリアルに従ってインストールした。

テンプレート導入

Astroにはブログ向けの豊富なテンプレートが用意されている。その中でも、比較的シンプルなデザインであることと、日本語サイトでの利用例が多く参考情報を得やすいことから、AstroPaper¹²を選んだ。

カスタマイズ

テンプレートを導入したあと、自分用に調整を加えることにした。AstroやHTML/CSSの仕組みがよく分からないまま、ほとんど勘¹³でコードを修正した。その結果、予想以上に時間を取られ、半日ほどかかった。 具体的なカスタマイズ項目は以下の通りである。

• 公式ドキュメントに沿った設定
• src/config.tsの変数を変更
• src/constants.tsから表示するソーシャルメディアリンクを変更
• カラーテーマをモノトーン化
• 各部の日本語化
• ナビゲーションを日本語化
• 日付表示をYYYY/MM/DDへ変更
• アーカイブの年・月表記を日本語化
• フッタからCopyright表記を削除
• 日本語フォントの導入
• Fontsourceの設定¹⁴
• フォント変更に伴う表示崩れの修正
• OGP画像の自動生成の日本語対応

ここまでで、Webサイトの構築はひとまず完成とした。

CMSの導入

ひとまずサイトの見た目は整ったものの、実際に記事を書こうとすると次のような問題が起きた。

• 記事作成のたびにMarkdownファイルのFrontMatter(メタデータ部分)を手入力するのは面倒で、ミスの原因になりやすい
• 記事の公開・非公開が視覚的に分かりにくい
• 今後記事数が増えたときに、管理が複雑になる懸念がある¹⁵

そこで、これらの問題を解消できるヘッドレスCMSを探し、扱いが簡単そうなFront Matter CMSを導入することにした。

具体的な導入手順は以下の通りである。

• Front Matter CMSはVS Codeの拡張機能として配布されているため、ストアからインストールした
• AstroPaperのドキュメントでFrontMatterに必要な変数を確認し、frontmatter.jsonを書き換えた。

これにより、記事の公開状態やメタデータを視覚的に管理できるようになり、執筆作業が快適になった。

まとめ

ここまで、非エンジニアの自分が個人サイトを公開するまでの流れを紹介した。 こういったことが、何も知らない初心者にもできてしまう現代の技術¹⁶には驚かされる。 今後は記事を継続的に書けるようにがんばりたい。