Your static site on Cloudflare Workers Site

TL;DR: Push to the master and your site at the point closest to the reader. It costs $5/month and 10 minutes to set up.

Okay, maybe you’ve already found your easy and cheap way to host your site. Perhaps even for a free, as in this beautiful article.

But you are still bored and want to touch the Wonderful World of New Technologies and think about automating the deployment and maximize your website speed. In this article, we will use Hugo but it is not necessary at all.

For automation we use Gitlab CI/CD, but what to do with acceleration? Let’s deploy our site directly to the Cloudflare edge with the help of Worker Sites!

Prerequisites:

• Gitlab (your own or hosted)
• Cloudflare account
• Installed nodejs/npm

Part 1: Hugo bootstrap

You can skip this part if you already have Hugo installed or if you prefer to use another Static Site Generator (or even not to use SSG at all)

1. Get from https://github.com/gohugoio/hugo/releases
2. Place extracted hugo binary to your PATH
3. Create a new site: hugo new site blog.example.com
4. Change the current directory to the newly created: cd blog.example.com
5. Add some theme (https://github.com/budparr/gohugo-theme-ananke/releases or something)
6. Add the first post: hugo new posts/my-amazing-post.md
7. Add some content to the newly created file: content/posts/my-amazing-post.md. When ready change draft to false
8. Generate static files: hugo -D

At this point, you have your static site inside ./public directory and ready to deploy it for the first time (by hand)

Part 2: Prepare Cloudflare

Here we will do the initial setup in our Cloudflare account. Assume that you already have a domain that we will use for our site. Below we will consider that this is blog.example.com

Step 1: Create a DNS record

Choose your zone and then DNS. Create a blog record and point it to some dummy IP (official recommendation but they could make it somehow prettier)

Step 2: Cloudflare token

1. My Profile -> API tokens tab-> Create Token -> Create Custom Token

Here you should restrict token to accounts and zones, but you need Edit action allowed for listed Permissions.

Store token in a safe place, we will use it in Part 3.

Step 3: Get account_id and zone_id

Domain -> Overview -> [right-hand panel]

It is mine, don’t use it, please :-)

Store them near the token, we will use it in Part 3.

Step 4: Activate Workers

Domain-> Workers -> Manage Workers

Set a unique name and choose Workers plan -> Unlimited ($5/month at the moment). You can downgrade to Free later if you want.

Part 3: First deploy (manual deploy)

Maybe this is something that can be improved, but I did the first deployment manually to figure out what was happening there.

1. Install wrangler: npm i @cloudflare/wrangler -g
2. Change current dir to your blog dir: cd blog.example.com
3. Init wrangler project: wrangler init — site hugo-worker
4. Create a config for wrangler (give token when asked): wrangler config

Let’s make some changes to the newly created wrangler.toml file:

1. Place account_id and zone_id
2. Change route to something like *blog.example.com/*
3. Set workers_dev to false
4. Change bucket to ./public (or where your static site located)
5. If you use not the only domain in the route you should fix route in worker script here: workers-site/index.js (see async function handleEvent)

Ok, time to deploy with wrangler publish command

Part 4: Automate deploy

This recipe is for Gitlab, but it’s good enough to convey the essence and simplicity of the automated deployment.

Step 1: Create and configure your project

1. Create a new GitLab project and push your site folder content: blog.example.com directory with the whole content should be in the project root
2. Define CF_API_TOKEN variable here: Settings -> CI/CD -> Variables

Step 2: Create the .gitlab-ci.yml file and run the first deploy

Create the .gitlab-ci.yml file in the root with the following content:

stages:
  - build
  - deploy

build:
  image: monachus/hugo
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - cd blog.example.com/
    - hugo
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #


deploy:
  image: timbru31/ruby-node:2.3
  stage: deploy
  script:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #

Run first deploy by hand ( CI/CD -> Pipelines -> Run Pipeline ) or by committing changes to the master branch. Voila!

Conclusion

Well, maybe I downplayed a little and it took a little longer than 10 minutes. But now you have a quick site with automated deployment and you can think about what else you can do with Cloudflare Workers.