Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 CLI - Deployment to github user page shows readme page

I have deployed my angular 2 project to my github user page via angular CLI. I tried out the steps from official angular 2 cli page. However when I try to access the github url it shows the contents of readme file. Both the user page and user-page/baseUrl does the same.

I have used routing which works in the local environment. I’m not sure if I should modify the production environment variables or baseUrl.

Link to the repository: https://github.com/nirmalks/nirmalks.github.io

like image 632
Nirmal Avatar asked Jan 15 '17 07:01

Nirmal


People also ask

Why is GitHub pages showing my ReadMe?

To summer up, if your repository does not have an Index. html it will show the ReadMe file. Thus in order to correct it all you need to do is add an index. html or index.md file to your folder and use that as main.

How do I deploy an angular project on GitHub?

To deploy an Angular application to GitHub Pages you have to first create a GitHub Pages site repository on GitHub. This repository will host your GitHub Pages site. The Angular application folder must be created inside the GitHub Pages site repository for the application to be deployed using GitHub Pages.

How do I deploy to GitHub pages?

On GitHub, navigate to your site's repository. Under your repository name, click Settings. In the "Code and automation" section of the sidebar, click Pages. Under "Build and deployment", under "Source", select Deploy from a branch.

Can we deploy angular App in GitHub pages?

Your angular application is now deployed and available at your github page. You can make changes locally, test them using ng serve and then build for production using ng build --prod and push your updated code to github. The page will automatically re-build.


2 Answers

You should commit dist/ folder generated by ng build in master branch of your repo. As I can see you have your angular source code commited there. Unfortunatey you cannot keep your source code in your master branch.

the complete commit command with ngh will be
ng build --prod --base-href="YOUR_GITHUB_USER_NAME.github.io"
and then
ngh --message="MESSAGE" --branch="master"

I have published the same in my repo you can check my website

Also, the source code repo is this

like image 55
Shivam Singh Avatar answered Sep 23 '22 17:09

Shivam Singh


Step 1:

First install the angular-cli-ghpages globally:

$ npm install -g angular-cli-ghpages

build your project and set the correct base href location:

ng build --prod --base-href="https://user-name.github.io/repo/"

Then:

$ ngh

Step 2: In github.com --> Go to your repp --> Setting --> Choose publish with gh-pages branch ==> Save

Step 3: You need to run ng server in terminal to start your local project.

Step 4: And then come back to https://username.github.io/project/"

like image 26
Thanh Nham Avatar answered Sep 22 '22 17:09

Thanh Nham