Build a Website with AI and Deploy It

Use Cursor AI to build a 3-page portfolio site and deploy it live.

Introduction

30 Second Summary

Every business needs a website. Whether you're freelancing, building a side project, or showcasing your skills, having your own professional site online is the modern equivalent of a business card.

In this project, you will build a 3-page professional website using an AI coding assistant and deploy it live to the internet at your own URL.

What You'll Build

A responsive 3-page website with a home page, services page, and contact page, built with HTML and CSS using AI-assisted coding in Cursor and deployed live on GitHub Pages.

By the end of this project, you'll have:

  • A live professional website deployed at your own GitHub Pages URL that anyone can visit.
  • A repeatable AI-assisted coding workflow using Cursor to generate and refine code.
  • Working knowledge of HTML, CSS, and Git fundamentals for building and deploying websites.
  • Secret Mission: Add a dark/light theme toggle that saves your visitor's preference across page loads.

Are there any prerequisites?

None. This project includes setup instructions for every tool you need. You just need a Mac and an internet connection.

Create Your Project and Home Page

Your tools are installed and ready. Now it's time to create the actual website project and build your first page.

In this step, you'll set up your project folder, create the file structure, and use Cursor's AI Agent to generate a professional home page with a navigation bar, hero section, and footer.

In this step, get ready to:
  • Create your project folder and file structure.
  • Use Cursor's AI Agent to generate a professional home page.
  • Preview your site in the browser.
Set up the project folder

Every website lives in a folder that holds all its files. You'll create one folder to contain your HTML pages and CSS stylesheet.

  • In Cursor's terminal, create your project folder and move into it by running these commands:
mkdir ~/my-website && cd ~/my-website

What does this command do?

mkdir ~/my-website creates a new folder called my-website in your home directory. The && chains two commands together, so cd ~/my-website immediately moves you into the new folder.

  • Open this folder in Cursor by clicking File in the top menu bar.
  • Click Open Folder.
  • Navigate to your home directory, select the my-website folder, and click Open.

