Automated Deployment with GitHub Actions and Cloudflare Pages

In this second post of our series, I'll show you how to set up automated deployment using GitHub Actions and Cloudflare Pages. This will enable continuous deployment whenever you push changes to your repository.

Why Automated Deployment?

Automated deployment eliminates manual deployment steps, reduces human error, and ensures your blog is always up-to-date with your latest changes. With GitHub Actions, every push to your main branch will automatically trigger a build and deployment.

Prerequisites

Before setting up automated deployment, you'll need:

1. A GitHub repository with your Next.js project
2. A Cloudflare account
3. Your project already configured with OpenNext (from the previous post)

Step 1: Set Up Cloudflare Pages

Create a Cloudflare Pages Project

1. Log into your Cloudflare dashboard
2. Navigate to Pages in the sidebar
3. Click Create a project
4. Choose Connect to Git
5. Select your GitHub repository
6. Configure the build settings:
   • Framework preset: None
   • Build command: npm run ci:build
   • Build output directory: out
   • Root directory: / (leave empty)

Get Cloudflare Credentials

You'll need two pieces of information from Cloudflare:

1. Account ID: Found in your Cloudflare dashboard sidebar
2. API Token: Create a custom token with Pages deployment permissions

Step 2: Create GitHub Secrets

In your GitHub repository:

1. Go to Settings → Secrets and variables → Actions
2. Add the following secrets:
   • CLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID
   • CLOUDFLARE_API_TOKEN: Your Cloudflare API token

Step 3: Create GitHub Actions Workflow

Create .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build application
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: next-blog
          directory: out
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

Step 4: Configure Build Output

Ensure your next.config.ts is configured for static export:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: {
    unoptimized: true
  }
};

export default nextConfig;

Step 5: Test the Deployment

1. Commit and push your changes to the main branch
2. Go to your GitHub repository's Actions tab
3. You should see the deployment workflow running
4. Check the Cloudflare Pages dashboard for deployment status

Step 6: Configure Custom Domain (Optional)

In your Cloudflare Pages dashboard:

1. Go to your project settings
2. Navigate to Custom domains
3. Add your custom domain
4. Update your DNS settings as instructed

Understanding the Workflow

Trigger Conditions

• Push to main: Deploys production changes
• Pull requests: Tests builds without deploying

Build Process

1. Checkout: Gets the latest code
2. Node.js Setup: Installs Node.js 18
3. Dependencies: Installs npm packages
4. Build: Creates production build
5. Deploy: Uploads to Cloudflare Pages

Environment Variables

• CLOUDFLARE_API_TOKEN: Authenticates with Cloudflare
• CLOUDFLARE_ACCOUNT_ID: Identifies your account
• GITHUB_TOKEN: Provided automatically by GitHub

Monitoring Deployments

GitHub Actions

• View deployment status in the Actions tab
• Check build logs for any errors
• Monitor deployment times

Cloudflare Pages

• View deployment history in the Pages dashboard
• Check for any build errors . Monitor performance metrics

Troubleshooting Common Issues

Build Failures

1. Dependency Issues: Check package-lock.json is committed
2. TypeScript Errors: Fix type errors before pushing
3. Memory Issues: Consider using npm ci instead of npm install

Deployment Failures

1. API Token Issues: Verify token has correct permissions
2. Account ID: Double-check the account ID format
3. Project Name: Ensure project name matches Cloudflare Pages

Performance Issues

1. Build Time: Optimize dependencies and build process
2. Bundle Size: Monitor and optimize your JavaScript bundles
3. Image Optimization: Use Next.js Image component appropriately

Advanced Configuration

Environment-Specific Builds

You can create different workflows for different environments:

name: Deploy to Staging
on:
  push:
    branches: [develop]

jobs:
  deploy-staging:
    runs-on: ubuntu-latest
    steps:
      # Similar steps but deploy to staging environment

Conditional Deployments

Only deploy on specific file changes:

on:
  push:
    branches: [main]
    paths:
      - 'src/**'
      - 'package.json'
      - 'next.config.ts'

Benefits of This Setup

1. Automated: No manual deployment steps required
2. Reliable: Consistent deployment process
3. Fast: Cloudflare's global CDN ensures fast loading
4. Secure: HTTPS enabled by default
5. Scalable: Handles traffic spikes automatically

What's Next?

In the next post, we'll add MDX functionality to enable enhanced content creation with React components in markdown. This will make your blog more interactive and powerful.

Resources

• GitHub Actions Documentation
• Cloudflare Pages Documentation
• OpenNext Documentation

Your Next.js blog now has automated deployment! Every push to your main branch will automatically deploy to Cloudflare Pages. In the next post, we'll enhance the content creation experience with MDX.