Intermediate6 min readShare
Was this chapter helpful?
Share
How your project goes from "I'm building this on my laptop" to "anyone in the world can visit my website." No coding knowledge needed — your AI tool handles the technical parts.
Think of this like writing a book: you write a draft on your computer, save your progress, back it up to the cloud, and then publish it for the world to read. Building a website works the same way.
Your AI tool creates and edits files on your computer
Create a save point so you can always go back
Upload your save points to GitHub (like cloud storage for code)
Vercel sees your upload and builds your website automatically
Anyone can visit your website at your domain
Git is like save points in a video game. Every time you "commit" (save) your work, Git remembers exactly what your project looked like at that moment. If you break something, you can always go back to a previous save point.
GitHub is like cloud storage for your save points. It keeps a backup of your entire project history online, so you never lose your work — even if your laptop dies.
The good news: your AI tool handles all the Git commands for you. You just need to understand what's happening so you can tell it what you want.
Your project folder, but with a memory. It remembers every change you've ever made. Think of it as a folder with a built-in time machine.
A save point. Like saving your game — you can always come back to this exact moment if something goes wrong later.
A parallel universe of your project. You can experiment in one universe without messing up the other. More on this below!
The 'real' version of your project. The one that's actually live on your website. You don't experiment here.
Uploading your save points from your computer to GitHub. Like backing up your photos to the cloud.
Downloading the latest version from GitHub to your computer. Important if someone else made changes.
Combining work from one branch into another. Like taking a draft chapter and adding it to the final book.
A polite way to say 'hey, I made some changes — can we add them to the main project?' Great for getting a second pair of eyes.
When two changes clash — like two people editing the same sentence differently. Your AI tool can usually fix these for you.
Downloading a full copy of a project from GitHub to your computer. You do this once when starting to work on a project.
Making your own copy of someone else's project on GitHub. You can change it however you want without affecting the original.
A list of files that should NOT be saved to Git — like passwords, secret keys, and big folders your AI tool can regenerate.
Imagine you're writing a novel. Your finished draft is safe in a folder. Now you want to try rewriting Chapter 3, but you're not sure if it'll be better. Instead of editing the original, you make a copy and experiment there.
That's exactly what a branch is. It's a copy of your project where you can try new things. If the experiment works, you merge it back into the original. If it doesn't, you just delete the copy. The original is never touched.
Why this matters: Branches let you work on a new feature (like a contact form) without risking the parts of your website that already work perfectly.
The 'official' version. This is what your live website shows. You never experiment directly here — you always create a branch first, then merge back.
ProtectedCreated when you want to add something new (like a navbar, a contact form, or a new page). One branch per feature keeps things organized.
Per FeatureCreated when you need to fix a bug. You make the fix in its own branch, test it, then merge it into main.
Per BugThe simple workflow: Create a branch → build your feature → save your progress → upload to GitHub → open a Pull Request → merge to main → your site updates automatically.
"Create a new branch called feature/contact-form and switch to it"
"Save my current progress with the message 'Add contact form with email validation'"
"Upload my latest changes to GitHub"
"Switch back to the main branch"
"Merge my feature/contact-form branch into main"
Every time you save a checkpoint (commit), you include a short message describing what changed. This helps you (and your AI tool) understand your project history later.
fix stuff
update
asdfasdf
WIP
changes
final version
final final version
Add responsive navbar with hamburger menu
Fix login form validation on email field
Update hero section gradient colors
Add user authentication with Clerk
Remove unused dependencies
Redesign Card component with new variants
Style pricing page for mobile screens
Tip: Start with an action word: Add, Fix, Update, Remove, Redesign, Style. Be specific about what changed. Your future self will thank you!
Your project lives in three different places, each with a different job. Think of it like a restaurant: you test new recipes in the kitchen (development), have taste-testers try them (staging), and only then put them on the menu for customers (production).
localhost:3000
Where you and your AI tool build things. Only you can see it.
preview-abc123.vercel.app
A test version online. Share it with others to get feedback before going live.
yoursite.com
The real deal. What your actual visitors and customers see.
Your project needs passwords, API keys, and secret codes to connect to services like databases, email senders, and payment processors. These are called environment variables, and they must be kept secret.
Never upload your secret keys to GitHub. They live in a special file on your computer (and in your hosting platform's settings), but they should never be included in your save points.
Your AI tool knows this rule, but it's worth understanding why: if your secrets end up on GitHub, anyone could find and use them — running up charges on your accounts or accessing your data.
These are passwords and keys that should never be visible to visitors. They only run on the server (the behind-the-scenes part of your website).
Database password
Payment processing key
Login system secret
Email service key
These are not secrets — they're values that the visitor's browser needs to know, like your website's URL or a public project ID.
Your website URL
Public database URL
Public payment key
Analytics ID
"I need to add my Stripe API key. Where do I put it so it stays secret?"
"Set up environment variables for my project so my database password doesn't get uploaded to GitHub"
"I just got an API key from Resend for sending emails. Help me add it to my project safely."
Vercel is the most popular way to put a Next.js website online. Once set up, it's completely automatic — you upload your code, and Vercel publishes your website.
Go to vercel.com, sign in with GitHub, and pick your project. This tells Vercel to watch for changes.
In your Vercel project settings, add the same secret keys you use on your computer. Vercel needs them to run your website.
Every time you push code to GitHub, Vercel automatically builds a preview version with a unique link you can share.
Vercel adds a comment to your Pull Request with the preview link. You (or a friend) can check if everything looks good.
When you merge your branch into main, Vercel automatically publishes the changes to your live website. That's it!
Some files and folders should stay on your computer (or on Vercel) and never be included in your Git save points. Your project has a special file called .gitignore that handles this automatically.
Anyone who finds them on GitHub could access your accounts, database, or payment system.
Your .env files containing API keys, database passwords, and secret codes
This folder (called node_modules) can contain hundreds of thousands of files. Anyone can regenerate it by running one command.
The massive node_modules folder that your AI tool installs
These are temporary files your computer generates when building your website. Vercel creates its own version when deploying.
The .next folder, dist folder, or out folder
Your Mac or Windows creates invisible files for its own use. They clutter up your project and serve no purpose online.
.DS_Store (Mac), Thumbs.db (Windows)
"Make sure my .gitignore file is set up correctly so that secret keys, the node_modules folder, build output, and OS junk files never get uploaded to GitHub."
Here's what a typical day of building looks like, in plain English:
"Pull the latest changes from GitHub so I'm up to date"
If you're working with others (or made changes from another computer), this makes sure you have the newest version.
"Create a new branch called feature/contact-form"
This gives you a separate copy to experiment in. Your live site stays untouched.
"Add a contact form with fields for name, email, and message"
Your AI tool makes the changes. You can see them live on your computer as you go.
"Save my progress with the message 'Add contact form with email validation'"
Save checkpoints often! If something breaks later, you can always go back.
"Push my changes to GitHub"
This uploads your work. Vercel will automatically create a preview link.
"Create a Pull Request to merge my contact form into the main branch"
This is where you (or someone else) reviews the changes before they go live.
Merge the Pull Request on GitHub (click the green button)
Vercel automatically publishes your changes to your live website. Done!
When you upload code to GitHub, some behind-the-scenes checks can run automatically. This is called CI/CD (don't worry about the name — just think of it as "automatic quality checks + automatic publishing").
When you upload code, these checks can run automatically to catch mistakes:
After the checks pass, your website is published automatically:
Things go wrong sometimes — that's totally normal! Here are the most common issues and exactly what to say to your AI tool to fix them.
"I accidentally committed to the wrong branch. Move my last commit to [correct branch name] instead."
Your AI tool will undo the save on the wrong branch and redo it on the right one. No work is lost.
"Undo my last commit but keep the changes so I can re-do it differently."
This removes the save point but keeps all your actual changes intact. You can then save again with a better description.
"I have merge conflicts. Help me resolve them — I want to keep [describe which changes you prefer]."
Conflicts happen when two sets of changes touch the same part of a file. Your AI tool will walk you through picking which version to keep.
"I accidentally committed my .env file with secret keys. Remove it from Git history and make sure it's in .gitignore."
Important: even after removing the file, you should change (rotate) your secret keys immediately, since they were briefly visible.
"My branch is behind main. Update it with the latest changes from main."
Your AI tool will pull the newest code from main into your branch, so you're working with the latest version.
"Delete node_modules and the lock file, then reinstall everything fresh."
This is the 'turn it off and on again' of web development. It fixes most package-related problems.
