Publishing SPA on Github Pages via Github Actions
Github Actions is a tool to automate build, test, deploy of software.
Github Pages is a place to serve static web sites.
To make them work together with website within JS ecosys, there is a great tool called gh-pages
in npm.
Set it up f.e. like this npm i --save-dev gh-pages
.
Then you gonna need workflow for Github Actions. F.e try this:
name: publish-to-github-pages
run-name: Publishing My app to Github Pages
on:
push:
branches: [main] # Change if you have different base branch, this is the branch on which pipeline would be triggered
jobs:
build-and-publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci # for those who use yarn, you can instead `yarn install --frozen-lockfile`
shell: bash
- run: npm run build # So put here how your site is built
shell: bash
# Make sure in following to CHANGE `dist` folder to whatever folder your SPA is built
- run: touch dist/.nojekyll # this to make Github not treat this as Jekyll
- run: echo 'mysitename.io' > ./dist/CNAME # CHANGE the domain here to your own, or remove this line if you're fine with <name>.github.io
# following I took from gh-pages docs:
- name: Deploy to Github Pages
run: |
git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
npm run deploy -- -u "github-actions-bot <[email protected]>"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Put it in .github/workflows/publish.yaml
.github/workflows
- is just folder for workflows so Github Actions knew what to do
publish.yaml
- I've come up with this name, put there whatever you like
Now you can see npm run deploy
is called, you gonna have to add this to package.json in "scripts" f.e. like this:
"deploy": "gh-pages -d dist"
Note here dist
folder is used, same as in workflow above, you might need to change this to actual folder
where your built SPA would be placed by npm run build
or analogue. F.e. for CRA, it would be build
.
Once you have those ready, commit this and push to main branch and wait till Actions run and check out results. The build should appear in gh-pages branch.
If you want custom domain and left CNAME in the file above, you are gonna need to
add CNAME entry on DNS wherever your domain name is bought from.
You would need to add CNAME entry with text <name>.github.io
, where
<name>
is either your username for Github or organisation name.
Once everything is configured, you can go to Settings and turn on this in Pages.