Deploy an Angular CLI Application to Github Pages with a Custom Domain

This is part three of a three part series on deploying Angular CLI applications to Github Pages.

In the angular-cli.json file, modify the assets object to look like the following:

"assets": [
"assets",
"favicon.ico",
"404.html",
"CNAME"
]

The fourth file that’s copied is the CNAME file. This file is used to tell Github Pages the custom domain from which you want the application to be served. Without copying this file to the distribution directory, you would have to go into the settings section of your Github repository to configure a custom domain each time you deploy.

Create a CNAME file (no file extension) in the /src directory of the application. The contents of the CNAME file should contain the custom domain e.g. dcvolunteer.com.

If you haven’t already done so, you’ll need to configure your DNS server with a CNAME entry that points to the Github Pages URL. To configure a domain hosted on Hover’s DNS server, do the following:

1. Log into your Hover account.
2. Visit Your Account > Domains.
3. Select the domain you want to configure to point to Github Pages.
4. Select the DNS tab.
5. Delete all A records that are configured by default.
6. Click the ADD NEW button, enter @ for the Hostname, A for the Record Type, and 64.98.145.30 for the value.
7. Click the ADD NEW button, enter www for the Hostname, A for the Record Type, and 64.98.145.30 for the value.
8. Wait up to a few hours for the DNS record to propagate.

You’re now ready to deploy your application to Github Pages by running the npm run deploy command we configured in part one. You can find a completed example project on Github).

Angular