How to deploy an #Angular5 webpage on #GitHub?

Using Angular CLI, you can follow the steps below to deploy your Angular web app as a GitHub page.

GitHub page configuration

Publishing from Docs Folder

1) Build your web app with prod flag and set the output path to docs

ng build --prod --output-path docs --base-href https://USER_NAME.github.io/PROJECT_NAME/

2) Make a copy of the index.html as 404.html by running the following command in your root directory.

cp doc/index.html docs/docs/404.html

3) Commit and push to GitHub repo

git add .

git commit -m ‘GitHub page’

git push 

Check out Angular CLI Source for detailed instructions.

Publishing from gh-pages branch

The easiest way to do this is to install angular-cli-ghpages.

1) Install using npm or yarn

npm i -g angular-cli-ghpages

yarn global add angular-cli-ghpages

2) Create a dist folder in your root directory by running the following command

mkdir dist  

3) Build your web app with prod flag using Angular CLI 

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"

3) Run angular-cli-ghpages command to push the build to gh-pages branch

angular-cli-ghpages [OPTIONS]
OR

ngh [OPTIONS]

There are Options flag that you can use to configure your deployment to GitHub Page.

For example, --branch=other-branch flag can set the branch to which the deployment will be.

Angular-cli-ghpages Options

angular-cli-ghpages options

angular-cli-ghpages options

angular-cli-ghpages options

Streamline

Alternatively, you can set up an npm script to streamline the deployment process.

You can add the following line to your package.json. You can also set up using npm hooks.

"github": "ng build --prod --base-href \"https://USERNAME.github.io/REPOSITORY/\" && ngh"

package.json

Then, you can deploy your page by running only one command. You can also set up npm script using deploy and predeploy flags.

npm run github 

GitHub page deployment command 

Note

1) Note that you should use double quotes in your index.html file as mine wasn't working when I had single quotes. It could be a parsing or escape issue.

Thanks for reading!

Jun