「自分だけのサイトを作ってみたい。」

でも、

  • プログラミングは難しそう…
  • サーバーとか GitHub とか専門用語が多すぎる…
  • 何から始めればいいのか分からない…

そう思って、なかなか着手できなかったり途中であきらめてしまったりしたことはありませんか？

一昔前であれば、確かにそれなりの労力はかかりましたが、今や AI を活用することで、プログラミング未経験でも本格的なサイトをさくっと作れる時代になりましたね（まじでラク）

この記事では、私が実際に Cursor・Astro・GitHub・Vercel を使ってサイトを公開した方法を、初心者向けに分かりやすく紹介します。

この記事はサイト開設までのロードマップです。

各 STEP の記事を確認してステップバイステップで作業すれば、初心者でも迷わずにサイトを公開できますのでご安心ください。

1. 私も最初はほぼ初心者でした

実は、このサイトを公開するまでは、プログラミングの知識や経験は初心者に毛が生えたくらいしかありませんでした。

「こういうサイトを作りたい。」

でも、

  • 何から始めればいい？
  • GitHubって何？
  • サーバーって？
  • そもそも何が分からないのか分からない…

そんな状態でした。

だから Gemini や ChatGPT に、

  • 「こういうサイトを作りたいんだけど」
  • 「何から始めればいい？」
  • 「次は何をすればいい？」
  • 「初心者でも分かるように教えて」

と、一つずつ聞きながら進めていきました。

途中でエラーが出たり、思ったように動かなかったりもしましたけど、その都度 AI に相談しながら進めた結果、2〜3時間ほどでサイトを公開するところまで到達できました。

そして、この LifeTools Lab も、この記事で紹介している方法とほぼ同じ構成で作っています。

「プログラミング経験がないから無理かも…」

そう思っている方にこそ、「意外とできるかもしれない」と感じてもらえたら嬉しいですね。

2. なぜ「Cursor × Astro × GitHub × Vercel」でサイトを作るのか？

この記事では、Cursor・Astro・GitHub・Vercel の4つを組み合わせてサイトを構築します。

最初は聞き慣れない名前ばかりかもしれませんが、それぞれ役割が違います。

  • Cursor：AI と会話しながらサイトを開発するためのAIエディタ
  • Astro：高速で SEO にも強いサイトを作るためのフレームワーク
  • GitHub：サイトのコードを安全に保存・管理するサービス
  • Vercel：サイトをインターネット上へ公開・更新するサービス

この4つを組み合わせることで、初心者でも管理しやすく、表示速度が速いサイトを構築できます。

私がこの構成をおすすめする理由は、次の4つです。

AIが開発をほぼ全てやってくれる

Cursor は、AI と会話しながら開発できるエディタです。

例えば、

  • 「お問い合わせページを作って」
  • 「スマホ表示を調整して」
  • 「このエラーの原因を教えて」
  • 「コードを整理して」

と日本語で指示するだけで、複数のページ・ファイルの作成や修正など多くの作業をしてくれますし、この後で説明する GitHub への反映までもしてくれます。

プログラミング経験がなくても、一つずつ相談しながら進められるのが大きな魅力ですね。

Astro は表示速度が速く、SEOにも強い

Astro は静的サイトジェネレーター（SSG）と呼ばれる仕組みを採用しています。

必要な HTML をあらかじめ生成するため、ページの表示速度が非常に速く、ユーザーにとっても快適です。

表示速度は SEO にも良い影響が期待できるため、これからサイトを始める方にもおすすめできます。

せっかくサイトを公開したなら、ユーザーが検索した時に上位に表示されて、たくさんの人にサイトに来てもらいたいですもんね。
（広告収入も欲しいしw）

GitHub で安全にコードを管理できる

GitHubは、サイトのコードを保存・管理するサービスです。

万が一コードを間違えてしまっても、以前の状態へ戻したり、変更履歴を確認したりできます。

最初は少し難しく感じるかもしれませんが、一度設定してしまえば安心してサイトを運営できます。

Vercel なら公開・更新がとても簡単

Vercel と GitHub を連携すると、サイトを自動で公開・更新できるようになります。

記事を書いて GitHub へ保存するだけで、自動的に最新の状態が反映されるため、サーバーへ手動でアップロードする必要はありません。

一度環境を作ってしまえば、その後は記事を書くことに集中できます。

つまり、Cursor にしたいことを伝えるとプログラミングをしてくれて、それを GitHub に反映してくれて、Vercel が GitHub の更新を検知して サイトに反映してくれるという、ほぼ完全自動化ができます。

3. サイト公開までのロードマップ

サイト公開までは、大きく6つの STEP です。

STEP1 Cursor を準備する

まずは AI と一緒に開発するための Cursor を導入します。

インストールから最初のサイトを作るまでを、初心者向けに解説しています。

【STEP1】Cursor のインストールから AI と最初のサイトを作るまで｜初心者向け AI サイト開設講座

STEP2 GitHub でコードを管理するための初期設定と Cursor との連携をする

サイトのデータを安全に保存するために GitHub を利用します。

ここでは GitHub のアカウント登録から Cursor との連携までを解説します。

【STEP2】GitHub とは？からアカウント登録、リポジトリ作成、Cursor との連携までを徹底解説｜初心者向け AI サイト開設講座

STEP3 GitHub でコードを管理する

STEP2 で Cursor と GitHub の連携が完了しているので、STEP3 では実際にサイトを Github で管理していきます。

最初は難しく感じますが、慣れてしまえばバックアップや更新管理がとても楽になります。

STEP4 Vercel でサイトを公開する

GitHub と連携し、自動でサイトを公開できる環境を作ります。

記事を追加するだけでサイトが更新されるようになります。

Vercel のアカウント作成から、無料でサイトを公開する方法、GitHub と連携する方法についての記事を執筆中です。

STEP5 Astro で高速なWebサイトを作る

作成したサイトを高速で管理しやすくするために、Astro というフレームワークを導入します。

作成したサイトを Astro に移行方法についての記事を執筆中です。

STEP6 Markdown で記事を書く

環境が完成したら、あとは記事を書くだけです。

Markdown を使った記事の書き方や更新方法についての記事を執筆中です。

4. この記事を読んでほしい人

この方法は、こんな方におすすめです。

  • サイトを始めてみたい
  • プログラミング経験がない
  • AI を活用して効率よく作りたい
  • WordPress 以外の選択肢を探している
  • 表示速度が速く SEO に強いサイトを作りたい

5. まとめ

サイト作りは、昔ほど難しいものではありません。

AI を活用すれば、専門知識がなくても、自分だけのサイトを作れる時代になりました。

私自身も、ほぼ初心者の状態からこのサイトを公開することができました。

もちろん、途中でエラーが出ることもあります。

でも、AI に相談しながら一つずつ進めれば、ちゃんと前に進めます。

まずは STEP1 から、一緒に始めてみましょう。

6. このシリーズの記事

このロードマップに沿って、各 STEP を詳しく解説した記事を用意しています。