DEV Community

Cinthia Barbosa da Silva
Cinthia Barbosa da Silva

Posted on • Edited on

Deploy Angular website to GitHub Pages

GitHub Pages is an excellent platform for deploying your websites and portfolios. I created my personal website using Angular and deployed it to GitHub Pages. During the process, I noticed that there are specific settings for this framework.

In this post, I will show you that in just a few steps, your project will be running!

Let's go!🚀

Create your GitHub Repository
First of all, you need to have an account in GitHub then, click on the “+” icon and select “New repository”

create your github repository

It is important to create a public repository and choose a name for it.

public repository
After creating the repository, commit all your changes and push your project files to the repository you created.

Now, in your project terminal, execute the command below to start the deployment process.

ng add angular-cli-ghpages
Enter fullscreen mode Exit fullscreen mode

Navigate to your project directory and open the angular.json file. Add the "baseHref" with the name of your branch and then save the changes.

add basehref
Now, execute the command "ng deploy" and automatically with the command, the changes will be updated in GitHub and your project will be ready to deploy.

ng deploy
Enter fullscreen mode Exit fullscreen mode

In your repository on GitHub, click on “Settings ” navigate to “Pages”

set in pages
Now, you can see that the "gh-pages" branch is available, and it is responsible for building our project so, select it and click on "Save".

Image description

In a few minutes, your project will be running!

project running

If you found this article helpful, please leave a comment.❤️

Top comments (0)