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.❤️

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay