How to build a static blog part 12

Wednesday, 12 July 2023

Deploying our Nuxt 3 app to Cloudflare Pages

Head to Cloudflare, and set up an account, or log in.

If you have a domain that you want to use for your blog, you'll need to get that added to Cloudflare, which means logging into your domain registrar and changing the nameservers to Cloudflare's. I can't provide instructions on exactly how to do that because it depends on where you registered your domain.

If you are going to buy a domain to use for this, it would make sense to check the registrar works with Cloudflare, (most do) or even use Cloudflare's domain registry service, which is great. OK I'm starting to sound like an advert, but I'm just so impressed that I can have all of this for free.

From the dash, head to 'workers and pages', and click the 'create application' button, then the 'Pages' tab.

Then you'll need to connect your GitHub or GitLab account with Cloudflare. Once you've done that, select the repo you set up for this blog, and click continue setup.

In this section, ignore the 'framework preset' option, that does not work with Nuxt 3.6, although it is supposed to. Use the following settings instead.

Build command: npx nuxi generate
Build output directory: server/output/public
Root directory: /
Build comments on pull requests: Enabled

Don't ask me how long I spent googling and trial-and-erroring these settings until I had a working deployment. Cloudflare changed something which broke CI/CD deployments for this project. One day it worked, the next it didn't. No changes to the docs of Nuxt or Nitro or Cloudflare Pages. If it breaks again I'll try to update this post.

We'll need to add an environment variable next. Add the following

Variable name     Value
NODE_VERSION      18

That's so our build commands will be run in a recent version of node.

OK click to deploy your site, and cross your fingers that all is successful. Once the deployment has completed, you should see the url that Cloudflare Pages has deployed your site to. Probably something.pages.dev. Click that to see your shiny new blog on the interwebs. 🎉

If you have a domain set up in Cloudflare, you can add it in the custom domains tab, then your new blog will be visible on that domain, complete with an SSL certificate and all the benefits of using Cloudflare's global cdn. Yay! Bet it loads in a fraction of a second?

Next we'll look at a contact form and a Cloudflare function to send the submissions to your personal email.

go back