docs: edit gh-pages instructions in deployment guide (#40139)

PR Close #40139
This commit is contained in:
Kapunahele Wong 2020-12-15 17:04:38 -05:00 committed by atscott
parent 85af573f81
commit 957332e59f
1 changed files with 29 additions and 8 deletions

View File

@ -106,18 +106,36 @@ This is the simplest production-ready deployment of your application.
{@a deploy-to-github}
### Deploy to GitHub pages
### Deploy to GitHub Pages
Another simple way to deploy your Angular app is to use [GitHub Pages](https://help.github.com/articles/what-is-github-pages/).
To deploy your Angular application to [GitHub Pages](https://help.github.com/articles/what-is-github-pages/), complete the following steps:
1. You need to [create a GitHub account](https://github.com/join) if you don't have one, and then [create a repository](https://help.github.com/articles/create-a-repo/) for your project.
Make a note of the user name and project name in GitHub.
1. [Create a GitHub repository](https://help.github.com/articles/create-a-repo/) for your project.
1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here:
1. Configure `git` in your local project by adding a remote that specifies the GitHub repo you created in previous step.
GitHub provides these commands when you create the repo so that you can copy and paste them at your command prompt.
The commands should be similar to the following, though GitHub fills in your project-specific settings for you:
```sh
git remote add origin https://github.com/your-username/your-project-name.git
git branch -M main
git push -u origin main
```
When you paste these commands from GitHub, they run automatically.
1. Create and check out a `git` branch named `gh-pages`.
```sh
git checkout -b gh-pages
```
1. Build your project using the Github project name, with the Angular CLI command [`ng build`](cli/build) and the following options, where `your_project_name` is the name of the project that you gave the GitHub repository in step 1.
Be sure to include the slashes on either side of your project name as in `/your_project_name/`.
<code-example language="none" class="code-shell">
ng build --prod --output-path docs --base-href /&lt;project_name&gt;/
ng build --prod --output-path docs --base-href /your_project_name/
</code-example>
@ -125,9 +143,12 @@ Make a note of the user name and project name in GitHub.
1. Commit your changes and push.
1. On the GitHub project page, configure it to [publish from the docs folder](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch).
1. On the GitHub project page, go to Settings and scroll down to the GitHub Pages section to configure the site to [publish from the docs folder](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch).
You can see your deployed page at `https://<user_name>.github.io/<project_name>/`.
1. Click Save.
1. Click on the GitHub Pages link at the top of the GitHub Pages section to see your deployed application.
The format of the link is `https://<user_name>.github.io/<project_name>/`.
<div class="alert is-helpful">