You should commit dist/ folder generated by ng build in master branch of your repo. As I can see you have your angular source code commited there. Unfortunatey you cannot keep your source code in your master branch.

the complete commit command with ngh will be
ng build --prod --base-href="YOUR_GITHUB_USER_NAME.github.io"
and then
ngh --message="MESSAGE" --branch="master"

I have published the same in my repo you can check my website

Also, the source code repo is this

Step 1:

First install the angular-cli-ghpages globally:

$ npm install -g angular-cli-ghpages

build your project and set the correct base href location:

ng build --prod --base-href="https://user-name.github.io/repo/"

Then:

$ ngh

Step 2: In github.com --> Go to your repp --> Setting --> Choose publish with gh-pages branch ==> Save

Step 3: You need to run ng server in terminal to start your local project.

Step 4: And then come back to https://username.github.io/project/"

Because you're using a user/organisation repository of the form username.github.io github automatically publish your master branch, it is also using the readme file as an index.

If you want to publish your gh-pages branch, you need to go in your repository settings and change source branch in the github pages tab to gh-pages

Deploy Angular with GitHub pages

First install angular-cli-ghpages globally

npm install -g angular-cli-ghpages

Angular CLI with the --base-href

ng build --prod --base-href="https://<user-name>.github.io/<repo>/"

To publish the app

ngh

just try on git you will be satisfied

when you install the npm install -g angular-cli-ghpages that time github created a gh-pages branch in your repository, you need to only select that gh-pages branch option

Go to your repp → Setting → GitHub Pages &rarrl select gh-pages branch

1. Create Github repo

If you had not created a Github repository prior to this, go ahead and create a repo in your Github account. After creating the repo, commit all your changes and push them to the repository you have created.

If you had created your repo prior to this, also commit and push all your changes to your Github repository.

2. Install angular-cli-ghpages

Run:

$ npm i angular-cli-ghpages --save-dev

if you hadn't installed angular-cli-ghpages.

3. Run build

Run:

$ ng build --prod --base-href "https://GithubUserName.github.io/GithubRepoName/" 

4. Deploy to gh-pages

Run:

$ npx angular-cli-ghpages --dir=dist/Project-name

Make sure you put the name of the project in the place of Project-name.You can find this in the angular.json file under defaultProject which is at the bottom of the file.

Now if you visit https://GithubUserName.github.io/GithubRepoName/ you should see your application running remotely,which means it has successfully been published on gh-pages.

After 4 years i am using angular 11 now but i came across same problem. To fix it:

1. Run ng build --prod --output-path docs --base-href /<project_name>/ After this code was executed, "docs" folder should be exist.
2. You should commit and push this folder to your github repo.
3. On github repo page, go to settings and scroll down to Github pages and select branch which you pushed /docs folder and select folder /docs and click to save button.
4. To check, click the URL that given Github Pages section.

I did same things but in a kind of funny way when i click URL i saw blank page and i opened developer tools and i noticed request address of css and js was wrong.

It was like https://.github.io/[project-name]/scripts.7d5...00b7.js It was wrong because of project name in URL. It should be repo name not a project name(My repo and project name isn't same)

So, i changed build code like that ng build --prod --output-path docs --base-href /<repo_name>/and did above steps again.

And finally It works.