Integrate GitHub-Pages in Angular 6 App

What is GhPages

Do you want to save time to create post or article while writing software code ? Or do you want to see your angular app live running in the internet without deploying it separably on azure or AWS ? Then GhPages or Github Pages is the answer to that.

I have one github project written in angular and I run my app live in github itself by using ghpages In this article, I will walk you through the process of publishing your app into ghpages. ​

What GhPages Can Do

GhPages host README.md file on github server and give you unique URL to view as website. 

When we create Angular project using Angular CLI, it creates project files along with the README.md file. We write description about the code and how to get the code from github, how to install node packages and how to run etc. All of this steps are well documented in README.md file. Sometimes I personally put some more examples about my shared directive or services. Github can host this README.md file in website with various themes and you can see your document live in website.

GhPages can also host your Angular App and give you unique URL to view your live app running on github server

Yes, you can see your angular app live running with the help of ghpages. Once you check-in your dist folder to your github repository then ghpages can host the entire dist folder and you can see your app running.

How do I integrate in my Angular 6 app

In order to integrate in ghpages in your angular app please follow the below steps

https://gist.github.com/roopkt/accf84d4c17703f1a5a09bb863f2c73a

Now you can run your publish script (npm run publish ) whenever you want to deploy your README.md file to github pages.

build:prd will build the project in prod mode so that it will create a dist folder where the bundle files and README.md file will be placed.

deploy:gh will deploy the dist folder into github pages.

Example hosting Angular App on GithubPages

Please visit my e-Store app on GitHub and see how my project is live working on github server. Also don't forget to add some item in your cart on my online website for e-store hosted on ghpages.

https://github.com/roopkt/e-store

Here are the steps, to follow in order to host dist folder on ghpages.

1. Go to github repositoy then
2. Select settings scroll to GitHub Pages section and
3. Select `​gh-pages branch` from the drop down list

Example hosting README.md on GithubPages

please checkout my Webpack Typescript Library Consumption Sample 

In this repository I do not have any web application however I had my README.md file that I wanted to publish as website and you cant believe using ghpages themes it is just looking like a WordPress post. Please check out my online ghpage website for ​​   `README.md`   file.

https://github.com/roopkt/webpack-typesript-library-consumption-sample

Here are the steps you will do in order to setup ghpages so that it will host your readme.md file

1. Go to github repositoy then
2. Select settings scroll to GitHub Pages section and
3. Select `​master branch` from the drop down list
4. Also You can select your favorite them. (optional)

[caption id="attachment_495" align="alignnone" width="1576"] GitHub Pages Settings for hosting README.md file[/caption]