There comes a point where local development isn't enough, and you need your project to be available in the cloud. I decided to use Cloudflare Pages for this blog due to its ease of integration and its free tier, which is perfect for personal projects.
Here I detail the key steps to ensure the deployment not only works but also supports all the features we've been adding, such as AI.
1. GitHub Integration
The most convenient workflow is connecting Cloudflare directly to your repository. Every time you push to main, the site will update automatically.
In the Cloudflare dashboard, go to Workers & Pages > Create > Pages > Connect to Git. Select your repository and follow the basic steps.
2. Build Configuration
As a Next.js project, standard values usually work, but make sure you have these:
- Build command:
npm run build - Output directory:
.next
3. Node.js Compatibility (Critical Step)
Since this blog uses some Node libraries that don't run natively in Cloudflare's restricted environment (the Edge), we need to enable compatibility.
Without this, you'll likely see deployment errors related to missing modules.
- Go to Settings > Functions.
- Under Compatibility Flags, look for the Node.js compatibility option and enable it (or add
node_compatif you're using manual configuration). - Also, make sure to add the
NODE_VERSIONenvironment variable with a value of18or higher.
Ecosystem Tools
To take this project to the next level, you can integrate other services that work beautifully in this environment:
- Payments: Stripe
- Styles: Tailwind CSS
- Deployment: Vercel (as an alternative)
Key Takeaways
Deploying on Cloudflare is straightforward if you're clear on how to manage compatibility. The most important thing to remember is that the server environment is different from your local machine:
- Always use
node_compatto avoid errors. - Keep your secrets and environment variables correctly configured in the dashboard.
Now that the blog is in the cloud, the next step is to keep refining the content and features.