Set up CI/CD Pipeline to Automate Website Publication Process using Netlify, GitHub and NameCheap

Overview of the process

Motivation:

Often times we would like to make small modifications in the website and don’t go through hassle of several steps of pushing/publication to make them go live. This article will focus on setting up streamlined process where changes are automatically deployed and published.

Summary of the article:

This article provides guide on how to automate static website using GitHub, Netlify and NameCheap.

  1. Push code to GitHub master branch
  2. Create Netlify and NameCheap accounts
  3. Create new website on Netlify
  4. Buy domain name on NameCheap
  5. Update DNS information on NameCheap

Step 1

Create GitHub account and set up Git. Then, create GitHub repository, and initialize your project with name, description, README, and privacy mode.

Create GitHub Repository

Step 2

Once you set up your GitHub account and repo, add your local files to remote repository. There are 3 ways to add your local files to Github:

  1. GitHub website
  2. GitHub Desktop

Step 3

Create accounts on NameCheap and Netlify for free. I recommend signing up to Netlify using your GitHub account; it will make logging in and integration easier.

Step 4

At this point, you should have linked GitHub with Netlify, and create/uploaded repo to Github.

  1. Pick a repository. Now, select repository you published to GitHub (Steps 1 & 2). If you don’t see your repository, it means that Netlify can’t see your article due to permission from GitHub.
  2. Deploy (with Build Options). Select branch you would like to publish. It is recommended to publish master branch. Moving forward, you should create new branch on GitHub and merge with master once you complete building new feature. Additionally, you can provide build command if you use any libraries in your website.
Process on how to publish website

Step 5 & 6

First, you need to buy domain name on NameCheap. Enter domain name in the search box and select appropriate URL. Then, you can proceed to checkout and buy the domain name.

Purchase domain on NameCheap
  1. Manage: Click on manage button next to your domain name. You will be redirected to Domain -> Details page.
  2. Advanced DNS: In the middle-right side of the page, click on Advanced DNS tab.
  3. Type: In DNS configurations you will set up 2 types both of which are CNAME. One Host type will be “@”, the second will be “www”.
  4. Value: In the value section for both CNAME types, insert URL of your website (www.auto-generated-random-url.netlify.com)
 Type   Host         Value
CNAME @ www.auto-generated-random-url.netlify.com
CNAME www www.auto-generated-random-url.netlify.com
Linking NameCheap with Netlify

Conclusion

The final result and the workflow of the website will look like this:

Software Developer & Data Scientist