Github is great for storing and sharing projects. And if you may not know, Github can also host your websites — for FREE with some limitations. That’s why you shouldn’t use it to run online business or e-commerce site.

GitHub Pages source repositories have a recommended limit of 1GB .

Published GitHub Pages sites may be no larger than 1 GB.

GitHub Pages sites have a soft bandwidth limit of 100GB per month.

GitHub Pages sites have a soft limit of 10 builds per hour.

It’s a platform to build static website with HTML, CSS & JavaScript, so I will create my personal website (Angular, Firebase, Github pages) starting from this simple post.

Create a New Repository

After that, you can push a simple index.html to your master branch.



cd username.github.io

echo "Hello World!!!" > index.html git clone https://github.com/username/username.github.io cd username.github.ioecho "Hello World!!!" > index.html // Push your file to github

git add --all

git commit -m "Initial commit"

git push -u origin master

Check Your Project Setting

Form now, you can access your website. Is it fascinating!!!

After this moment, it’s totally depends on your imagination and skills — modify index.html file and push it back to master → DONE.

Building Github Pages with Angular Project

Now, we will take advantage of Angular to build our website on Github pages. angular-cli-ghpages is needed for deploying to Github.

npm install -g angular-cli-ghpages

The website is on master, so we need to create a dev branch for the development process.

git checkout -b dev

Create a new Angular project, make sure that the project is in the root folder of your git.

ng new username-github-io

Remember to edit angular.json file, so the build will be under dist folder rather than dist/app.

Prepare for deployment

ng build --prod --base-href 'https://username.github.io/'

Deploy project to master

 ✔  ngh --message="Commit message"

 ✔  ngh —branch=master

 ✔  ngh --dry-run

 ✔  ngh > app@0.0.0 deploy

🚀 Successfully published via angular-cli-ghpages! Have a nice day!

Yay, my angular project is being deployed to Github pages!!!

This is the final step, we need to update the default branch to dev because the master branch will have production files. Dev branch will give you a better understand of the project.

You may take a look at my Github — the real project may not be updated yet :)