Deploy an Angular application to GitHub Pages

GitHub Pages

GitHub Pages allows you to host directly from your GitHub repository. We just need to edit and push the code, and our changes will be live.

To use it you must create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.

For more information on GitHub Pages, I suggest you read the following documentation: GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

? I also cover how you can use static website hosting in Azure Storage to host an Angular application in my other article.

Let's create the public repository now.

Creating the repository

Go to your GitHub repositories and click on the 'New' button.

Next fill in the details as below:

Note: I use a different repository name here, because my username is already in use.

Finish creating the repository by clicking on 'Create repository' button.

Now let's create a new Angular application which we will deploy to GitHub Pages.

Creating the Angular application

First thing to do is clone the repository we just created. We can do that with the following command:

git clone https://github.com/DimitarIliev/iliev.github.io.git        

Navigate to the repository root folder and create a new Angular application with the command:

ng new techApp --directory ./        

Now in the angular.json file change the outputPath to docs.

Next, in the index.html file we need to change the <base href=""> as below:

Finally, let's build the Angular application using the following command:

ng build --configuration production?        

Observe that a new docs folder is created.

Let's push the code to our repository. We can do that by executing the following commands:

git add 
git commit -m "Iliev Talks Tech App"
git push.        

Open the repository and observe that all the files are pushed successfully.

Setting up GitHub pages

From your repository go to the 'Settings' tab.

From the left menu, select 'Pages'.

Notice that in 'Build and Deployment' for the 'Source' we have 'Deploy from a branch'.

For the branch, choose main and for the folder select /docs (we specified this on the output path as well). Save the changes.

In the 'Actions' tab, notice that a GitHub action is automatically triggered.

After the build and deploy is successful we will see the following:

Visi the URL and observe our Angular application.

Let's now change some text and see how the change reflects.

Go to the app.component.html file and do the following change:

Commit and push the change. The GitHub action will trigger again.

After it successfully finishes, open the URL again.

See that the text change is reflected in our application.

Perfect. We have successfully deployed an Angular application to GitHub Pages.

Thanks for sticking to the end of another article from?"Iliev Talks Tech".?#ilievtalkstech

The full, more detailed implementation of this example can be found on my GitHub repository on the following link:

DimitarIliev/iliev.github.io

Next steps:

• Use static website hosting in Azure Storage to host an Angular application
• Configure Azure Front Door for a highly available global web application
• Generate an image thumbnail using Azure Functions