Set up CI/CD Pipeline to Automate Website Publication Process using Netlify, GitHub and NameCheap
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:
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.
Create GitHub account and set up Git. Then, create GitHub repository, and initialize your project with name, description, README, and privacy mode.
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:
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.
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.
- 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.
- 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.
- 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
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.
Once you have purchased your domain. Log in to your personal dashboard on NameCheap. Navigate to My Account Panel on your Dashboard.
- Dashboard: Navigate to Dashboard in order to see information about purchased domain.
- Manage: Click on manage button next to your domain name. You will be redirected to Domain -> Details page.
- Advanced DNS: In the middle-right side of the page, click on Advanced DNS tab.
- 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”.
- 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
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.