Angular app in Github pages

How to deploy and angular app to GitHub pages and get it running under your own domain: username.github.io. Also you can use the GitHub API to get access to your repositories data as I did on my personal portfolio:

Live demo

Source code

Prerequisites:

Git

GitHub account

Angular CLI

1. Create Repository

Create a new public repository using your GitHub username and this form:

username.github.io

2. Create Angular app

First, clone the newly created repository to a local folder:
$ git clone https://github.com/username/username.github.io.git

Navigate to the repository root folder:
$ cd username.github.io

Create a new angular project in the root directory of the repo:
$ ng new myApp --directory ./

Open angular.json file and change the buildOutput path to “docs”:

angular.json

…
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "docs",
…

Build the angular application in production mode:
$ ng build --prod

3. Push to GitHub and configure

You can push the /docs folder only, or you can push the whole application /myApp (recommended):
$ git add .
$ git commit -m "Init app"
$ git push

Now navigate to your repository settings https://github.com/username/username.github.io/settings

scroll down to the GitHub pages section to change the build source to /docs. Few seconds later your site will be built and published and you should see the message “Your site is published at…”. If don’t, try refreshing the site.

Then you can view the deployments at the right side of the repository, under environments, pressing github-pages or at https://github.com/username/username.github.io/deployments

Changes

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.