This guide uses Angular cli, git cli, GitHub Pages and a package called angular-cli-ghpages
Prerequisites:
Angular cli (this example uses Angular 13)
Github cli ( this example uses v2.4)
In your workspace spin up a new angular app with:
ng new <app-name>
This will prompt you to create a new project, set up a local git repo and make an initial commit for you.
To create a new repo on GitHub with the command:
gh repo create
Select 'Push an existing local repository to Github` and follow the interactive prompts.
The repo will need to be public unless you have GitHub Pro.
When offered, set up a remote,
This will create a github repo for your project and set up the remotes so you can push to it easily.
Now we add the angular-cli-ghpages package. Note the use of ng add, not npm i.
ng add angular-cli-ghpages
Add a script to package.json to simplify deploy.
- Open package.json.
- In the scripts object add a new line:
"deploy": "ng deploy --base-href=/<your-repo-name>/"
Commit your changes to the main branch
git add .
git commit -m "added angular-cli-ghpages"
git push origin main
Create a new branch called gh-pages (this can be customised, but you will need to select a different branch in the github settings page mentioned below)
git branch gh-pages
git checkout gh-pages
git push origin gh-pages
Set up GitHub Pages in the browser (just need to check this - it should be setup in the correct way by default)
- Find the repo you just created on GitHub.com
- Setting > Pages
- In Source select deploy from branch (automatic)
- Under branch select gh-pages and /root (automatic)
Finally - its time to deploy the base application
git checkout main
npm run deploy
NB: The deploy script will build your application and overwrite the contents of the gh-pages branch with the compiled build. There is rarely any need to have the gh-pages branch checked out locally, so I suggest you delete it.
If all is well - your application should be deployed to http://<gh-username>.github.io/<repo-name>
Top comments (0)