Cursor reloads with my-website as your active workspace. The Explorer sidebar on the left shows an empty folder.

  • Open a new terminal in Cursor by pressing Ctrl+` (backtick key, top-left of your keyboard).
  • Create the four files your website needs by running this command:
touch index.html services.html contact.html styles.css
  • Confirm the files exist by running:
ls

You should see contact.html, index.html, services.html, and styles.css in the output. They also appear in the Explorer sidebar.

Don't see the files?

Make sure your terminal prompt shows my-website as the current directory. If it doesn't, run cd ~/my-website and try the touch command again.

Help me troubleshoot why my files weren't created in the my-website folder

Use Cursor's AI to generate the home page

Instead of writing every line of HTML by hand, you'll use Cursor's AI Agent to generate a complete home page. You describe what you want, and the Agent writes the code for you.

  • Click on index.html in the Explorer sidebar to open it in the editor.
  • Open the Agent panel by pressing Cmd+I.

What is the Agent panel?

The Agent panel is Cursor's built-in AI assistant. You type a description of what you want, and it generates or edits code directly in your files. It understands your full project context, so it can reference other files and maintain consistency.

  • In the Agent panel, type a prompt that describes your home page. Include these details:
  • You want a professional freelance web developer landing page.
  • It needs a navigation bar with your name as a logo and links to Home, Services, and Contact pages.
  • It needs a hero section with a heading that includes your name, a tagline, and a call-to-action button.
  • It needs a "What I Do" section with a short paragraph about your services.
  • It needs a footer with a copyright notice.
  • The HTML should link to styles.css for styling.
  • Press Enter to send your prompt.
  • Wait for the Agent to generate the code. You'll see it populate index.html in real time.
  • Click Accept when the Agent finishes to apply the changes to your file.

Ask for styles too

You can also ask the Agent to write initial CSS in styles.css at the same time. Mention that you want clean typography, a blue accent color, and centered layout. The Agent can handle multiple files in one prompt.

Agent panel not opening?

Make sure you're pressing Cmd+I (the letter I, not the number 1). If it still doesn't appear, try clicking View in the top menu and looking for the Agent option.

Help me open the Cursor Agent panel

Review and customize your home page

AI-generated code is a starting point, not the final product. You should always review what the Agent created and adjust it to match your personal brand.

  • Look through the generated index.html in the editor.
  • Find any placeholder name (like "Your Name") and replace it with your actual name or a name you'd like to use.
  • Update the tagline to describe what you do in one sentence.
  • Save the file by pressing Cmd+S.

What should my home page include?

Your index.html should have these key elements:

  • A navbar with a logo and links to all three pages (index.html, services.html, contact.html).
  • A hero section with an h1 heading, tagline paragraph, and a call-to-action button linking to the contact page.
  • An about section with a "What I Do" heading and a description.
  • A footer with a copyright notice.
  • A link to styles.css in the <head>.

Now open your page in a browser to see how it looks.

  • In the Explorer sidebar, right-click index.html.
  • Click Copy Path.
  • Open your web browser (Chrome, Safari, or Firefox).
  • Paste the path into the browser's address bar and press Enter.

You should see your home page rendered in the browser. It has a navigation bar at the top, a large heading with your name, a tagline, a call-to-action button, and a "What I Do" section below.

Page looks unstyled or blank?

If the page is completely blank, make sure your index.html file is saved (Cmd+S). A dot next to the filename in the tab means unsaved changes.

If it shows content but looks unstyled (plain black text on white), check that styles.css has content and that your HTML includes <link rel="stylesheet" href="styles.css"> in the <head>.

Help me figure out why my page isn't displaying correctly

✔️ Awesome, I've got everything!

Great. Double check you've saved your file, then move on to the next step.

ⓧ I'd like to double check the full code

Here's what your index.html should look like. Your AI-generated version may differ slightly in wording, but should have the same overall structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name | Freelance Web Developer</title>
    <meta name="description" content="Professional freelance web developer building modern, responsive websites for businesses.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <a href="index.html" class="logo">YourName</a>
            <ul class="nav-links">
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
            <p class="tagline">I build modern websites that help businesses grow online.</p>
            <a href="contact.html" class="cta-button">Let's Work Together</a>
        </section>

        <section class="about">
            <h2>What I Do</h2>
            <p>I create clean, fast, and responsive websites for small businesses and entrepreneurs. From landing pages to full business sites, I turn your ideas into professional web experiences.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

Your home page is live in the browser. Next up, you'll build the Services and Contact pages to complete your site.

Build the Services and Contact Pages

Your home page is live in the browser with a hero section, about section, and working navigation. Now it's time to build the two pages those nav links actually point to.

You'll follow the same AI-assisted workflow: prompt Cursor's Agent, review what it generates, and customize anything that doesn't match your vision.

In this step, get ready to:
  • Generate a Services page with service cards.
  • Generate a Contact page with a form and your details.
  • Style all three pages consistently with CSS.
Generate the Services page

The Services page shows potential clients what you offer. It needs the same navigation and footer as the home page, plus a grid of service cards that each highlight a different offering.

  • In Cursor, click on services.html in the Explorer sidebar to open it.
  • Open the Agent panel by pressing Cmd+I.
  • Type a prompt asking Cursor to generate a Services page. Tell it to:
  • Match the same navigation bar and footer from index.html.
  • Add a hero section with the heading "My Services".
  • Add a grid of 4 service cards, each with an emoji icon, title, and short description.
  • Use these four services: Website Design, Landing Pages, Website Maintenance, and Responsive Design.
  • Link to styles.css in the head.
  • Review the generated code. Make sure the navigation links match the home page (Home, Services, Contact) and the Services link has the active class.
  • Accept the Agent's changes.

What should I see in the generated code?

Your services.html should have a .services-hero section at the top and a .services-grid section containing four .service-card elements.

Each card has a .service-icon span (an emoji), an h3 title, and a paragraph description. The exact emojis and wording may vary from the AI, and that's fine.

  • Save services.html.
  • Open services.html in your browser by right-clicking the file in the Explorer sidebar and selecting Reveal in Finder, then double-clicking the file.
  • You should see a page heading, a subtitle, and four service cards arranged in a grid.

Page looks unstyled or broken?

If the page is plain white text with no layout, check that the <link rel="stylesheet" href="styles.css"> line exists in the <head> of your file. Also confirm that styles.css is in the same folder as services.html.

If the navigation links don't work, make sure href="index.html" and href="contact.html" are spelled exactly as your file names.

Help me troubleshoot my Services page layout.

Generate the Contact page

The Contact page gives visitors a way to reach you. It includes a form and your contact details side by side.

  • Click on contact.html in the Explorer sidebar to open it.
  • Open the Agent panel by pressing Cmd+I.
  • Type a prompt asking Cursor to generate a Contact page. Tell it to:
  • Match the same navigation bar and footer from index.html, with the Contact link set as active.
  • Add a hero section with the heading "Get In Touch".
  • Create a contact form with fields for name, email, and message, plus a "Send Message" submit button.
  • Add a contact info section beside the form with placeholders for email, location, and LinkedIn.
  • Link to styles.css in the head.
  • Review the generated code and accept the Agent's changes.
  • Save contact.html.
  • Open contact.html in your browser to preview it.
  • You should see a form with three input fields on the left and contact details on the right.

Will the form actually send emails?

Not yet. Sending form submissions requires a backend service. For now the form demonstrates the layout and input validation. You can connect it to a service like Formspree later to make it functional.

Form and contact info stacking vertically?

If the form and contact info appear stacked in a single column instead of side by side, the CSS grid styles for .contact-content may not be applied yet. You'll fix this in the next substep when you style everything.

Help me fix my Contact page layout.

Style all three pages consistently

Your pages have structure, but they need consistent styling. You'll prompt Cursor to write the full CSS that covers all three pages with matching typography, colors, and layout.

  • Click on styles.css in the Explorer sidebar to open it.
  • Open the Agent panel by pressing Cmd+I.
  • Prompt Cursor to write complete CSS for your website. Tell it to:
  • Include a CSS reset (margin, padding, box-sizing).
  • Style the navigation bar with Flexbox, a sticky position, and a subtle box shadow.
  • Style the hero sections, about section, service cards grid, contact form, and footer.
  • Use the accent color #2563eb for links, buttons, and highlights.
  • Add a responsive media query for screens below 768px.
  • Review the generated CSS and accept the Agent's changes.
  • Save styles.css.
  • Switch to your browser and refresh the home page (index.html).
  • Click the Services link in the navigation bar to check that page.
  • Click the Contact link to check the contact page.
  • All three pages should have a sticky navigation bar at the top, styled content sections, and a footer at the bottom.

What should the service cards look like?

Each card should have a light background (#f8fafc), rounded corners, centered text, and a subtle border. When you hover over a card, it should lift up slightly with a shadow effect.

  • If any page looks off, describe the problem to Cursor's Agent and let it fix the CSS for you.

Styles not applying to some pages?

Make sure all three HTML files have the exact same <link rel="stylesheet" href="styles.css"> line in their <head> section. A typo in the filename or a missing link tag is the most common cause.

If the service cards appear in a single column instead of a grid, check that your CSS has display: grid on the .services-grid selector.

Help me debug my CSS styling.

✔️ Awesome, I've got everything!

Great. Double check you've saved all three HTML files and your CSS file.

ⓧ I'd like to double check the full code

Here's what each file should look like. Your AI-generated code may have slightly different wording or emoji choices, but the overall structure should match.

services.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Services | Your Name</title>
    <meta name="description" content="Web development services including website design, landing pages, and website maintenance.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <a href="index.html" class="logo">YourName</a>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html" class="active">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="services-hero">
            <h1>My Services</h1>
            <p>Everything you need to establish your online presence.</p>
        </section>

        <section class="services-grid">
            <div class="service-card">
                <span class="service-icon">🎨</span>
                <h3>Website Design</h3>
                <p>Custom-designed websites that reflect your brand and convert visitors into customers.</p>
            </div>
            <div class="service-card">
                <span class="service-icon">🚀</span>
                <h3>Landing Pages</h3>
                <p>High-converting single-page sites perfect for product launches and marketing campaigns.</p>
            </div>
            <div class="service-card">
                <span class="service-icon">🔧</span>
                <h3>Website Maintenance</h3>
                <p>Keep your site updated, secure, and running smoothly with ongoing support.</p>
            </div>
            <div class="service-card">
                <span class="service-icon">📱</span>
                <h3>Responsive Design</h3>
                <p>Sites that look and work perfectly on every device, from phones to desktops.</p>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

contact.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact | Your Name</title>
    <meta name="description" content="Get in touch to discuss your next web project.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <a href="index.html" class="logo">YourName</a>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html" class="active">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="contact-hero">
            <h1>Get In Touch</h1>
            <p>Ready to start your project? Send me a message.</p>
        </section>

        <section class="contact-content">
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">Your Name</label>
                    <input type="text" id="name" name="name" placeholder="John Smith" required>
                </div>
                <div class="form-group">
                    <label for="email">Your Email</label>
                    <input type="email" id="email" name="email" placeholder="john@example.com" required>
                </div>
                <div class="form-group">
                    <label for="message">Your Message</label>
                    <textarea id="message" name="message" rows="5" placeholder="Tell me about your project..." required></textarea>
                </div>
                <button type="submit" class="cta-button">Send Message</button>
            </form>

            <div class="contact-info">
                <h3>Other Ways to Reach Me</h3>
                <p>📧 your.email@example.com</p>
                <p>📍 Your City, Country</p>
                <p>💼 linkedin.com/in/yourprofile</p>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

styles.css:

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: #2563eb;
}

/* Hero section */
.hero {
    text-align: center;
    padding: 6rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.highlight {
    color: #2563eb;
}

.tagline {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #1d4ed8;
}

/* About section */
.about {
    padding: 4rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about p {
    font-size: 1.1rem;
    color: #555;
}

/* Services page */
.services-hero {
    text-align: center;
    padding: 4rem 2rem;
}

.services-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.services-hero p {
    font-size: 1.1rem;
    color: #555;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.service-card {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.service-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.service-card p {
    color: #555;
    font-size: 0.95rem;
}

/* Contact page */
.contact-hero {
    text-align: center;
    padding: 4rem 2rem;
}

.contact-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.contact-hero p {
    font-size: 1.1rem;
    color: #555;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
}

.contact-info {
    padding: 2rem;
}

.contact-info h3 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.contact-info p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    margin-top: 4rem;
    border-top: 1px solid #e2e8f0;
    color: #777;
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .tagline {
        font-size: 1rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }
}

You now have a complete three-page website with consistent navigation, styled content, and a professional look. Next up, you'll test how it looks on mobile devices and prepare it for deployment.

Make It Responsive

Your three pages look great on a desktop-sized browser window. But over half of web traffic comes from phones.

In this step, you will test your site on simulated mobile screens using your browser's built-in developer tools. You will also prepare a small config file that GitHub Pages needs for plain HTML sites.

In this step, get ready to:
  • Test all three pages in a simulated mobile view.
  • Fix any mobile layout issues using Cursor's AI Agent.
  • Add a configuration file for GitHub Pages deployment.
Test on mobile

Your browser has a built-in device simulator that shows you exactly how your site looks on a phone screen. No real phone needed.

  • Switch to the browser tab where you have index.html open.
  • Open Developer Tools by pressing Cmd+Option+I (macOS) or Ctrl+Shift+I (Windows).
  • Toggle the device toolbar by pressing Cmd+Shift+M (macOS) or Ctrl+Shift+M (Windows).
  • Your browser viewport shrinks to simulate a phone screen. You can select a specific device from the dropdown at the top (e.g. iPhone 14) or leave it on Responsive and drag the handles to resize.
  • Check index.html, services.html, and contact.html by navigating between them using the site's navbar links.

What is responsive design?

Responsive design means your layout adapts to different screen sizes. Your styles.css already has a @media section at the bottom that kicks in on screens narrower than 768px. It stacks the navigation vertically, reduces heading sizes, and switches grids to a single column.

Look for anything that seems broken: text that overflows the screen, elements overlapping, or content that is too small to read.

Fix mobile issues with AI

Your CSS already includes media queries for mobile. But if you spot anything that looks off, Cursor's Agent can fix it in seconds.

  • If everything looks good on mobile, skip ahead to the next substep.
  • If you spot layout issues (text too small, navigation overlapping, cards stacking incorrectly), switch back to Cursor.
  • Open the Agent panel with Cmd+I.
  • Describe the specific problem you see. For example: "On mobile, the contact form and contact info are overlapping. Fix the media query in styles.css so they stack vertically."
  • Review the changes Cursor suggests and accept them.
  • Refresh the browser's mobile preview to confirm the fix.

Be specific with your prompts

Instead of saying "fix my mobile layout", describe exactly what is wrong and where. The more specific you are ("the service cards on services.html overlap on iPhone"), the better the AI fix will be.

Still seeing layout issues?

Make sure you saved styles.css after Cursor's edit. Then hard-refresh your browser with Cmd+Shift+R to clear any cached styles.

My mobile layout still looks broken after Cursor's fix. How do I debug CSS media queries?

Add a .nojekyll file

GitHub Pages normally processes files through Jekyll (a static site generator). Since you are deploying plain HTML, you need to tell GitHub Pages to skip that processing.

  • Switch back to Cursor's terminal.
  • Create an empty .nojekyll file in your project root by running this command:
touch .nojekyll
  • Confirm the file exists by running:
ls -a

You should see .nojekyll listed alongside index.html, services.html, contact.html, and styles.css.

Why do I need this file?

Without .nojekyll, GitHub Pages tries to run your files through Jekyll. This can cause problems with filenames or directories that start with underscores. The empty file tells GitHub Pages to serve your HTML files directly.

Don't see .nojekyll in the list?

Files starting with a dot are hidden by default. The -a flag in ls -a shows all files including hidden ones. If you used ls without the flag, you will not see it.

My .nojekyll file isn't showing up when I run ls. What am I doing wrong?

Your site is fully tested on mobile and ready for deployment. Next up, you will push everything to GitHub and make your site live on the internet.

Deploy to GitHub Pages

Your website is built, responsive, and looking great on all screen sizes. Now it's time to put it live on the internet where anyone can visit it.

You'll use Git to track your code and GitHub Pages to host it for free. Right now your website only lives on your computer. In a few minutes it will have its own public URL that you can share with anyone.

In this step, get ready to:
  • Initialize a Git repository and commit your code.
  • Push your code to a GitHub repository.
  • Enable GitHub Pages and see your live site.
Initialize Git and commit your code

Git is a version control tool that takes snapshots of your code. You need to create a Git repository and save a snapshot before you can push anything to GitHub.

  • Initialize a Git repository, stage all your files, and commit them by running these commands:
git init
git add .
git commit -m "Initial commit: 3-page professional website"

What do these commands do?

  • git init turns your my-website folder into a Git repository so it can track changes.
  • git add . stages all files in the folder (the dot means "everything").
  • git commit -m "..." takes a snapshot of your staged files with a descriptive message.
  • You should see output listing the files that were committed, including index.html, services.html, contact.html, styles.css, and .nojekyll.

Seeing an error about identity?

If Git asks you to set your name and email, run the following two commands (replacing the placeholders with your details), then try the commit again:

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

help me fix a Git identity error when committing

Create a GitHub repository and push your code

GitHub Pages requires a repository with a specific naming pattern. Your repo must be named yourusername.github.io (using your actual GitHub username) to get a free site at that same URL.

  • Open your browser and go to github.com.
  • Click the + icon in the top-right corner and select New repository.
  • In the Repository name field, type yourusername.github.io (replace yourusername with your actual GitHub username).
  • Leave everything else as default. Do NOT check "Add a README file".
  • Click Create repository.

Why this naming convention?

GitHub gives one free user site per account. The repository must be named exactly yourusername.github.io to activate the user site feature. Your live URL will match this name.

  • Back in Cursor's terminal, connect your local repository to GitHub and push your code by running these commands:
  • When you run the push command, Git will ask you to sign in to GitHub. A browser window may open to complete authentication. Follow the prompts to allow access.
git remote add origin https://github.com/[[GITHUB_USERNAME="your GitHub username"]]/[[GITHUB_USERNAME="your GitHub username"]].github.io.git
git branch -M main
git push -u origin main

What do these commands do?

  • git remote add origin tells Git where your GitHub repository lives so it knows where to send your code.
  • git branch -M main renames your default branch to main (GitHub's expected branch name).
  • git push -u origin main uploads your committed code to GitHub.
  • After the push completes, refresh your repository page on GitHub.
  • You should see all your project files (index.html, services.html, contact.html, styles.css, .nojekyll) listed in the repository.

Push failed or authentication error?

  • Make sure the repository name matches exactly. The URL must use your real GitHub username in both places.
  • If you see a 403 error, double-check that you are signed in to the correct GitHub account in your browser.
  • If the browser sign-in did not appear, try running the push command again. Git may need a second attempt to trigger the authentication flow.

help me fix a git push authentication error

Enable GitHub Pages

Your code is on GitHub, but it is not a live website yet. You need to tell GitHub to serve your files as a website through GitHub Pages.

  • On your repository page, click Settings in the top tab bar.
  • In the left sidebar, under Code and automation, click Pages.
  • Under Build and deployment, set Source to Deploy from a branch.
  • Select the main branch and / (root) folder.
  • Click Save.

How long until my site is live?

GitHub Pages can take up to 10 minutes to publish your site after you save. In most cases it is ready within 2-3 minutes.

  • Wait 2-3 minutes, then visit your site at https://yourusername.github.io (using your actual username).
  • You should see your home page displayed live on the internet.

Site not loading yet?

  • Go back to Settings > Pages on GitHub. If you see a green banner with a link, click it to open your live site.
  • If you see a 404 page, wait a few more minutes and refresh. The first deploy can take up to 10 minutes.
  • Make sure your repository is named exactly yourusername.github.io. Any typo in the name will prevent the site from working.

my GitHub Pages site is showing a 404 error

Secret mission

Add a Dark/Light Theme Toggle

Want to impress clients with interactive features? Add a dark/light theme switcher to your site using CSS custom properties and JavaScript. Visitors can toggle between modes, and their preference persists across page loads.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely locally and uses free services, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Local project folder (my-website on your Desktop).
  • GitHub repository (yourusername.github.io).
  • GitHub Pages site (live at https://yourusername.github.io).
  • Cursor (installed application).

Keep everything running

No action needed. Choose this if you want your site to stay live and your project files accessible for future edits.

  • Your site remains live at your GitHub Pages URL at no cost.
  • Your project files stay in the my-website folder on your Desktop.
  • Cursor stays installed on your Mac for future projects.

Pause - I'll come back to this later

Take your site offline temporarily without deleting anything. Your code stays safe on GitHub and your local machine.

  • Go to your repository on GitHub.
  • Click Settings.
  • Select Pages in the left sidebar.
  • Under Build and deployment, change the Source dropdown to None.
  • Your site goes offline, but your code and repository remain intact. To republish later, set the source back to main branch.

Delete - I don't want to use this again

Remove all project resources and start fresh. This cannot be undone.

Delete your local project folder by running this in Terminal:

rm -rf ~/Desktop/my-website

Delete your GitHub repository:

  • Go to your repository on GitHub.
  • Click Settings.
  • Scroll down to the Danger Zone section at the bottom.
  • Click Delete this repository.
  • Follow the prompts to confirm deletion by typing your repository name.

This also removes your GitHub Pages site automatically.

Uninstall Cursor (optional):

  • Open Finder and go to Applications.
  • Drag Cursor to the Trash.
  • Empty the Trash.

Nice Work!

Nice Work!

You just built and deployed a professional multi-page website using AI as your coding partner. Your site is live on the internet for anyone to visit.

You've learned how to:

  • Build and deploy a live 3-page professional website to GitHub Pages at your own URL.
  • Use Cursor's AI Agent to generate, refine, and fix HTML and CSS code from natural language prompts.
  • Apply Git basics (init, add, commit, push) and build responsive layouts with Flexbox and media queries.
  • Added a dark/light theme toggle using CSS custom properties and localStorage to persist the user's preference.

Ready to quiz yourself?