Now that we have a statically generated site, we're ready to deploy it to the world. And what better way to do so than with the company who actually coined the term JAMstack? Well, at least their CEO Matt Thilman did. That is Netlify.
Netlify is quoted as one of the fastest way to combine your favorite tools and APIs to build the fastest sites, stores, and apps for the web. Honestly, it's one of the hosting solutions I like to use for my personal projects and is super easy to get started with. So, if you don't already have a Netlify account, go ahead and pause this video and then go and sign up for one now. I'll be here when you get back.
Alright, now that you're inside of your Netlify account, you should see this button here to add a new site. And this is how you add new sites to Netlify. If you click it, you would want to import an existing project. What this allows you to do is to import a project from your favorite Git host provider.
So for me, that's going to be GitHub. This brings up an additional requirement that we won't do together in this video. That is, you do have to push your code to a remote GitHub repository. If you don't know how, I've left some documentation in the description below.
All right. Once you've connected your GitHub account, you'll be able to select your project from this list of repos here. I've called mine something like Jamstack, and I'll hit enter, and sure enough, there is my repo. So I'll select that, and then Netlify actually is able to pre-fill some things out for us.
So notice here that it knows automatically which branch to deploy, but if you wanted to change that, you could change it as you saw fit. Also, you can choose the base directory, which is the place that it's going to run things like npm install from, where it's going to run the build command from, and so on. Now, the build command here is actually they fill that out incorrectly. We don't want npm run build.
We want that to be npm run generate, just like we did on our local machine. So this is kind of the beauty of Netlify. We don't actually have to build the site on our local machine. Instead, we just push our code to GitHub and Netlify does the rest for us.
Finally, comes the publish directory, which is preset to that dist directory, which we saw was assembling to dot output slash public in the last lesson. Awesome. Let's hit deploy site. This takes us to the overview of our new site.
And as you can see here, the site is currently building. that is npm run generate has been called and it's in that process that we saw in the last video. Let me click into that and here you can see the logs of what is happening. Notice that it runs npm run generate and we get the expected output.
Finally they deploy the site from the disk directory and down here at the bottom we can see now that the site is live. Awesome. Let's go check it out. I'll go back to my deploys and I should see a link to my new site, but I don't here.
It looks like there's only a link to my GitHub repository. So let me just give the page a refresh and yeah, that's better. app. All of our sites will get an auto-generated URL much like this one, but you can always customize it with your own custom domain if you like.
Now let's visit the site. Perfect. And here's our generated site ready to show off to the world. But don't get too excited just yet.
There's still just a couple more steps we need to take in the next few lessons. Now that we have a statically generated site, we're ready to deploy it to the world. And what better way to do so than with the company who actually coined the term JAMstack? Well, at least their CEO Matt Thilman did.
That is Netlify. Netlify is quoted as one of the fastest way to combine your favorite tools and APIs to build the fastest sites, stores, and apps for the web. Honestly, it's one of the hosting solutions I like to use for my personal projects and is super easy to get started with. So, if you don't already have a Netlify account, go ahead and pause this video and then go and sign up for one now.
I'll be here when you get back. Alright, now that you're inside of your Netlify account, you should see this button here to add a new site. And this is how you add new sites to Netlify. If you click it, you would want to import an existing project.
What this allows you to do is to import a project from your favorite Git host provider. So for me, that's going to be GitHub. This brings up an additional requirement that we won't do together in this video. That is, you do have to push your code to a remote GitHub repository.
If you don't know how, I've left some documentation in the description below. All right. Once you've connected your GitHub account, you'll be able to select your project from this list of repos here. I've called mine something like Jamstack, and I'll hit enter, and sure enough, there is my repo.
So I'll select that, and then Netlify actually is able to pre-fill some things out for us. So notice here that it knows automatically which branch to deploy, but if you wanted to change that, you could change it as you saw fit. Also, you can choose the base directory, which is the place that it's going to run things like npm install from, where it's going to run the build command from, and so on. Now, the build command here is actually they fill that out incorrectly.
We don't want npm run build. We want that to be npm run generate, just like we did on our local machine. So this is kind of the beauty of Netlify. We don't actually have to build the site on our local machine.
Instead, we just push our code to GitHub and Netlify does the rest for us. Finally, comes the publish directory, which is preset to that dist directory, which we saw was assembling to dot output slash public in the last lesson. Awesome. Let's hit deploy site.
This takes us to the overview of our new site. And as you can see here, the site is currently building. that is npm run generate has been called and it's in that process that we saw in the last video. Let me click into that and here you can see the logs of what is happening.
Notice that it runs npm run generate and we get the expected output. Finally they deploy the site from the disk directory and down here at the bottom we can see now that the site is live. Awesome. Let's go check it out.
I'll go back to my deploys and I should see a link to my new site, but I don't here. It looks like there's only a link to my GitHub repository. So let me just give the page a refresh and yeah, that's better. app.
All of our sites will get an auto-generated URL much like this one, but you can always customize it with your own custom domain if you like. Now let's visit the site. Perfect. And here's our generated site ready to show off to the world.
But don't get too excited just yet. There's still just a couple more steps we need to take in the next few lessons.