Building a website on Cloudflare pages

Building a website on Cloudflare

We are going to build a website on Cloudflare pages using sanity.io for the CMS and eleventy as the static site generator.

A little history

Our goal to have a completely serverless, headless CMS that lives in one repo has been a goal of ours for well over a decade. In fact, we build a project called Mojag about 15 years ago to achieve this, we failed but the movement continued. Now we are in a place where we can achieve this goal.

The Model

We structure the project in the following manner.

Github

This is the primary repo every time we commit to the master branch it rebuilds the site

Sanity.io

This is the headless CMS we use to create the content (including this site)


Cloudflare Pages

This is where we host the site.

Strapi.io

This is another CMS / API. It is more powerful than sanity.io and is used for our more complex projects that require things user admin areas etc.

Steps to create a site

Step 1: Clone the template repo and install it.

Open terminal (or whatever the OS you chose to work with calls it) and type the following

Unknown block type "code", please specify a serializer for it in the `serializers.types` prop

Step 2: Set up HTML

In _includes dir there is a file called layout.

njk modify this with you the HTML layout required for the site. The piece of code {{ content | safe }} is where the NJK files will render into.

copy the assets into the assets directory

in the root there is an index.njk add your home page HTML here

run ./build.sh

Open a new terminal tab

cd _site

http-server

*note: We use an NPM package called HTTP-SERVER as it works better than eleventy —serve

This is an MVP deployment as things evolve I would use CDN’s, the image can, bundlers, etc but for this use-case, we can let cloud flare handle all of that as it does it great.

Step 3: CMS

Install Sanity

Open a new terminal tab

cd admin

npm install

sanity init

sanity start

Add a post from http://localhost:3333/

Close it ctrl -c

Configure eleventy

Sanity manage

From the sanity, dashboard get your project id, dataset and create a token

Open api.js in _data directory and remove the comment (*/ */)

Rename _env to .env

Add the sanity details project id, dataset and token

Sanity deploy

Remove post detail from .eleventyingore

Step 4: Cloudflare pages

create a new repo in Github and your new remote to it.

Create a new cloud flare page site

add the GitHub repo you just create

add 4 environment variables to production and staging that you just added to .env

Create a deploy hook

Add the deploy hook URL to sanity

The next time you push to the repo or make a content change will rebuild your site.