Astro Crash Course #13 - Deploying to Netlify

All right then, my friends. So, there's one more thing I want to show you in this course, and that is how to deploy your Astro site to Netifi. And the easiest way to do this is to link a Netifi project to a GitHub repository. So, we can just import that repo, build the project, and deploy it. Which means we're going to have to push our project up to GitHub to begin with. So, with that in mind, I'm going to make a brand new repo here on GitHub first of all, which I'll call Astroyen book bytes, but the name doesn't really matter. Then, I'm going to make this repo private. you don't need to. And then we'll scroll right down to the bottom and initialize it. All right. So once that's done, we just need to grab the repo URL so we can push to it from our local project. So at the start of this course, I said that I was going to initialize a git repo for the project. That was one of the options that Astro gave to us initially. And throughout this course, I've been making commits between each lesson. So now all I need to do is link this local repo with the remote repo I just made on GitHub and then push up the main branch. First then we need to add the remote repo using the link we just copied. To do that, open a terminal and just type git remote add. Then we give this a name origin and then we'll paste in the URL we copied and hit enter. So that means when we push this repo up now it's going to push it to the remote we just added. So now I can just type another command which is get push origin which is the remote we just added then main because we want to push up the main branch and that's going to push the main branch up to GitHub then. So if we refresh the repo now we should see that main branch has been pushed up and now we can link this repo to Netifi and ask it to deploy this main branch. So then let's head to Netifi to do this. Now the first thing you will need to do is sign up for a free account. And once you've done that, you're likely to be taken to this dashboard page. It looks something like this. It might change slightly, but I'd also recommend linking your GitHub account if you didn't sign up with it. Uh, which you can do by clicking on your account profile down here. Then just go into your settings. Once you've done that, hit this project link so that we can import a new project from Git by clicking on this button right here. Then we want to deploy from GitHub. So, select that next. And this might open a new browser for you to authorize access to your GitHub account, which you can go ahead and do. After that, we want to select the repo that we want to deploy, which in my case is called Astro Book Bites. So, I'm just going to search for that one right here. When I see it, I'm going to select it. And next up, we need to give the project a name, which I'm going to call book bytes. And below that, we've got a few different options. First of all, the branch that we want to deploy, which I'm going to keep as main. Second, we can specify a base directory of the project on this branch, but we'll leave it blank because it's going to be the root directory for us. Then, we can update the build command and the publish directory if we need to, but we don't need to because this is the correct build command. And Astro puts the built site into a disc folder when it's done. So, we can skip over those. And finally, you can add a functions directory if you have one for Netly Cloud Functions, but we don't, so we can skip that as well. And same for environment variables. We don't have any, but if you did, then you can add them right here. And finally, we just want to click on this deploy button at the bottom. Now, when we do that, Netifi is going to import and build the project and then automatically deploy it for us. So, this is just going to take a minute or so to complete. Once it's finished, you should see down here that it says published. And also up here, the link to the site is green. So, we can click on that to preview the site at this address. And hopefully, fingers crossed, we should see everything working, which by the look of things, we do. Awesome. So then, my friends, that is how to easily deploy your Astro site to Netifi. And that's now pretty much the end of this series as well. So, I really hope you enjoyed it and that you learned a lot along the way. Also, I am considering making a whole Astro Masterass, which would be much, much longer than this one. It's going to go into a lot more detail about different features and we flesh out a more complex site during it. So, if that is something you would like to see, then please let me know in the comments. And if enough people want it, and if this series does well enough, then I'll go ahead and make that. Otherwise, please don't forget to share, subscribe, and like the videos. And I'm going to see you all in the very next one. Heat. Heat. [music]