DEV Community

Cover image for TLDR: Host your website on GitHub Pages with custom domain

TLDR: Host your website on GitHub Pages with custom domain

Host your static HTML web pages for free on GitHub Pages. This TLDR guide will show a step-by-step process.

Step 1: Have a public repo with an index.html page in it.
Step 2: Go to Settings tab in the repo, and click on Pages.

Settings of repository

Step 3: Under "Build and deployment", under "Source", select Deploy from a branch. Under "Build and deployment", under "Branch", use the branch dropdown menu and select a publishing source.

Image description

When the site is live, you can see the URL appearing as marked above.

Step 4: To have your domain instead of the one provided by github, here are all the things you need to do:

4.1 In your repo, wherever index.html is, add a file named CNAME (no file extension) in that file, add your domain name without http, https or www. for example, below is how Google will add their domain:

Image description

4.2 Go to your domain registrar and edit the DNS to add all these 4 A records:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Enter fullscreen mode Exit fullscreen mode

Image description

4.3 Add a new CNAME record in your domain DNS. You'll need to add .github.io and www as name. (Delete any current CNAME record โ€œwwwโ€ as there must be only one)

So in step 4, you added 4 A records and 1 CNAME record in your DNS and 1 CNAME file in your repo.

Step 5: Go to your GitHub repo Settings --> Pages and add your domain under Custom domain (i.e. google.com) and click Save

It'll take a few seconds to check the DNS. After the DNS check is successful, you can refresh the page, and this will allow you to enforce HTTPS if you'd required.


This is how you can host your static HTML website on github pages easily.

Top comments (0)