「自分だけのサイトを作ってみたい。」
でも、
- プログラミングは難しそう…
- サーバーとか HTML とか専門用語が多すぎる…
- 何から始めればいいのか分からない…
そう思って、なかなか着手できなかったり途中であきらめてしまったりしたことはないでしょうか。
一昔前であれば、確かにそれなりの労力はかかりましたが、今や AI を活用することで、プログラミング未経験でも本格的なサイトをさくっと作れる時代になりましたね（まじでラク）
この記事では、私が実際に Cursor・Astro・GitHub・Vercel という仕組みを使ってさくっとサイトを公開した方法を、初心者向けに分かりやすく紹介します。
この記事はサイト開設までのロードマップです。
各 STEP の記事を確認してステップバイステップで作業すれば、初心者でも迷わずにサイトを公開できますのでご安心ください。
私も最初はほぼ初心者でした
実は、このサイトを公開するまでは、プログラミングの知識や経験は初心者に毛が生えたくらいしかありませんでした。
「こういうサイトを作りたい。」
いわゆる、何がわからないのかがわからない状態です。
だから Gemini や ChatGPT に、
- 「こういうサイトを作りたいんだけど」
- 「何から始めればいい？」
- 「次は何をすればいい？」
- 「初心者でも分かるように教えて」
と、一つずつ聞きながら進めていきました。
途中でエラーが出たり、思ったように動かなかったりもしましたけど、その都度 AI に相談しながら進めた結果、2〜3時間ほどでサイトを公開するところまで到達できました。
そして、この LifeTools Lab も、この記事で紹介している方法とほぼ同じ構成で作っています。
「プログラミング経験がないから無理かも…」
そう思っている方にこそ、「意外とできるかもしれない」と感じてもらえたら嬉しいですね。
なぜ「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 で作ったサイトは、ページが素早く表示されるのが大きな特徴です。
皆さんも、いろいろなサイトを訪れる際に、なかなか表示されなくていらいらした経験があるとおもいます。
ページの表示が速いと、ユーザーはストレスなくサイトを見ることができまし、Google も表示速度をサイトの評価の一つとしているため、検索結果で上位に表示されるために有利になることが期待できます。
せっかくサイトを公開したなら、ユーザーが検索した時に上位に表示されて、たくさんの人にサイトに来てもらいたいですもんね。
GitHub で安全にファイルを管理できる
GitHub は、サイトのファイルをインターネット上に保存・管理できるサービスです。
例えば、パソコンが故障してデータが消えてしまった場合でも、GitHub に保存されていれば復元できます。また、サイトに変更を加えてから、「やっぱり前の方が良かったな」と思った時も、以前の状態に戻したり、いつ・どこを変更したのかを確認したりできます。
サイトを更新していくほど、こうした機能がいかに重要でありがたいかがわかってきます。
最初は少し難しく感じるかもしれませんが、一度設定してしまえば安心してサイトを運営できます。
Vercel なら公開・更新がとても簡単
Vercel は、作成したサイトをインターネット上に公開するためのサービスです。
昔は、サイトを更新するたびにサーバーへファイルをアップロードする作業が必要でした。
しかし、Vercel と GitHub を連携しておくと、ファイルを GitHub に保存するだけで、自動的にサイトを公開・更新してくれます。
つまり、このサイトで紹介する環境では、Cursor にしたいことを伝えるとプログラミングをしてくれて、GitHub がファイルを保存・管理してくれて、Vercel が GitHub の更新を検知してサイトに反映してくれるという、ほぼ完全自動化ができます。
サイト公開までのロードマップ
サイト公開までは、大きく5つの STEP です。
STEP1 Cursor を準備する
まずは AI と一緒に開発するための Cursor を導入します。
インストールから最初のサイトを作るまでを、初心者向けに解説しています。
【STEP1】Cursor のインストールから AI と最初のサイトを作るまで
STEP2 GitHub でファイルを管理するための初期設定と Cursor との連携をする
サイトのファイルを安全に保存するために GitHub を利用します。
ここでは GitHub のアカウント登録から Cursor との連携までを解説します。
【STEP2】GitHub とは？からアカウント登録、リポジトリ作成、Cursor との連携までを徹底解説
STEP3 GitHub でファイルを管理する
STEP2 で Cursor と GitHub の連携が完了しているので、STEP3 では実際にサイトを Github で管理していきます。
最初は難しく感じますが、慣れてしまえばバックアップや更新管理がとても楽になります。
【STEP3】Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも）
STEP4 Vercel でサイトを公開する
GitHub と連携し、自動でサイトを公開できる環境を作ります。
記事を追加するだけでサイトが更新されるようになります。
【STEP4】Vercel でサイトを無料公開する方法を徹底解説
STEP5 Astro で高速なWebサイトを作る
作成したサイトを高速で管理しやすくするために、Astro というフレームワークを導入します。
【STEP5】Cursor で HTML サイトを Astro 化する方法
この記事を読んでほしい人
この方法は、こんな方におすすめです。
- サイトを始めてみたい
- プログラミング経験がない
- AI を活用して効率よく作りたい
- WordPress 以外の選択肢を探している
- 表示速度が速く SEO に強いサイトを作りたい
まとめ
サイト作りは、昔ほど難しいものではありません。
AI を活用すれば、専門知識がなくても、自分だけのサイトを作れる時代になりました。
私自身も、ほぼ初心者の状態からこのサイトを公開することができました。
もちろん、途中でエラーが出てよくわからないことも出てきます。
でも、AI に相談しながら一つずつ進めれば、確実に進んでいきます。
まずは STEP1 から、是非始めてみてください。
このシリーズの記事
このロードマップに沿って、各 STEP を詳しく解説した記事を用意しています。