最近、個人用のWebサイト（absterellio.com）を作りました。これまで取り組んできたさまざまなプロジェクトをまとめると同時に、情報を1か所に集約するためです。（ついでに、楽しみのため） :). AIツールとシンプルなホスティング基盤のおかげで、Webサイトを立ち上げるのはかなり摩擦が少ないです。特に、Replitのようなエージェント型AIツールがあれば、Webサイトの構築はこれまででいちばん簡単になっています。
そこで、私がたどった手順を手早くまとめるガイドを書きたくなりました。両方について耳にしていたので、VercelとReplitを選び、実際に試してみることにしました。さらに、手短にRedditで検索もしたところ、どちらも信頼性とシンプルさについて称賛されていました。
私がやったことは以下です：
- ドメインを購入（absterellio.com）。CloudFlareを使いましたが、どのドメインレジストラ（Namecheap、GoDaddyなど）でも同じようにできます。
- Replitに、文字通り「個人用Webサイト」を作ってもらうよう依頼しました。プロセスの中で最もスムーズな部分でした。「website」をプロジェクト種別として選び、レイアウトに満足するまでエージェントとチャットしました。無料プランとクレジットにそのまま従うなら、支払いなしでシンプルなサイトが作れます。プロジェクト開始時のReplitの画面のプレビューはこちらです：
これは、ある程度プログラミングの知識があると役立ちます。Replitでは、コードの編集だけでなく、チャットでエージェントに指示して作業を進めることもできます。コードを自分で編集して調整することで、いくつかのクレジットを節約できました。無料トークンの上限を超えないように、面倒で手のかかる作業はエージェントに任せました。
Replitが、APIをコードに組み込むのをどれほど簡単にしてくれるかに感心しました。手順ごとに明確な指示があり、必要なキーをどこで、どう生成すればいいかをきちんと示しつつ、シークレットの取得や管理の部分は抽象化してくれます。たとえば、YouTube APIを呼び出して動画を表示したかったのですが、APIキーを渡すだけで、Replitがそのシークレットを保存し、コードに組み込んでくれます。
- 次のステップでは、Webサイトをどこでホストするかを決める必要がありました。Replitは無料枠でも、バックエンド、ホスティング、デプロイのサービスを提供しています。ですが、Replitの無料枠では対応していない自前のカスタムドメインを使いたかったのです。そこで、趣味（hobby）プランで無料のカスタムドメインを1つサポートしているVercelを使うことにしました。
このサイトをVercelに移植するための次のステップは、Replitで生成されたアプリをダウンロードし、Claude codeでローカルに整理（整形）してから、GitHub上の新しいリポジトリにプッシュすることでした。
Vercelは、コードの取り込みとドメインの変更を簡単にしてくれました。新しいプロジェクトを作成し、GitHubで認証しました。GitHubをリンクすると、取り込みたいリポジトリを選べるようになりました。
ドメインの所有を示すため、CloudFlareで認証するよう促され、私のドメインがリンクされました。
デプロイの手順を開始し、いくつか失敗したデプロイと、その後のコード調整を経て、サイトは稼働しました。Vercelの画面には、シンプルなCI/CD、監視（observability）、その他のインサイトが用意されています。
VercelとReplitには、私がまだ試していない多くの機能があります。最初の目標は、コストを最小にして素早くサイトを立ち上げることだったためです。今後、もっといろいろ触ってみるのが楽しみです。
読んでいただきありがとうございます！
