DEV Community

Cover image for How to set up a custom domain on Github Pages
Mark Kop
Mark Kop

Posted on

How to set up a custom domain on Github Pages

Assuming you have already bought a custom domain (example.net) and a Github Page set up (example.github.io):

Create a CNAME file

Create a file name CNAME in the project's root folder with the custom domain example.com inside.

# Outputs example.net to a file named CNAME
echo example.net > CNAME
Enter fullscreen mode Exit fullscreen mode

Alt Text

You may need to configure your build command to also copy CNAME to the build folder, for example with a package.json file with React:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && cp CNAME build/CNAME",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
Enter fullscreen mode Exit fullscreen mode

Configure your domain

At your domain provider (the place you bought the domain - which I recommend porkbun.com), find the configuration for custom host/resource records and set:

Type: A
Host: @
Answer/Data/Value: 185.199.108.153
TTL: 30min (or any)
Enter fullscreen mode Exit fullscreen mode

Do this for all 4 github page ip addresses: 185.199.108.153, 185.199.109.153, 185.199.110.153 and 185.199.111.153

You'll also need to add this one:

Type: CNAME
Host: www
Answer/Data/Value: example.github.io
TTL: 30min (or any)
Enter fullscreen mode Exit fullscreen mode

Alt Text

Configure repository

At Github, go to the repository settings and add your custom domain in the Github Pages section.
It might take up to 24h to reflect these and/or HTTPS changes

Alt Text

References:

Discussion (7)

Collapse
stephanie profile image
Stephanie Handsteiner • Edited on

You don't need to create the CNAME file by hand, GitHub does that automatically, when you enter the custom domain in the repository settings.

Collapse
heymarkkop profile image
Mark Kop Author

Cool! I was having a problem that if I didn't include CNAME on build, this setting would reset after each deploy.

Collapse
xanderyzwich profile image
Corey McCarty

You do have to include it on build, but when you add the custom domain from the github site it automatically creates and commits the CNAME file for you.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Quite handy. Thanks for sharing!

Collapse
delta456 profile image
Swastik Baranwal

Thanks really useful

Collapse
domenicosolazzo profile image
Domenico Solazzo

Very well explained and useful! Thanks

Collapse
waylonwalker profile image
Waylon Walker

Thanks for setting up such a clear guide. Getting a custom domain working can be so frustrating because you never know if you messed something up, or if it just has not been reflected by the dns yet.