Continuously Deploy any Static Site on Netlify
Continuous deployment is the gold standard for any DevOps process. Frontend developers can take advantage of the reliability of version control in git, and extend that to the production deployment process. In this lesson we see how to set up and deploy a static site on Netlify, make and push a change to Github to trigger continuous deployment, and revert changes when necessary
Instructor: [00:01] Say I have a static site project that I'm working on. I have it locally running. It looks perfectly fine and ready to deploy. This can be any project, including Gatsby, VuePress, Create React App, or on this case, I'm going with React Static, but it doesn't really matter what you use.
[00:21] I also have this linked up to GitHub, where I've uploaded all my files as in my local directory. What I then can do is to go to the Netlify app page and then click "New site from Git." This sets up a deployment as well as continuous deployment.
[00:49] I authorize with my Git provider of choice, in this case GitHub. I look for my project name, in this case egghead-netlify-react-static. I come to this page, where it's asking me to configure some things.
[01:13] You can choose which branch to deploy. For example, if you have a docs branch, you can just deploy only to docs. This is useful for open source libraries. You can also look at the build settings. If you have a static site generator, you probably have a build command. You're probably using npm scripts, Gulp or make or whatever.
[01:36] For a hint for most npm users, you can look at something in the package.json field for scripts. There should be a build command. This build command, if I run it, this is how it looks when I run it locally. It builds to a dist directory.
[01:57] The dist directory has all the files, including an index.html file, as well as the rest of the static site that has been generated. Those are the two pieces of info I need, the build command and the dist directory.
[02:11] I'm just going to head over here. I'm going to type in the build command, npm run build, as well as the dist directory. There's also other environment variables. For example, if you have API secrets that you can enter in here. Don't worry if you don't have them right now. You can edit it later.
[02:28] If you're on a team plan, you can also select deploying to the team or whether it's your personal account, and you can hit "Deploy site." As it deploys, you can click over to the deploy log and see exactly what's going on. It's installing and downloading your project. Now you can see it's running build. Now it's starting to deploy the site.
[02:57] It's building similarly to how you'd build it locally, except that once it's finished building, it's going to serve straight from that dist folder. Now that it's deployed, we can look over here and click into the given URL. You can change that as well. Now you have a deployed site that looks exactly like your local site.
[03:20] Let's see the continuous deployment in action by changing some detail on the site and pushing it up. I head back to my code and make some changes and save it and push it up.
[03:46] Now that it's been pushed up to GitHub, I can go over here and check that there has been an update of my files. Correspondingly, it's going to fire off a webhook and start another build with the new changes.
[04:08] Now that it's built, I can head over back to my site and refresh and see that change appear on screen. If I ever wanted to revert that change, I can head back to the deploy screen, go back to the previous unbroken build and click "Publish deploy." That will set the live deploy back to the original version. If I refresh, that will refresh back to the original.