Deploy a Gatsby Site with Netlify
There are several options for hosting your Gatsby blog. In this lesson, you'll learn how to deploy your site to Netlify.
Instructor: [00:00] Now that we're done building our blog, we can run gatsby build. While this does its thing, we'll come over to GitHub, and we'll create a new repository. We'll copy our add origin. Inside of our myBlog directory, we have a new public directory.
[00:14] We'll go in there, and we can see that these are all of our built files. I'm going to initialize an empty Git repository, and we'll paste our remote add origin, add everything in the directory, do a new commit, do a git push origin master, and then now, we can see our built files have ended up in GitHub.
[00:33] Now, over Netlify, I've logged in, and I'm going to use the new site from Git, connect to GitHub here, and find our demo blog. Our branch will be master. We don't have any build commands or publish directories because we've uploaded it into the route, and clicked the deploy button.
[00:50] After it's done deploying, we can open it in a new tab, and our blog is live.
This is a great course and I will definitely continue to use Gatsby. In the hopes of helping anyone else who ran into the same problem I did, I would also like to share a comment on the last video for deploying to Netlify. I needed to run gatsby clean first then gatsby build as it was still deploying the develop version which does not work as a standalone app.
I tried installing last episode and running it to see what it builds and turns out it gives me an error saying we are using hooks outside of funcitonal component and doesnt allows me to see it
I am getting an error that says hooks shouldnt be used outside of functional components
@Mortimer, I got the same error before. Doing an rm -rf node_modules/ && rm package-lock.json then npm install helped for me
Yes. It's also possible to deploy the entire Gatsby website to Netlify. Click on the Deploy site button and Netlify will start the build and deploy process you have specified. You can go to the Deploys tab and see the process unfold in the Deploy log. After a few moments, it will give you the live site URL, e.g., random-name.netlify.com.
Remember to add your deploy settings with the below options:
- Branch to deploy: the default is
master. - Build Command: the default is
npm run build. - Publish directory: the default is
public.
It's possible to keep the code on GitHub and
gatsby buildfrom Netlify, which I think is a better choice for a personal blog.