Deploying a personal website built in Angular to Github Pages
Github Pages allows you to host your own personal or project website for free! Though you cannot run a large business off of it, you can host static websites built with HTML, CSS, and JavaScript. We will take a look at how to deploy an Angular application as your personal website on Github Pages. Here’s my example of hosting on Github Pages — ellamaolson.github.io.
Understanding how to use Github Pages
Github Pages hosts a website directly from a Github repository by using the index.html file as the entry point for hosting your application. If it cannot find this file at the root level, it publishes the readme.md instead.
Personal and organization websites are published from the master branch, while project websites can be published from master or gh-pages branches. See your Project Settings/Github Pages to confirm which Source branch you can publish from.
Building your Angular app for Github Pages
Since an Angular app places the index.html within the src/ folder of you app, Github Pages won’t be able to render your app. We need to reconfigure the layout of the app so that the index.html is at the root folder using angular-cli-ghpages.
npm i -g angular-cli-ghpagesAngular-cli-ghpages will render your Angular application into several JavaScript files and an index.html file at the root folder. Therefore, your master branch will serve as a deployment branch and your develop branch will track the development process and hold your actual app.
git checkout -b developSet your default branch to the develop branch so you can see your application code instead of the rendered JavaScript in master.
Two changes to the Angular app
There are two small changes you want to make to your angular code to ensure your JavaScript build is successful.
First, change the build outputPath in your angular.json file to build just to the dist folder and not dist/app.
Second, make sure all images you reference are saved within assets/images/.
./assets/images/photo.pngTo learn more about developing an Angular application, read how to create an Angular App in no time.
Deploying your app
Each time you want to deploy to your website, you will pull the changes made in develop to master, build your application, and deploy it to master. This way you keep your development branch clean of rendered JavaScript builds and only deploy to master.
git checkout master
git pull origin develop
ng build --prod --base-href 'https://username/repo.github.io/'
ng deploy -—branch=masterThe deployed code on master looks like this:
Now make sure to delete those pesky build files from your local develop branch and do not commit them to github. Even though they are deployed to master, the build files will still be created in the develop branch.
Your develop branch will look something like this — a typical Angular app.
Viola! You have your personal website up and running through Github Pages.
You can view this code at github/ellamaolson/ellamaolson.github.io
I hope this helped you find a faster solution to deploying an Angular app to Github Pages. Please let me know of any other solutions you may have found and comment below!
