Bonus: Automate deployment with GitHub and Vercel - Claude Code Tutorial

This step gets a little bit more technical. So if you're OK with deploying your Claude code to Netlify and just having it live there, then you're welcome to skip this step. But if you really want to feel like a Claude code power user, this is something that you should definitely learn. The basic idea of this approach to exporting your projects is that instead of manually uploading your web page to a platform like Netlify every time you make a change, you can push your code to a platform called GitHub, the code will live in a database, and that database on GitHub can deploy to a platform called Vercel, which can host your webpages and builds and automatically redeploy them every time you push changes to GitHub. So we're going to show you how to set all of that up right now. So the first thing you want to do is create an account on GitHub. So we're going to do that here. Okay, so once you've created a GitHub account, you can paste this into your Claude code and to walk you through how to set things up. So I built a GitHub account that I need to link to Claude Code. Walk me through the steps for doing that. And it'll have some steps that require you to open the command line interface. So I understand that opening a command line interface and pasting commands in might feel a little technical, but I think this is pretty easy and straightforward. So you literally open up PowerShell. So if you're on Windows, you can search PowerShell. Open that up. And then you can literally just copy this command, and then Control-C, and then press Enter. And once you're prompted, just follow these instructions. Select github.com, all these, configure your GitHub identity, and then you can do a GitHub status, paste all that in. And once you've got that set up, you should be good to go. What you want to make sure that you've done is created a new GitHub repo or repository. You can do that by clicking that green new button and then giving your repository an official name. So we're going to call this one the morning landing page and you can see I already created this one but if I wanted to create a new one I just scroll down and then click create repository. If you run into any hiccups you can have Claude Code troubleshoot them by sending screenshots through and then you'll have your code pushed to GitHub, right? And so you can see it here on this link, GitHub slash LinkedIn learning courses, slash landing page. Right. And, you know, there is an HTML version of the site. So all we see here is code. What we'll need to do next is connect it to Vercel. And Vercel is kind of similar to Netlify in that it'll connect directly to your GitHub and you'll be able to deploy the code to a live web page. But it's a little different from Netlify and some reasons that I'll explain. Okay. So we're going to go to Vercel and we're going to sign up for a new account. You can just say you're working on personal projects, LinkedIn, learning, Claude code course. I'll give it the same name and then I'll continue with e-mail. All right. So what you want to do now that you've signed in with your Vercel account is you want to import a Git repository. So we're going to connect our GitHub account to our Vercel account. So you press that button and it automatically identifies your Vercel account and it's make sure it's connected to the right account, LinkedIn Learning Courses Claude Code. So now that connection has been completed. Next you want to install the application for the accounts that you want to connect. So install Vercel. That installation has been completed and now we can see our morning landing page and we import this in and then we click deploy and congratulations, you just deployed a new project. And it looks like I'm getting a 404 not found error. So what I'm going to do is paste this into Claude code and say when I try to deploy my GitHub project to Vercel, it gives me this error. So this is a frequent experience with this workflow, I run into little hiccups and issues and Claude Code is so good a lot of times at troubleshooting its own problems and problems on other platforms like Vercel and GitHub that it mostly has been able to solve these problems for me. So you're going to see if it's able to do that with this prompt. You can see here it clearly identified the issue and it says just like our issue with Netlify that Vercel is looking for for an index.html file, but the file is named morningbrief.html. So it's gonna change that file name and hopefully solve our issue. Let's go back to Vercel and see what happens. Okay, so now on Vercel, our landing page is live when we click it. But why is this different from Netlify? Why is this more powerful than Netlify? I'm gonna show you. Something that's super powerful that we can now do is type things in the Claude code and have it push those changes to GitHub and deploy the changes to Vercel immediately. Let me show you what I mean. We'll go here into our user interface and we'll type add a golden banner that highlights the date text, then add an animated glowing display around the quote, then push changes to GitHub. All right, so I made this command to Claude Code, and it's gonna push those changes to GitHub. Let's see what happens. Kind of cool, you can see the live edit happening to our local copy of the site in real time. So we got a prompt to allow pushing to GitHub. So I typed that command into Claude Code. So if I navigate over to Vercel and I click on the webpage, you can see that the changes have been incorporated to a live website in real time that anyone can view anywhere on the internet. Isn't that cool? Imagine how powerful this can be for a second. You can use the Claude app on your phone and give voice commands to Claude Code and then push those changes to GitHub, which deploys to Vercel, and then you're dynamically building your webpage or application or dashboard in real time simply by talking to Claude Code. That's a next level way to use Claude Code. Now you have this continuous deployment pipeline for all of your projects. And this little landing page that we made together is just the beginning. I'm gonna walk you through some other cool projects I made using Claude Code that might give you some creative inspiration.