A 5-minute Guide on Deploying with Netlify and GitHub

This article will guide you through the process to host your static website on Netlify with GitHub for continuous deployment support.

Why use Netlify and GitHub?

Netlify allows direct import from GitHub (and GitHub helps track your changes which will enable continuous deployment). Signing up with GitHub makes your future deployments much easier (If you don't know how to set up Git and GitHub, read this documentation to get started). Netlify will handle building and deploying your changes, as well as hosting your website, saving you valuable time and energy.

Getting Started

If you are new to hosting or web deployment, or web hosting or anything related to these topics, it might be helpful to check out my other blogs:

• Web Deployment Explained (coming soon)

Introduction to Web Hosting

A quick explanation about web hosting and different types of web hosting you need to know.

#hosting

• Domain vs. Web Hosting? (coming soon)

Step 1: Signup/Log in with Netlify

If you have already established a good understanding of what web hosting and deployment are, go ahead and create your Netlify account if you don't have an account yet. You should be able to sign up with GitHub.

After you have done going through your registration process (which should ask you some personal questions and creating your own space), you should get to this screen below.

Step 2: Import your site from GitHub (or any other Git repos management service) to Netlify

Now, you can choose to import from GitHub or GitLab or Bitbucket (or manually) but for the sake of this tutorial, we are going to use GitHub.

If you sign up with GitHub earlier, skip to step 3. If not, you will see a screen specify that Netlify needs your authorization to access your GitHub profile (so they can see all your repositories). Go ahead and authorize, then go to step 3.

Step 3: Select the repository where you store your source code

Here I am trying to deploy my project alissanguyen/atom so I will go ahead and select it. You should select whichever GitHub repo that contains the source code that you want to deploy to a site.

Step 4: Configure your deployment settings

The default build command for projects build using npx create-react-app is npm run build. For other frameworks, your build command might be yarn build, or gulp build, etc.

Your publish directory should be the folder (a.k.a directory) where your production files are (the folder containing all your files after Netlify has finished building the site, in my example, the `build` folder is where all my production files are after Netlify runs the build command). Other common publish directories are `dist`, `public`, or `_site`.

Make sure you select the right branch on your GitHub's project repository. You can double-check by going to your GitHub repository and check which branch your files are on.

Step 5 (Optional): Configure your advanced settings

Now, this step is completely optional and you probably won't need to right now unless you have some environment variables.

If you click on the Show advanced button, it will show you a screen where you can add your name-value pair environment variable(s).

If you use any environment variables in your project, you need to configure them here or your deployment will fail.

Step 6: Deploy your site

After you have done configured your settings, go ahead and click on the Deploy site button.

After clicking the button, Netlify will redirect you to their deployment window, where you will see the indication that your site is in progress. You can click on it to observe the deployment process.

Step 7: Preview your site :)

Click on the Preview button on your Deploy log or click on Preview deploy to view your site. Netlify will open a new window with your site URL, generated by Netlify.

Step 8 (Optional): Update your site name

As you can see in step 7, Netlify generates this URL for my Atom's site: https://aesthetic-heliotrope-95da7d.netlify.app/. While it is not bad, it's not really what I want to name my site. So let's fix it. First, click the Deploys button to go back to your site's dashboard.

Then click on Site settings > Site details and you will see a Site information summary.

You can see general site information here, including the site name generated by Netlify. Click on the Change site name button, which will show you a modal (What is a modal window?) showing your current site name.

You can now edit the current site name to your preferred site name, I changed mine from aesthetic-heliotrope-95da7d to atom-alissa (because "atom" isn't available). You can then click Save to save your new site name.

Congratulations!  🎉

You now have your site hosted with Netlify! I hope this easy-peasy tutorial will help with your next deployment!

Conclusion

Deploying with Netlify is super easy and fun, but looking at your new site's URL, you might want to have a more professional URL. Maybe a custom domain? Check out my next blog post Setting up your custom domain with Namecheap and Netlify.