In this article I am explaining how you can deploy an angular application for free to GitHub pages without the need of any 3rd party libraries that some developers suggest. I am showing you all the process, step-by-step with screenshots and an example of my own GitHub page.
Step 1: Create Repository
If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.
Step 2: Create an configure your Angular application locally
If you don’t have the angular cli installed already, head over to the angular setup guide and then come back here.
First, clone the newly created repository to a local folder and navigate to the repository root folder:
$ git clone https://github.com/username/username.github.io.git
$ cd username.github.io
Create a new angular project in the root directory of the repo:
$ ng new myApp --directory ./
Change the buildOutput path to “docs” as it is in the screenshot bellow:
Build the angular application in production mode:
$ ng build --prod
Note the “docs” folder created in the root folder of the angular application.
Step 3: Push the code to GitHub and configure the repository
The code is now ready to be pushed to the repository. You can push the the docs folder only, or you can push the whole application (including the docs folder).
$ git add .
$ git commit -m "Init app"
$ git push
Now that the code is pushed on GitHub, you have to configure the repository to use the “docs” folder to build the page.
Navigate to the settings for your repository or enter the url https://github.com/username/username.github.io/settings
Scroll down to the GitHub pages section and change the build source to docs.
Wait a few seconds until your site is built and published. You should see the message “Your site is published at https://username.github.io” in the green box as it is in the above screenshot. If you don’t, try refreshing the site.
You can also view the deployments at https://github.com/username/username.github.io/deployments or at the right side of the repository, press github-pages under environments.
Step 4: View your page
Congrats! Your angular application is now deployed and available at your github page.
You can make changes locally, test them using
ng serve and then build for production using
ng build --prod and push your updated code to github. The page will automatically re-build.