How to Deploy Websites on Custom Domains using Cloudflare and Github Pages
Have you built a beautiful website? Are you looking to host it for free with a custom domain? Look no further.
This article will explain how to get your website up using two great free tools: Github Pages and Cloudflare.Before we get started, lets go over some of the basics:
Cloudflare
Cloudflare is a CDN – a content distribution network. It mirrors your website on its servers all over the world. That means it’s faster for anyone who wants to access it, no matter where they are. As a bonus, it also protects you against people who might want to overload your site with automated bots trying to visit it and drain your bandwidth (DDOS attacks).
You can read more about how they describe themselves here.
Why Cloudflare?
There are several reasons to use Cloudflare. It’s free. It has a simple DNS manager that lets you set up mail and subdomains. It’s got built-in HTTPS domain management. It automatically minifies static assets of your website, speeds up how people all over the world accessing your website, and protects against downtime. You can see their panel of options to set right here:
About GitHub Pages:
GitHub is best known for being a code repository, and GitHub Pages was originally designed as a way for open-source projects to host pages about themselves. Since its release, it’s grown into a highly versatile platform for hosting content in a production setting. It’s reliable, robust, fast, and great for serving most kinds of corporate and personal static sites. Their own description puts it best: “GitHub Pages is a static site hosting service. It is designed to host your personal, organization, or project pages directly from a GitHub repository.”
See more here.
What is a static site?
Static sites consist of plain old HTML, CSS, and Javascript, and don’t use databases. As opposed to database-driven sites that have continuously changing content that depends on the user (like Facebook, or Twitter), static sites show the same information to every visitor.
What do we need to start?
Before beginning, make sure you:
- Have a Github repository and a deployment environment using Github pages. You will generate a url with this structure: “https://username.github.io/nameoftherepository"
- Cloudflare account. Register on https://www.cloudflare.com/a/sign-up
- Custom domain you’ve purchased from a registry like NameCheap
Step 1: Deploy your static website using Github Pages.
We should have a Github repository and a deployment environment using Github Pages. We deploy using Github Pages when we make a push to “gh-pages” branch.
Step 2: Insert your custom domain in Github repository settings
Select the option “settings” from the repository’s navbar. It’s the last option. When you are in “settings”, scroll to Github Pages area and insert your custom domain and click on the “save” button.
Step 3: Setup your custom domain on Cloudflare
Log in to your Cloudflare account and insert your custom domain to scan DNS Records.
After you click on “Scan DNS Records” button, there will be a progress bar. You should click on “continue button” when the progress bar will finish. Then insert the necessary DNS and CNAME. We will get this structure:
Note:
The A and CNAME records are the two common ways to map a hostname to one or more IP address.
The A record points a name to a specific IP, when the IP are known and stable.. In our case, the name yourdomain.com to point to the server 192.30.252.153
The CNAME record points a name to another name, instead of an IP. The CNAME source represents an alias for the target name and inherits its entire resolution chain. In our case, we use Github Pages and we set www as a CNAME of astephannie.github.io
In this step, we are setting two “A Record DNS”, it’s necessary because we are getting the communication between Cloudflare and Github Pages. From now, all requests to yourdomain.com will be routed to the static website on Github. Click on “continue” button to go to the next step.
Step 4: Select the Cloudflare plan
Select the Cloudflare plan you want. In our case, we select “Free Website” and click on the “continue” button.
Step 5: Update the Nameservers on your domain dashboard
Copy the Nameservers from Cloudflare and paste them on your Domain dashboard.
For this example, we have a domain of godaddy.com. We need to access to our domain and change the Nameservers.
You will have this result in pending status at the beginning:
At the end, the status will change:
Step 6: Setup Minification of the website assets
Select the option “speed”, it’s located on the Cloudflare navbar and select “Javascript — CSS — HTML”, files that we want to be minified.
There are some other options to consider in Cloudflare to setup. We did the necessary steps to have our website live on the domain we setup. You can check caching and page rules to continue exploring the options of Cloudflare and verify how powerful can Cloudflare be.
Step 7: You’re done!
Your website is live. You can make changes directly in Github on the gh-pages branch, and they’ll appear directly on your website.
That’s it!
Annie is a frontend software engineer at Crowdbotics.
Building A Web Or Mobile App?
Crowdbotics is the fastest way to build, launch and scale an application.
Developer? Try out the Crowdbotics App Builder to quickly scaffold and deploy apps with a variety of popular frameworks.
Busy or non-technical? Join hundreds of happy teams building software with Crowdbotics PMs and expert developers. Scope timeline and cost with Crowdbotics Managed App Development for free.
