Switched from Vercel to Cloudflare Pages

We have just moved AI Curious from Vercel to Cloudflare Pages. The reason is that Vercel has a limit of 100GB bandwidth per month for the Hobby plan. This blog has reached that limit in the last few days of May. As you can see, the Image Optimization service is also approaching the limit very fast. Although Vercel offers a Pro plan with 20$/month for 1TB of bandwidth, we decided to move this blog to the Cloudflare Pages service for free, with unlimited bandwidth. This will ensure the operation of the AI Curious blog remains free for much more content.

Vercel Usage of AI Curious - May 2023.

Why use Cloudflare?

Cloudflare Pages and Vercel are both cloud-based platforms for deploying and hosting web applications. However, Cloudflare Pages has some advantages over Vercel:

Unlimited bandwidth: Vercel has a limit of 100GB/month for the Hobby plan. The Pro plan (20$/month) offers 1TB/month. Cloudflare Pages is free and offers unlimited bandwidth. In the past, we also used Cloudflare CDN in front of Vercel to reduce bandwidth usage. However, it is not necessary anymore.
Better performance: Cloudflare Pages is built on top of Cloudflare CDN, which is one of the best CDN services in the world. Thus, Cloudflare Pages may have better performance than Vercel.
Conflict-free for page cache: Vercel wrote in their documentation: "turning off the Cloudflare CDN for pages is recommended to avoid any unexpected problems". In some cases, using Cloudflare CDN with Vercel will introduce some conflicts in the page cache, thus resulting in unexpected problems. Cloudflare Pages is a product of Cloudflare, so it must be conflict-free for page caching.

How to migrate from Vercel to Cloudflare Pages?

The migration process is straightforward. We've just followed the following steps:

Set up a new Cloudflare Pages project pointing to the same GitHub repository.
Set the project build option to static export. In Cloudflare Pages' documentation, they recommend adding runtime: 'edge' to pages. However, our site is static, so we don't need that. We need to set the build option to static export.
Convert redirection rules. When deploying on Vercel, we declared the redirection rules in next.config.js. However, Cloudflare requires the rules to be declared in _redirects file. Therefore, we wrote a small script to convert the rules from next.config.js to _redirects file.

const REDIRECTS = [
  {
    source: '/posts/adas-jetson-nano-software',
    destination: '/blog/2020-09-12-adas-jetson-nano-software',
    permanent: true,
  },
  {
    source: '/posts/very-simple-guide-to-emacs',
    destination: '/blog/2016-09-06-very-simple-guide-to-emacs',
    permanent: true,
  },
  ...
]

// Export redirects to _redirects file
const fs = require('fs')
const path = require('path')

const redirects = REDIRECTS.map(({ source, destination, permanent }) => {
  const statusCode = permanent ? 301 : 302
  return `${source} ${destination} ${statusCode}`
})

// Write to /public/_redirects
fs.writeFileSync(path.join(__dirname, 'public', '_redirects'), redirects.join('\n'))

Disable Image Optimization. Leaving Vercel means losing the default Image Optimization service for Next.js. We can configure the project to use Cloudflare Image Resizing service (paid) or other paid/free services such as Imgix, Cloudinary, etc. However, we decided to disable Image Optimization for now. We will find a better solution for this in the future. After some build failures, we deployed our site to the new Cloudflare Pages project successfully.

Cloudflare Pages builds.

The final step is to set up aicurious.io as the custom domain for the project. This step is straightforward. We just need to add a CNAME record to the DNS settings of the domain. The value of the CNAME record is the domain of the Cloudflare Pages project. In our case, it is ai-curious.pages.dev.

The migration is now complete. The site is now running smoothly on Cloudflare Pages. We will continue to use Cloudflare Pages for this blog to serve more and more readers.