Publish Your Angular GitHub Repository As A GitHub Page

Introduction

In this article, we will publish one of our GitHub repositories as a GitHub page. We will be discussing the problems we are more likely to face ( that I have faced) while doing so, with screenshots. If you are ready, let’s just go ahead and create the page. You can always read this article on my blog here.

Background

I am sure that there are many related articles available on the internet but some of them are only explaining the steps to achieve this and not the problems faced. So, I thought I could write about the problems I faced while creating a page for my GitHub repository.

Prerequisites

A User/Organization GitHub account
An Angular repository

Publish GitHub Page

Selecting the repository

In this phase, you can select any Angular repository you have in your profile. I am going to select my repository Azure-AI-Image-Text-Reader.

Creating the GitHub page

Now let’s build our repository. Please make sure to change the base href property of your index.html file. Usually, the value of the base href is “/”, now we are going to change the same with the argument –base-href in our build command.

ng build --prod --base-href "https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/"

I am already using a GitHub page for my user account and I have also enabled the custom domain for the same, that is the reason why I had given the custom URL in the base href. In your case, you should provide the URL as https://<username>.github.io/<repositoryName>/

Please do not remove the slash (/) at the last of the URL and also remember that the repository name is case sensitive.

Case sensitive repository URL

The above command will create a new folder if you are using Angular CLI 6 or the above, the folder name will be the project name specified in the angular.json file.

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"azure-ai-image-text-reader": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
}

With the help of the npm package angular-cli-ghpages, we can easily upload the build contents to our repository.

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

And then use the command below.

npx ngh --dir=dist/Azure-AI-Image-Text-Reader

If you are not sure about the difference between npm and npx, I recommend you to read my article here.

Here the –dir property is used to specify the folder where the build contents are generated. Please note that by default the directory name is dist, so if your Angular CLI version is below 6, you don’t need to specify the folder name.

If you are getting an error as preceding, while you run the ngh command, please make sure that you have installed the package:

PS C:\Users\SibeeshVenu\source\repos\Azure-AI-Image-Text-Reader> npx ngh --dir='dist/azure-ai-image-text-reader' --branch=page npx: installed 87 in 8.588s Path must be a string. Received undefined (node:16984) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

Once the task is done, we can go to our repository settings and activate the GitHub page for our repository. Click on the settings and go to the section GitHub Pages.

Publish Your Angular GitHub Repository as a GitHub Page

GitHub Pages Settings

Now, you can go to the page URL and check whether your Angular application is loading correctly or not. In my case, I can go to the URL https://sibeeshvenu.github.io/Azure-AI-Image-Text-Reader/ or https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/.

Conclusion

Wow! Now, we have learned how we can publish a GitHub page of our GitHub repository. We have also covered possible small mistakes and the remedies to them.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think is needed in this article? Did you find this post useful? Please do not forget to share with me your feedback.