How to make a static website with Cloudflare Workers Sites

Hello! My name is Dima and I am the technical lead of the SysOps team at Wrike. In this article I will tell you how to make a website as close to the user as possible and automate its deployment in 10 minutes and $ 5 per month. The article has almost nothing to do with the problems that we solve within our team. Rather, it is my personal experience and impressions of acquaintance with a new technology for me. I tried to describe the steps in as much detail as possible so that the instructions would be useful for people with different experiences. I hope you will like it. Go!

So, you may have already found an easy and cheap way to host your website. Maybe even free, as described in this great article

But what if you are still bored and want to touch the brave new world of technology? Let’s say you’re thinking about automating your deployment and would like to speed up your site as much as possible? In this article, we will use Hugo, but this is optional.

We use Gitlab CI / CD for automation, but what about acceleration? Let’s deploy the site directly to Cloudflare using Worker Sites

What is required to start:

Part 1: Installing Hugo

If you already have Hugo installed, or if you prefer another static site generator (or don’t use them at all), then you can skip this part.

  1. Downloading Hugo from https://github.com/gohugoio/hugo/releases

  2. Place the Hugo executable file one of the defined in PATH ways

  3. We create a new website: hugo new site blog.example.com

  4. Change the current directory to the one we just created: cd blog.example.com

  5. Choose a theme (https://github.com/budparr/gohugo-theme-ananke/releases or whatever)

  6. Create the first post: hugo new posts/my-amazing-post.md

  7. Add content to the created file: content / posts / my-amazing-post.md
    When everything is done, change the draft value to false

  8. We generate static files: hugo -D

Now our static site is inside the directory ./public and ready for the first manual deployment.

Part 2: Configuring Cloudflare

Now let’s take a look at the initial Cloudflare setup. Let’s assume that we already have a domain for the site. Take as an example blog.example.com.

Step 1: Create a DNS Record

First we select our domain, and then the menu item DNS… We create an A-record blog and specify some fictitious IP for it (this is the official recommendation, but they could have made it somehow prettier).

Step 2: Cloudflare Token

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

Here you will need to restrict the token to accounts and zones, but leave the Edit option for the permissions listed in the picture.

Save the token for future reference, we will need it in the third part.

Step 3: Get accountid and zoneid

Domain -> Overview -> [правая боковая панель]

These are mine, don't use them please :-)
These are mine, don’t use them please 🙂

Save them next to the token, we will also need them in the third part.

Step 4: Activating Workers

Domain-> Workers -> Manage workers

Choose a unique name and tariff Workers -> Unlimited ($ 5 per month for today). You can upgrade to the free version later if you wish.

Part 3: First Deploy (Manual Deployment)

I did the first manual deployment to figure out what was really going on there. Although all this can be done easier:

  1. Install wrangler: npm i @cloudflare/wrangler -g

  2. Go to the directory of our blog: cd blog.example.com

  3. Launch wrangler: wrangler init — site hugo-worker

  4. Create config for wrangler (enter token when asked): wrangler config

Now let’s try to make changes to the newly created file wrangler.toml (here full list of possible settings):

  1. We indicate accountid and zoneid

  2. Change route to something like *blog.example.com/*

  3. We indicate false for workersdev

  4. Change bucket to ./public (or where your static site is located)

  5. If you have more than one domain in the path, then you should correct the path in the working script: workers-site / index.js (see function handleEvent)

Great, it’s time to deploy the site using the command wrangler publish

Part 4: Automate Deployment

This tutorial is written for Gitlab, but it conveys the essence and simplicity of automated deployment in general.

Step 1: create and set up our project

  1. Create a new GitLab project and load the site: directory blog.example.com with all content must be in the root directory of the project

  2. We set variable CFAPITOKEN here: Settings -> CI / CD -> Variables

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

Create a file .gitlab-ci.yml at 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 #

We start the first deployment manually (CI / CD -> Pipelines -> Run Pipeline) or by pushing commit to the master branch. Voila!

Conclusion

Well, maybe I downplayed it a bit and the whole process took a little over ten minutes. Instead, you now have a fast, auto-deploy site and some fresh ideas for what else you can do with Workers.

Cloudflare workers Hugo GitLab Ci

Similar Posts

Leave a Reply