Cloudflare Static Website

The Cloudflare Static Website template scaffolds a Pulumi project that serves your site’s files as static assets from a Cloudflare Worker, exposed on its own workers.dev subdomain. Pulumi uploads the contents of the site folder as a versioned set of Worker assets and rolls that version out to all of the Worker’s traffic with a Workers deployment. The template ships with placeholder web content so the project deploys end to end out of the box.

Before you begin#

Make sure you’ve installed Pulumi and configured your Cloudflare credentials.

Create a new project#

Create a new project using the template in the language of your choice:

TypeScript

TSPYGOC#YAMLHCL

$ mkdir my-site && cd my-site
$ pulumi new static-website-cloudflare-typescript

pulumi new walks you through creating and configuring a new project and stack. A stack is an instance of a project and you can have many of them — dev, staging, prod — each with its own configuration settings. The template also includes some additional settings:

TypeScript

TSPYGOC#YAMLHCL

Key	Description	Default
accountId	The Cloudflare account ID to deploy into	—
path	The path to the folder containing the website	./www

You can change these settings later with pulumi config set:

$ pulumi config set accountId <value>
$ pulumi config set path <value>

The account ID has no default, so paste in your own Cloudflare account ID. Press Enter to keep the default path.

TypeScript

TSPYGOC#YAMLHCL

When setup completes, you’ll see a few key files:

• Pulumi.yaml names the project and the language it’s written in.
• Pulumi.dev.yaml holds the dev stack’s settings, including the values you just entered.
• index.ts is the program: the code that declares your cloud resources.

Deploy the project#

Deploy with pulumi up. It starts with a preview of what it’s about to create and asks before it changes anything. Choose yes to deploy.

$ pulumi up

Pulumi usually adds a random suffix to resource names, so the same program can deploy to more than one stack without names colliding. This is autonaming. This template sets the Worker’s name to my-site instead, and Cloudflare puts that name in the site’s address: my-site.<your-subdomain>.workers.dev. To deploy a second stack to the same account, change the Worker’s name in index.ts first.

When it finishes, Pulumi prints the stack’s outputs, values it only knows once the resources exist:

url

The fully-qualified HTTPS URL of the deployed website on its workers.dev subdomain.

Read one any time with pulumi stack output <name>, or pass it to another command. This opens the site in your browser:

$ open $(pulumi stack output url)

To check it from the terminal, fetch the page with curl. It prints the template’s placeholder page, which says Hello, world!:

$ curl -s $(pulumi stack output url)

Customize the project#

Projects created with the Static Website template expose the following configuration settings:

TypeScript

TSPYGOC#YAMLHCL

path

The path to the folder containing the files of the website. Defaults to ./www, which is the relative path of the folder included with the template.

This setting is optional and may be adjusted either by editing the stack configuration file directly (by default, Pulumi.dev.yaml) or by changing its value with pulumi config set.

Using your own web content#

If you already have a static website you’d like to deploy on Cloudflare with Pulumi, you can do so either by replacing the placeholder content in the www folder or by configuring the stack to point to another folder on your computer with the path setting:

$ pulumi config set path ../my-existing-website/build
$ pulumi up

Serving a different folder#

To try it, make a folder with one page in it, point path at it and deploy. curl then prints the new page in place of Hello, world!:

$ mkdir my-content
$ echo '<h1>Hello from my own content</h1>' > my-content/index.html
$ pulumi config set path ./my-content
$ pulumi up
$ curl -s $(pulumi stack output url)

To see what else you can add, browse the Cloudflare provider in the Pulumi Registry.

Cleaning up#

You can cleanly destroy the stack and all of its infrastructure with pulumi destroy:

$ pulumi destroy

Learn more#

• Browse other architecture templates in the Templates gallery.
• Explore the Cloudflare provider API docs in the Pulumi Registry.
• Walk through Pulumi from the ground up in Pulumi Tutorials.
• Read the latest Cloudflare posts on the Pulumi blog.