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 k ey 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_compat if you're using manual configuration).
Also, make sure to add the NODE_VERSION environment variable with a value of 18 or 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_compat to 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.

☁️Guide: Deploying Misabiduria on Cloudflare Pages

Cloudflare Nextjs DevOps AI

Here I detail the k ey 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_compat if you're using manual configuration).
Also, make sure to add the NODE_VERSION environment variable with a value of 18 or 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

Always use node_compat to 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.

Here I detail the k ey 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_compat if you're using manual configuration).
Also, make sure to add the NODE_VERSION environment variable with a value of 18 or 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

Always use node_compat to 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.