Back to blog1/1/2023
Deploy Next.js Site to Cloudflare Pages With GitHub ActionsThis is how to deploy a website to Cloudflare Pages using GitHub Actions.
We are using pnpm instead of npm.
npx create-next-app@latest --typescript --use-pnpmCreate a workflow file .github/workflows/deploy_site.yaml.
name: Deploy Site
on:
push:
branches: [develop]
pull_request:
types: [opened, synchronize]
jobs: ...The first job runs the build script and uploads the artifact.
build-site:
name: Build
runs-on: ubuntu-latest
timeout-minutes: 15
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 19
- name: Install pnpm
uses: pnpm/action-setup@v2
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- name: Setup pnpm cache
uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- run: pnpm install
- run: pnpm build
- uses: actions/upload-artifact@v3
if: github.event_name == 'push'
with:
name: site
path: ./site/out
retention-days: 2The second job downloads the artifact and uploads static assets to Cloudflare Pages using wrangler command-line tool.
publish-site:
name: Publish Site
runs-on: ubuntu-latest
timeout-minutes: 5
needs: build-site
if: github.event_name == 'push'
steps:
- uses: actions/download-artifact@v3
with:
name: site
path: ./site
- name: Publish
uses: cloudflare/[email protected]
with:
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
command: pages publish --project-name=site ./siteSpecify needed secrets in settings/secrets/actions of your repository.
That's it.
This site was deployed the same way.