Create Your Website For FREE with Github Pages — Angular
Tags: angular, github, beginners, webdev
Published: 2019-10-09 13:19:07

---
description: 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.
---

In the previous post, I show you how to do some research in order to have a glimpse of [how to research for your own website](https://dev.to/dalenguyen/want-to-build-a-career-in-tech-start-with-your-website-44i7?id=185197) - such as a portfolio website. Today, you will know to create a sample Angular site and host in on Github Pages.

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 a 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

![Create a New Repository](https://thepracticaldev.s3.amazonaws.com/i/anmm3d2eavyebes8k6gn.png)

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

```
git clone https://github.com/username/username.github.io
cd username.github.io 
echo "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

![Check Your Project Setting](https://thepracticaldev.s3.amazonaws.com/i/fwv7huaxvgk7ufca76v1.png)

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

![It works](https://thepracticaldev.s3.amazonaws.com/i/gfi24xzm286hqvrqros5.png)

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!!!

![Angular github pages](https://thepracticaldev.s3.amazonaws.com/i/yxoujyq1hz8391d00537.png)

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 understanding of the project.

You may take a look at my [Github](https://github.com/dalenguyen/dalenguyen.github.io) — the real project may not be updated yet :)