How to Deploy (for Free) an Angular App to GitHub Pages Without Using Any Libraries (Step-by-Step Guide)

Andreas Hadjithoma
Nov 22, 2020 · 3 min read

In this article I am explaining how you can deploy an angular application for free to GitHub pages without the need of any 3rd party libraries that some developers suggest. I am showing you all the process, step-by-step with screenshots and an example of my own GitHub page.

Prerequisites:
- Git
- A GitHub account
- Angular CLI

Step 1: Create Repository

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub. Repository must be public.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

Step 2: Create an configure your Angular application locally

If you don’t have the angular cli installed already, head over to the angular setup guide and then come back here.

First, clone the newly created repository to a local folder and navigate to the repository root folder:

$ git clone https://github.com/username/username.github.io.git
$ cd username.github.io

Create a new angular project in the root directory of the repo:

$ ng new myApp --directory ./ 

Change the buildOutput path to “docs” as it is in the screenshot bellow:

Build the angular application in production mode:

$ ng build --prod

Note the “docs” folder created in the root folder of the angular application.

Step 3: Push the code to GitHub and configure the repository

The code is now ready to be pushed to the repository. You can push the the docs folder only, or you can push the whole application (including the docs folder).

$ git add . 
$ git commit -m "Init app"
$ git push

Now that the code is pushed on GitHub, you have to configure the repository to use the “docs” folder to build the page.

Navigate to the settings for your repository or enter the url https://github.com/username/username.github.io/settings

Scroll down to the GitHub pages section and change the build source to docs.

Wait a few seconds until your site is built and published. You should see the message “Your site is published at https://username.github.io” in the green box as it is in the above screenshot. If you don’t, try refreshing the site.

You can also view the deployments at https://github.com/username/username.github.io/deployments or at the right side of the repository, press github-pages under environments.

Step 4: View your page

Congrats! Your angular application is now deployed and available at your github page.

You can make changes locally, test them using ng serve and then build for production using ng build --prod and push your updated code to github. The page will automatically re-build.

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Andreas Hadjithoma

Written by

https://www.linkedin.com/in/andreashadjithoma

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Andreas Hadjithoma

Written by

https://www.linkedin.com/in/andreashadjithoma

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store