diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index da93cf2faa..6b80dc2467 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -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/`. - ng build --prod --output-path docs --base-href /<project_name>/ + ng build --prod --output-path docs --base-href /your_project_name/ @@ -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://.github.io//`. +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://.github.io//`.