Publishing: GitHub, the pull request and Vercel

Publishing (or deploying, as developers say) means putting what we've built on the internet so anyone can use it. A lot of people get as far as having a site built with their favorite AI and then have no idea how to get it live for everyone. The skill takes care of that too. But you'll have to approve a couple of things, and to approve them it helps to understand, at least roughly, how GitHub works. Here's the short version.

Branches, commits and merging

GitHub manages your project's code. To do that it works with a concept called branches.

You have a main branch, called main. That's your site's code: what's in production (on the internet, running), or about to be. If you look at the branch you'll see little dots: those are commits, the submissions. Every time ChatGPT finishes a step, it makes a commit: it sends what it has on the computer to GitHub.

But those commits don't go to main. What happens is a parallel branch gets created: an identical copy of main, where the work happens. Say I want to add a new product page to my site. I don't add it to main. I branch off, make all the changes there, and when I'm happy, I join those changes into the main branch. That joining is called a merge. When we talk about merging, that's it.

The rule: ChatGPT never works on main. Always on a parallel branch. When it's done, it asks for the branch to be joined into main; that's called a pull request, a request to merge. And that's where we come in, from GitHub, to look at a preview of what the site would look like with that change in, and to press the button to merge it.

Step 17: the pull request

When you approve the final check, the skill makes the commit, opens the pull request and writes its description. All automatically. You go to github.com with your account, open your repository (the one starting with nextjs), and under the Pull requests tab there's the one ChatGPT made, with its branch and its write-up.

Open it, click Merge pull request and then Confirm merge. That joins the changes into main. It's the only moment in the whole process where you do something on GitHub yourself, and we do it by hand on purpose: to keep a bit of control. But since the skill has already audited everything, you can merge with peace of mind.

Step 18: Vercel

Vercel is where we're going to host the site. It's a free host that connects to GitHub: when something lands on main, Vercel publishes it. And, best of all, when there's an open pull request it shows you a preview before you merge. You can host loads of projects there and, later on, add analytics and other things.

Search for Vercel on Google and go in. If you don't have an account, create one; I created mine with Google.

1. It asks for a team name and whether you're working on a personal project. Pick personal project: that's the Hobby plan, free. I called the team Mariscal.
2. Import repository → GitHub. It asks you to install Vercel's app on your GitHub; give it access to all repositories (the account is new) and verify with the code it sends you.
3. Your repositories appear. Import the one starting with nextjs. Vercel works out on its own that it's Next.js and configures everything.
4. Deploy.

This takes a little while. Not long for this project, because it's new and small; as your site grows, deployments will take longer and longer. When it's done, Continue to Project, and under Domains you have the address it's published at: something like nextjs-juszzz.vercel.app. Open it and there it is, available to everyone.

Later you can give it your own domain. This address is the temporary one, for checking everything first.

Look at the product page, the modal, the checkout with its colors. There's a balance across the whole site because it uses the same design file. Some things don't work yet, like the filters: that's because so far we've only done the design. You ask for that afterward.

Closing the step: telling it it's done

Go back to ChatGPT and tell it:

I merged to main and deployed. Verify the deployment.

It's important to say this, so it checks everything's fine and closes the step. It'll ask for the URL Vercel gave you, the one under Domains. Paste it in. With that it opens the live site, audits it, looks at GitHub, confirms the pull request is on main, and closes step 18.

We started with an idea. We finished with the project on the internet, public, for anyone to see. What's left are the bonuses: how to edit the copy without touching code, and how to keep asking for changes.