How To Host An Angular 10 App On GitHub Pages

A step by step guide on how to host your Angular 10+ applications on GitHub Pages; the amazing free hosting service provided by GitHub to host your Web Applications!

Photo by Markus Winkler on Unsplash

My Setup

Angular CLI: 10.1.0
Node: 12.18.3
OS: win32 x64

Angular: 10.1.1
… animations, common, compiler, compiler-cli, core, forms
… platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Step 1: Create a New Angular Application

Start by making a new angular application using the following command.

ng new my-application

Step 2: Serve the Application

You can run a local server and see your application in the browser. Start a local server using the following command, while being in the directory of your angular project (in this case, my-application)

ng serve

Step 3: Make a GitHub Repository

Login to your GitHub repository, and make a new public repository. Follow the commands that appear in the next page. The commands looks like this;

echo "# my-application" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/ebaad18/my-application.git
git push -u origin master

Step 4: Add GitHub Pages

Once your Angular project is added to the repository, you can head back to command line and run the following command.

npm install -g angular-cli-ghpages

Step 5: Make a Build File (Production Settings)

After installing GitHub Pages to your Angular Application, you can go ahead and make a build (production). Run the following command

ng build --prod --base-href  https://username.github.io/my-application/

Step 6: Hit Publish!

The final command to run is this

ngh --dir dist/my-application

You will see your website published on the domain.

Two Issues I Faced During My First Experience With GitHub Pages.

Nothing Shows In The Browser

You might consider going to the Settings tab of your GitHub repository for this one. Scroll down to where it says ‘GitHub Pages’. Change the branch from ‘master’ to ‘gh-pages’. If this does not work. Run the command in the sixth step again. If the branch is already set to ‘gh-pages’, switch to ‘master’, and then back. Run the command again and refresh.

Assets Do Not Load

Many images might not show. An error message saying ‘Failed to load resource’. Consider going back to the source code and changing to img src from ‘../assets/something-something’ to just ‘assets/something-something’

Anyway, this is it. Let me know in the comments if you have any doubts.