Migrating to Cloudflare Pages

In this post, I'll share the technical details of migrating my blog to Cloudflare Pages using Next.js.

Why Cloudflare Pages?

Cloudflare Pages offers an incredible developer experience with:

Global Edge Network: Blazing fast content delivery.
Seamless Integration: Direct connection to GitHub/GitLab.
Infinite Scalability: No need to worry about traffic spikes.

The Architecture

The blog is built using a modern stack:

Next.js (App Router): For a powerful and flexible frontend.
Static Site Generation (SSG): Using output: 'export' to generate raw HTML/CSS/JS.
Markdown-based Content: Easy to write and version control.
Custom Metadata Scripts: Automatic generation of sitemap.xml, feed.xml, and search indices.

Next.js Configuration

We use the following configuration in next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
  trailingSlash: true,
}
export default nextConfig

Automating the Boring Parts

To keep the blog maintainable, I wrote Node.js scripts to handle:

RSS Feeds: For subscribers.
Sitemaps: For SEO.
Search Index: For a lightweight client-side search.

These run in the prebuild phase of the deployment.

Conclusion

Migrating to Cloudflare Pages was a game-changer for my blog's speed and reliability. If you're looking for a cost-effective and high-performance hosting solution, I highly recommend it!

Migrating to Cloudflare Pages: A Technical Journey