🥇How to make a static site on Cloudflare Workers Sites

Hello! My name is Dima, I'm the tech lead for the SysOps team at Wrike. In this article, I will tell you how to make a site 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. This is, rather, my personal experience and impressions of getting to know a new technology for me. I tried to describe the steps in as much detail as possible so that the instructions are useful for people with different experience. I hope you will enjoy. Go!

So, perhaps you have already found a simple and cheap way to host a website. Maybe even free, as described in this great article.

But suddenly 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 with Worker Sites.

What is required to start:

Gitlab (your own or cloudy)
Account on cloudflare
Installed nodejs/npm

Part 1: Install Hugo

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

Download Hugo from https://github.com/gohugoio/hugo/releases
We place the Hugo executable file according to one of the defined in PATH ways
We create a new site: hugo new site blog.example.com
Change the current directory to the newly created one: cd blog.example.com
Choose a theme (https://github.com/budparr/gohugo-theme-ananke/releases or whatever)
Create the first post: hugo new posts/my-amazing-post.md
Add content to the created file: content/posts/my-amazing-post.md.
When done, change the value of draft to false
Generate static files: hugo -D

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

Part 2: Set up Cloudflare

Now let's deal with the initial setup of Cloudflare. Let's assume that we already have a domain for the site. As an example, let's take blog.example.com.

Step 1: Create a DNS entry

First we select our domain, and then the menu item DNS. Create a blog A-record and specify some fictitious IP for it (this is the official recommendation, but they could do something prettier).

Step 2: Cloudflare Token

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 the future, we will need it in the third part.

Step 3: Get accountid and zoneid

Domain → Overview → [right sidebar]

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 → Management Workers

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

Part 3: First deployment (manual deployment)

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

Install wrangler: npm i @cloudflare/wrangler -g
Go to our blog directory: cd blog.example.com
Launch wrangler: wrangler init — site hugo-worker
Create a 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):

Specify accountid and zoneid
Changing road. to something like *blog.example.com/*
Specify false for workersdev
Change bucket to ./public (or where your static site is located)
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: Deployment Automation

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

Step 1: Create and set up our project

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
We set variable CFAPITOKEN here: Settings → CI / CD → Variables

Step 2: Create a .gitlab-ci.yml file and run the 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 #

Starting the first deployment manually (CI/CD → Pipelines → run pipeline) or by pushing a commit to the master branch. Voila!

Conclusion

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

Cloudflare Workers Hugo GitLab Ci

Source: habr.com

How to make a static site on Cloudflare Workers Sites