Host your Angular Application using Github Pages

Hi everyone! First of all, hope you are doing good even amidst this pandemic.

If you are looking for a free or dirt-cheap hosting where you want to host your personal projects let it be for your portfolio or really any purpose without having to worry about tedious process of buying domain, configuring hosting and all that. You are at right place.

The procedure in the post is framework agnostic it should work for any web framework, but in this post we will be using Angular, because we gotta use something 😅.

We will be discussing one of the most common ways of achieving that,

  • Github pages (free)
  • AWS S3 static website hosting (dirt-cheap)

Steps using Github pages

  • Go ahead and create one account if you haven’t already.
  • Create a repository for your application.
Create a repository for your project
  • Then you will be presented with this options,
Follow above steps to use existing project for this repository.
  • Since I already have this application on my computer, I’ll simply push existing project to this repository.
How I used my existing project for this repository.
  • Now your Github repository should should look something like this.
Your repository after initial commit and push.
  • Open your angular.json file and change outputPath to “docs”. (Specific to angular)
    • This is necessary as Githup pages only allows you to either host for /root or /docs of your repository.
    • So we will use docs folder to generate production build.
change outPath from angular.json file
  • Now build your application locally with following command and push the changes to Github.
    • This is necessary in as your application is hosted on a URL formatted like below 👇.
    • This baseHref will configure base URLand will align with deployed URL.
    • you can find more details on this here.
npm run build -- --prod --baseHref="https://<username><respository-name>/"
  • Your repository will now have that folder which contains our application’s production ready deploy-able build.
  • Now go to settings page of this repo and scroll down to Githup pages, and make following changes and hit save.
  • Give it some time to configure itself and you should be able to see your application on generated link in above image.
  • Hurray! 🥳🥳🥳🥳, you have successfully deployed your first Web Application on Github and is now available to entire world 🚀🚀.

I’ll be uploading another post on how you can do the same using AWS S3 soon.

Meanwhile you can find more content on Angular here.

Till then, Keep learning and Take care folks 😎🤘.

Spread the knowledge
Indrajeet Nikam
Indrajeet Nikam

I am tech enthusiast with love for web development ❤

Articles: 15