https://github.com/kathleenwest/sample-angular-app
Quick step-by-step tutorial on how to create the sample default angular app deploy to GitHub Pages. The result of following these guided steps will be that your sample angular site is visible on GitHub like the screen capture shown in the README.
https://github.com/kathleenwest/sample-angular-app
angular deploy-to-github-page deployment github github-pages sample sample-app screen-capture screenshot step-by-step step-by-step-guide tutorial
Last synced: 2 months ago
JSON representation
Quick step-by-step tutorial on how to create the sample default angular app deploy to GitHub Pages. The result of following these guided steps will be that your sample angular site is visible on GitHub like the screen capture shown in the README.
- Host: GitHub
- URL: https://github.com/kathleenwest/sample-angular-app
- Owner: kathleenwest
- Created: 2023-09-09T20:10:33.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-10T01:32:25.000Z (about 2 years ago)
- Last Synced: 2025-04-19T21:30:39.608Z (6 months ago)
- Topics: angular, deploy-to-github-page, deployment, github, github-pages, sample, sample-app, screen-capture, screenshot, step-by-step, step-by-step-guide, tutorial
- Language: HTML
- Homepage: https://kathleenwest.github.io/sample-angular-app/
- Size: 329 KB
- Stars: 4
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sample-angular-app
Quick step-by-step tutorial on how to create the sample default angular app deploy to GitHub Pages.The result of following these guided steps will be that your sample angular site is visible on GitHub like the screen capture shown below (Example: https://kathleenwest.github.io/sample-angular-app/):

## Step 1 - Create Angular App
Open a terminal window, create a new angular app, then navigate to the app root directory.
`ng new sample-angular-app`
## Step 2 - Add Base Href To App
Open the file _src/index.html_ and add the _sample-angular-app_ for base href
``
## Step 3 - Create Local Git Repo for Folder
Via console or GitHub Desktop
## Step 4 - Publish to GitHub
Publish as public repo (if you have the free plan)
## Step 5 - Create and check out a git branch named gh-pages
`git checkout -b gh-pages`
## Step 6 - Build your Project
Build your project using the GitHub project name, with the Angular CLI command ng build and the following options, where your_project_name is the name of the project that you gave the GitHub repository.
Be sure to include the slashes on either side of your project name as in /your_project_name/.
`ng build --output-path docs --base-href /sample-angular-app/`
## Step 7 - Build 404 File
When the build is complete, make a copy of docs/index.html and name it docs/404.html
## Step 8 - Commit your changes and push
Push the working branch _gh-pages_
## Step 9 - Configure GitHub Pages
On the GitHub project page, go to Settings and select the Pages option from the left sidebar to configure the site to deploy from your branch (gh-pages) and the _/docs_ folder as seen in the screen capture below.

Your deployment may take some time, but you will soon see the url/link as seen in the screen capture above.
Your site is live at https://kathleenwest.github.io/sample-angular-app/