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.
Subscribe to our newsletter
Join our newsletter for regular updates. No spam ever.