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.

The main goal is to link two services, Netlify and GitHub, which will allow us to 1) have version control of all the changes and 2) automatically deploy all the changes. Setting up Netlify and Github is one of the first steps towards CI/CD pipeline and best practices in the devops world.

Summary of the article:

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

Brief overview on how to push files to GitHub, link with Netlify platform, and set up CI/CD for your website. Then, I will show how connect customized domain name from NameCheap with Netlify.

Summary of the Steps:

1. Create GitHub repository
2. Push code to GitHub master branch
3. Create Netlify and NameCheap accounts
4. Create new website on Netlify
5. Buy domain name on NameCheap
6. 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. Command Line
2. GitHub website
3. GitHub Desktop

Depending on your preference, add local files to Github. Initially, all the code will be pushed to master branch.

There is also comprehensive guide on Github on how to use the git platform.

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.

On the main dashboard of the Netlify, click on New site from Git button.

1. Select Git provider. In our case, select GitHub. If you followed Step 3 above, you should be automatically linked with Github, otherwise, follow prompts to login into preferred Git provider.
2. 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.
3. 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.

Output: You should see dashboard of your published website with URL of you website created by Netlify: www.auto-generated-random-url.netlify.com

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

Once you have purchased your domain. Log in to your personal dashboard on NameCheap. Navigate to My Account Panel on your Dashboard.

1. Dashboard: Navigate to Dashboard in order to see information about purchased domain.
2. Manage: Click on manage button next to your domain name. You will be redirected to Domain -> Details page.
3. Advanced DNS: In the middle-right side of the page, click on Advanced DNS tab.
4. 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”.
5. 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:

Uploaded code to GitHub will be automatically pulled into Netlify and published on your customized domain name you purchased on NameCheap.

Thanks for reading my article. Special thanks & shout out to Hamed Montazeri! Follow me on social media: Instagram, GitHub, LinkedIn