Create a .yml file inside of the .github/workflows/
give any semantic name, like publish-app.yml:
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Check out code
uses: actions/checkout@v3
with:
fetch-depth: 2
- uses: pnpm/action-setup@v2.0.1
with:
version: 6.32.2
- name: Setup Node.js environment
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
branch: gh-pages
folder: apps/web/build
Steps:
Every push on branch main, will run the job on ubuntu virtual machine, install the pnpm as node package manager, and setup the node.js with the version 16.
Then will install the dependencies of the project, do the build.
Finally, will do the deploy on github pages using the scripts from JamesIves/github-pages-deploy-action, and create a branch gh-pages with the code from apps/web/build.
So, you need to go to the GitHub repository settings page:
https://github.com/<username|org>/<repository>/settings/pages
And do this settings:
Source: Deploy from a branch
Branch: gh-pages
Done, your site is live at https://username|org.github.io/your-repository
🚀
Top comments (2)
Thanks in advance bro, great article!!
If this uses the builded package I imagine this does deploy a static version only?
If that's the case, I can't see why using Vite (and esbuild instead of CRA's webpack) instead of CRA wouldn't work, would you give it a shot and let us know ?
Specially because CRA is being deprecated (even vercel took it off Next's docs recently).
Thank you Rômulo ;)
You're right!
I just created a project using: github.com/vercel/turbo/tree/main/...
my focus was in the library that I was creating, and I just created a demo page to show how the lib works. It's not public yet. But this is the main reason.
Nowdays, I prefer Next.js, vite, tsup or rollup for bundling. ;)
Good point ;)