↓Skip to main content
  1. posts/

How I Built a Free Static Website for Developers Club Using Next.js and Cloudflare

Programming DevOps next.js Cloudflare

Recently, I rebuilt the website for Developers Club—a local non-profit I co-run with a few friends. It’s a community for software developers where we regularly host meetups, workshops, and discussions. One of our goals with this rebuild was to reduce hosting costs to zero, while keeping the setup simple enough for any member of the club to maintain.

If you’re considering doing something similar—building a small, low-maintenance site for a side project, community, or event—this post will walk you through the approach I used and serve as a reference if I ever need to do it again.

Why Go Static? #

The original site was hosted on a paid VPS. While it didn’t cost much, even small recurring costs add up for a non-profit. We didn’t need a CMS like WordPress—just a simple, fast, single-page website that we could update by pushing code to GitHub.

Hosting a static website on Cloudflare Pages made perfect sense:

  • It’s free for static sites.
  • GitHub integration allows automatic rebuilds on push.
  • I’ve had great experiences using Cloudflare for DNS, caching, and SSL in the past.

Step 1: Writing and Designing the Site #

I wrote the copy for the website and asked my friend Dalibor—who’s great with front-end work—to build the UI using Tailwind CSS and clean HTML.

My initial plan was to integrate his HTML/CSS with Hugo, since I’ve used it for other static sites (including this blog). Hugo is blazing fast, and deploying Hugo sites on Cloudflare is straightforward—something I’ve done several times already.

However, Dalibor went the extra mile and, instead of delivering plain HTML, he built the site using Next.js.

A bit unexpected—but not a big problem.

Step 2: Making Next.js Work as a Static Site #

Next.js can work as a static site generator with a few adjustments. Cloudflare Pages supports static Next.js deployments—but you need to configure the project properly.

The code Dalibor provided couldn’t be built with static export due to a module that wasn’t compatible. I first tried modifying the project settings to enable static export, but that didn’t solve the issue. In the end, I decided to rebuild the project from scratch using a clean Next.js static setup and then copied over the source files.

I followed this official guide to get started:
🔗 Deploy a static Next.js site

Basically, all you need to do is set output to ’export’ in next.config.js like this:

module.exports = {
  output: 'export',
};

Step 3: Deploy the Website to Cloudflare #

With the static Next.js project ready, the next step was to deploy it to Cloudflare Pages.

I connected the GitHub repository to Cloudflare and selected “Next.js (Static HTML Export)” as the framework. However, the initial deployment failed due to a version mismatch: Cloudflare uses Node 16 by default, which installs Next.js v14—but our project required Next.js v15, which needs Node 20.

To resolve this, I followed this helpful blog post: How to run a website built with Next.js 15 on Cloudflare Pages

Key Fix #

To ensure that Cloudflare uses the correct Node version for building the project, I added the following to the package.json:

"engines": {
  "node": ">20.0.0"
},

I also created a .nvmrc file with:

20

This combination solved the problem and allowed the deployment to complete successfully.

Step 4: Final Tweaks #

Once everything deployed successfully, I made a few final touches:

  • Added a favicon and site description for better SEO.
  • Slight color adjustments for better contrast.
  • Integrated Umami Analytics for privacy-friendly tracking. It’s simple and lightweight—perfect for a community site.

Summary and Takeaways #

Here’s what I learned and what I’d do again:

  • Cloudflare Pages is a solid choice for free static site hosting.
  • Even though I expected to use Hugo, Next.js works well for this use case with the right setup.
  • Setting the Node version is critical when using the latest Next.js.
  • Having the project in GitHub makes collaboration and maintenance easy—our members can now contribute with simple pull requests.

In the end, we now have a modern, free, and maintainable website for Developers Club. It’s fast, easy to update, and reflects the spirit of our community: practical and developer-friendly.

If you want to explore the full implementation, check out the GitHub repository. It’s open for contributions or suggestions if you’d like to help improve the site.