How To Host Your Angular Projects On Github

Mehul Kothari
Sep 17 · 6 min read

In this article,we will follow a step-by-step approach to deploy an Angular Basic Hello-World application to GitHub. We will create a project using Angular CLI and then deploy that to GitHub. Let us get started.

Prerequisites

Let’s get started with the prerequisites. You will need to have:

  • The knowledge of TypeScript, HTML, and CSS.
  • Node and NPM installed on your system.
  • Angular CLI 8 installed on your system.
  • Github Desktop application( https://desktop.github.com/)

Step 1: Creating a New Project

To create a project using Angular CLI, run the command:

ng new Hello-World

Step 2: Running Development server

Let’s run the development server by using the below command.

ng serve

Now open your browser and navigate to localhost:4200 to see your angular app.

Step-3: Add gh Pages to Host your project on Github

To add your project on github you need to add gh pages to your project

Step 3: Create Repository With Your Project Name

First of all download Github Desktop. Here I am showing a demo of my existing project.

  • Open Github Desktop, On the top left corner click->New Repository
  • Give Name to your repository as your project name (Hello-World).
  • After doing this, Go to->This PC->Documents->Github->Your repository Name

After doing so your folder structure should also look like this

Step 4 : Click on Publish Your Repository

Once you are done with above steps again go to Github Desktop app and click on publish your repository to Github

Step: 5 Check your Hosting options on the Github website

Open Github On top Right Corner ->Your repositories->Hello-World

Click on Settings navigate to bottom, There you will see 3 or 4 options

  • Github Master
  • Github master/docs
  • gh pages
  • None

Note that master branch/docs will be disabled initially and gh-pages is not available right now

We will look at each of this step by step

Step 6: Upload files to Your Repository

  • Next move to your project folder copy all the files and paste it inside your
  • Documents->Github->Project(Hello-World) folder
  • After doing this go to your Github Desktop, You will see various changes. You need to type your commit message in the bottom left corner and click on commit.
  • After doing this you need to click on push origin on your screen
  • After doing this if you will visit your Github repository on the website you will see your code is uploaded to your repository.

Step 7: Build Your Project and select an appropriate method to host your site

  • Before building your project add gh pages to your project to let your project work on GitHub
  • Type the following command to install the npm package globally.
npm i -g angular-cli-ghpages
  • To build your project command is
ng build
ng build --prod

But to build our project we won't use the above command.

Step 8: Select your choice on Github setting page to Host you app

We will see each of them one by one

  1. Master Branch

Now make note of one thing that we will make one folder on our master branch because we already uploaded code of our project on the master branch. So to differentiate our deployment code and project code we will make a folder on our master branch and name it deployment

So go to Documents->github->project folder ->Create new Folder->deployement

Now run the code for deployment

ng build --prod --output-path docs --base-href /Hello-World/deployment/

So above code will generate a build file in

  • output-path docs: Specify that generate my build file in the docs folder
  • base-href : Specify the base URL to execute your code
  • So here /Hello-World/deployment specifies that go to Hello-World and inside hello-world find folder name deployment and start your execution from here
  • Above code will generate a list of files in your deployment folder
  • Copy those files from your deployment folder in your Documents->github->project folder ->deployement folder
  • Go to Github desktop and commit and then push

After doing this much make a copy of index.html and rename it 404.html

Copy it in your

Documents->github->project folder as well as

Documents->github->project folder ->deployement folder

After this run command from CLI

$ ngh

As we have mentioned master branch so it will search under the master branch for first time execution and then after it will return a base URL which is

Hello-World/deployement/ so after that it will search under this folder.

Now go to the link https://username.github.io/projectname/

or you can find URL under settings tab just above your choices.

2. Master branch/docs folder

So go to Documents->github->project folder ->new folder->docs

after publishing it to your repositories your this option will be enabled

Now run the code for deployment

ng build --prod --output-path docs --base-href /Hello-World/ 

So follow the same procedure as above mentioned in step instead of pasting code in deployment paste your code in docs and change your choice from master to master branch/docs folder and then launch your site

3. gh-pages branch

To do this we need to create a new branch named gh-pages

  • Open Github desktop click on current branch->new brach and give name gh-pages
  • Switch to gh-pages branch and publish it.
  • Go to your github website open your repository and switch to gh-pages from master pages
  • Select your choice as gh-pages in setting under Github Pages tab

Now follow all Steps of method 1. i.e master branch

Output

So this was all about github and angular.Quickly deploy Angular CLI project to GitHub Pages

Deploying angular project to GitHub pages is simple and easy.

I hope you will enjoy and feel free to contact in case of any queries.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade