Build 01: Publish a Live Site

🚀 Who is this for—and why do it this way?

Launch a real website in just under 10 steps—ideal for a 10-minute sprint, but expect a few bumps if you’re new (that’s normal).
No monthly fees or platform lock-in—unlike Wix or WordPress, you own your code, content, and domain from day one.
- Git: A version control system that lets you save your progress and collaborate with others.
- Cursor: An AI-powered coding editor that helps you scaffold and edit your project with prompts.
- Astro: A fast, modern static site builder—perfect for personal portfolios.
- Cloudflare: A registrar and hosting platform that lets you buy a domain and deploy your site for free.

Build hands-on experience with real-world developer tools—from writing code to going live.

Step-by-step: Your website in 10 minutes

1. Set up GitHub Git

We’ll use GitHub to host your code and connect it to your site. Think of it as a cloud version of your project.

Create an account at github.com
Install Git locally if you haven’t already:

How to install Git (click to expand)

- Mac: Run brew install git in Terminal (you'll need Homebrew installed).
- Windows: Download the installer and follow setup instructions.
Open Terminal and set up Git with your name and email:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

2. Set up SSH keys Git

SSH keys allow your computer to securely connect to GitHub without typing your username and password every time. Generate an SSH key using the below command.

ssh-keygen -t ed25519 -C "[email protected]"  # to generate the SSH Key
cat ~/.ssh/id_ed25519.pub # to read the SSH key you just created.

Copy your public key (~/.ssh/id_ed25519.pub) and add it to GitHub (in browser) → Settings → SSH and GPG keys.

3. Clone your repo Git

Create a new repo on GitHub (my-site) and then:

git clone [email protected]:yourusername/my-site.git # replace "my-site" with your repo name
cd my-site # on your terminal, navigate into the repo (folder) that was just created.

4. Make a first commit Git

You can create a simple README.md to verify everything is working:

echo "# My Site" > README.md
git add README.md
git commit -m "Initial commit"
git push origin main

This ensures Git is working locally and your repo is ready for branching.

5. Create a new branch Git

Before making changes, create a new branch—this is like opening a new workspace or creating a temporary “save point.” You can experiment freely here without affecting your main site.

git checkout -b add-landing-page

6. Launch Cursor AI Cursor + Astro

Open your folder in Cursor AI and prompt:

"Build a minimal static landing page that displays the text "Coming Soon" centered both vertically and horizontally on the screen. Use a modern frontend framework like Astro, React, or Next.js and style the page using Tailwind CSS. Make the layout responsive, with large, clean typography and a subtle background color or gradient for visual appeal. Keep the file structure simple and production-ready. I have already created a repo in git in the folder demo-site. Please include a .gitignore file. "

Cursor will scaffold your Astro site automatically.

7. Prompt AI to enhance the page Cursor

Ask Cursor to add a .gif under the message. You’re now learning how to guide AI with precise prompts.

8. Customize your landing page Astro

By following where Cursor AI edit the code, you can easily identify sections to edit on your own as well.

Eg. Try to replace the placeholder .gif with your own.

9. Merge changes into `main` Git

Once you’re happy with the updates in your branch, it’s time to save your progress back into the main timeline. Think of this as committing your changes to the final version—a clean, stable state you can build on.

Before merging, commit and push your work:

Run the following to commit your changes and push them to GitHub:

What do these Git commands do? (click to expand)

- git add .: Stages all new or modified files for commit.
- git commit -m: Records a snapshot of your staging area with a message describing the change.
- git push origin branch-name: Sends your committed changes to the remote repository (in this case, GitHub).

git add .
git commit -m "Add GIF to landing page"
git push origin add-landing-page

Go to GitHub and create a pull request from add-landing-page into main. Once it’s merged, your updated site will be live.

10. Buy a domain and deploy Cloudflare

Go to Cloudflare Registrar and grab a domain (~$10/year). Connect it to your GitHub repo in Cloudflare Pages and deploy your site.

💡 Bonus Tips

Cursor AI has limited fast prompts. Use ChatGPT for edits once you know what file/line to change.
If AI changes break your code, revert via Git—your safety net.
You’ve now touched version control, AI dev tools, static deployment, and custom domains—in 10 minutes.

🎉 Conclusion

🚀 Your personal tech site is live. And you didn’t just click around—you built it.

I built this to remind myself (and maybe you too) that shipping is better than stalling. Now you’ve got your foundation. What’s your version 2 going to be?