Deploying to Cloudflare Pages

This guide summarizes the settings for deploying this site to Cloudflare Pages, as well as the errors encountered and their solutions.

Project Settings

When creating a new project in Cloudflare Pages, use the following settings:

• Framework Preset: Astro
• Build Command: npm run build
• Build Output Directory: dist

Troubleshooting

1. Platform Error during npm install (EBADPLATFORM)

When developing on macOS and attempting to deploy to Cloudflare Pages (Linux environment), the following error occurred:

npm error code EBADPLATFORM
npm error notsup Unsupported platform for @rollup/rollup-darwin-arm64@4.55.1: wanted {"os":"darwin","cpu":"arm64"} (current: {"os":"linux","cpu":"x64"})

Cause: A macOS-specific package (@rollup/rollup-darwin-arm64), added as a dependency during local development, was explicitly listed in devDependencies in package.json. This caused an integrity error during installation on the Linux environment of Cloudflare Pages.

Solution: Remove the OS-specific package from devDependencies in package.json.

package.json

"devDependencies": {
  "@rollup/rollup-darwin-arm64": "^4.55.1"
}

2. Image Service Error (MissingSharp)

There was an issue where sharp, the standard image optimization library for Astro, did not work in the Cloudflare Pages runtime environment.

Solution: This was resolved by configuring the image service to passthroughImageService (no optimization) in astro.config.mjs.

astro.config.mjs

import { defineConfig, passthroughImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: passthroughImageService(),
  },
  // ...
});

With this configuration, image optimization is skipped during the build, but deployment proceeds without errors.