Deploying Angular applications to GitHub pages is a great way to host them for free.
Angular is a popular JavaScript framework for building single-page applications.
Angular has a comprehensive command-line interface that supports quick build and set-up of JavaScript applications.
The Angular CLI has several commands to create, build, serve, and generate system components.
Next, create a GH-pages branch.
Then, push GH-pages to GitHub to create a remote GH-pages branch.
Get the Repo Link
On the toolbar under the repo name, clickSettings > Pages.
UnderBuild and deployment, selectDeploy from a branch.
Next, selectgh-pagesas the name of the branch, then clickSave.
This will create a GH-pages link at the top right under the GH-pages label.
Next, copy this link to the published site as illustrated below.
You will use the link to set up the base-ref during deployment.
Install Angular-CLI-GHpages
The angular-cli-ghpages package is a tool that the Angular CLI uses for deployment purposes.
Navigate back to your local project repository.
Then install and run angular-cli-ghpages with this command:
4.
Congratulations, you have deployed your Angular App!
If the link displays only the README file, just go back to GitHub GH-pages controls.
Ensure the selected branch is gh-pages and not the main or master branch.
Then give it five minutes and reload.
Sometimes GitHub takes time to reflect changes.
There’s a lot more you’re free to do with Angular and Angular CLI.
Feel free to explore.
Use the CLI to deploy apps to GH-pages for free visibility and hosting for your applications.
