Back to blog

1/1/2023

Deploy Next.js Site to Cloudflare Pages With GitHub Actions

This 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-pnpm

Create a workflow file .github/workflows/deploy_site.yaml.

name: Deploy Siteon:  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: 2

The 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 ./site

Specify needed secrets in settings/secrets/actions of your repository.

That's it.

This site was deployed the same way.

Follow me on X/Twitter!

Subscribe to our newsletter

Join our newsletter for regular updates. No spam ever.