Introduction
This is my very first article on dev.to and i would truly appreciate your valuable suggestions and feedback.
In this article i am going to share with you my learning while i was deploying my portfolio website to GitHub pages and also i will give you some of the other articles to go through if you foresee any difficulties with my way of deploying the app.
Heads up
Before you start deploying your app, make sure to have your GitHub repo as public in order to opt for free hosting service. GitHub does charge if you do want to host your app that is private.
Getting started
Assuming that you have already built a beautiful app and waiting for it to kick off and deploy. If that is not the case and you need to know how to get started with building angular app please go ahead and refer the angular documentation.
To get started with, here is an another article which explains you about one of the ways of deploying your App to GitHub pages. If this works for you i am happy for you and you do not have to come back here. 😉
But if you still want to know the other alternatives or if the above method did not work out for you , please continue reading further. Personally i found the below method pretty cool and easy to manage later stages.
Now here is the thing, once you have all your app ready, install this package called angular-cli-ghpages by using below command in your Angular CLI.
npm install -g angular-cli-ghpages
once you have installed this package globally, the very next step is to build your project with production flag and set the correct base href address.
ng build --prod --base-href "https://username.github.io/"
if you are confused with the base-href address that's okay. you can always change that to whatever works out for you later on.
If you are working on Angular6+ then make sure to set your outputpath from dist/[PROJECTNAME] to dist/.This is because Angular 6 changed angular.json's "outputPath": "dist/" into "outputPath": "dist/[PROJECTNAME]", which placed everything in the dist folder in a sub folder. if this is not changes then it might break ngh's functionality.
Hosting
Now just run the below command to start deploying your app to github pages.
ngh
and your app will be hosted at https://username.github.io/.
You can optionally add a message to the commit when deploying:
ngh --message="First deploy"
You can also specify which branch to deploy:
ngh --branch=master
And finally, you can always do a dry run before actually deploying to see the output:
ngh --dry-run
That’s wrap 🙂. I hope you have understood how easy it is to deploy your app/project over GitHub.
If you find this useful please help others by spreading the word.😊
Top comments (0)