🥇How to Create a Static Website on Cloudflare Workers Sites

Hello! My name is Dima, I'm the tech lead of the SysOps team at Wrike. In this article, I will explain how to create a user-friendly website and automate its deployment in just 10 minutes and for $5 a month. The article is mostly unrelated to the challenges we tackle in our team. Instead, it reflects my personal experiences and impressions of getting acquainted with this new technology. I've tried to detail the steps as much as possible to make the guide useful for people with varying experience. I hope you enjoy it. Let's get started!

So, you may have already found a simple and inexpensive way to host your website. Perhaps even free, as described in this wonderful article.

But what if you still find it tedious and want to dive into the wonderful new world of technology? For instance, you might be considering automating deployment and would like to speed up your site as much as possible? In this article, we will use Hugo, but it's not mandatory.

For automation, we use Gitlab CI/CD, but what about speeding things up? Let's deploy the site directly on Cloudflare using Worker Sites.

What You Need to Get Started:

Gitlab (your own or cloud-based)
Account on Cloudflare
Installed nodejs/npm

Part 1: Installing Hugo

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

Download Hugo from https://github.com/gohugoio/hugo/releases
Place the Hugo executable in one of the directories specified in PATH paths
Create a new site: hugo new site blog.example.com
Change the current directory to the one just created: cd blog.example.com
Choose a theme (https://github.com/budparr/gohugo-theme-ananke/releases or anything)
Create your first post: hugo new posts/my-amazing-post.md
Add content to the created file: content/posts/my-amazing-post.md.
Once everything is done, change the draft value to false
Generate static files: hugo -D

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

Part 2: Setting Up Cloudflare

Now let's figure out the initial setup of Cloudflare. Let's assume we already have a domain for the site. For example, let's take blog.example.com.

Step 1: Create a DNS Record

First, select our domain, and then choose the menu item DNS. Create an A record for blog and set a dummy IP address for it (this is the official recommendation, but they could have made it look a bit nicer).

Step 2: Cloudflare Token

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

Here you will need to limit the token to specific accounts and zones, but leave Edit permission for those shown in the image.

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

Step 3: Get accountid and zoneid

Domain → Overview → [right sidebar]

These are mine, please don't use them 🙂

Keep them alongside the token, as we will also need them in the third part.

Step 4: Activate Workers

Domain → Workers → Manage Workers

Choose a unique name and plan for Workers → Unlimited ($5 per month at the moment). You can switch to the free version later if you want.

Part 3: First Deploy (Manual Deployment)

I did the first deployment manually to figure out what’s really going on there. Although it can be done more easily:

Install wrangler: npm i @cloudflare/wrangler -g
Navigate to the directory of our blog: cd blog.example.com
Run wrangler: wrangler init — site hugo-worker
Create a config for wrangler (enter the token when prompted): wrangler config

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

Specify accountid and zoneid
Change route to something like *blog.example.com/*
Specify false for workersdev
Change the bucket to . /public (or wherever your static site is located)
If you have more than one domain in the path, you should correct the path in the worker script: workers-site/index.js (see the function handleEvent)

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

Part 4: Automating Deployment

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

Step 1: Create and set up our project

Create a new GitLab project and upload the site: the directory blog.example.com with all content should be placed in the root directory of the project
Set the variable CFAPITOKEN here: Settings → CI/CD → Variables

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

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

We manually trigger the first deployment (CI / CD → Pipelines → Run Pipeline) or by pushing a commit to the master branch. Voilà!

Conclusion

Well, I may have slightly downplayed it, and the whole process took a bit more than ten minutes. But now you have a fast website with automatic deployment and some fresh ideas on what else you can do with Workers.

Cloudflare Workers Hugo GitLab CI

Source: habr.com