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 excellent article .

? , ? Hugo, .

Gitlab CI/CD, ? Cloudflare Worker Sites.

:

• Gitlab ( )

• Cloudflare

• nodejs/npm

1: Hugo

Hugo ( ), .

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

2.   Hugo PATH

3. : hugo new site blog.example.com

4. : cd blog.example.com

5.   (https://github.com/budparr/gohugo-theme-ananke/releases )

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

7. : content/posts/my-amazing-post.md.
   
   , draft false

8. : hugo -D

./public .

2: Cloudflare

Cloudflare. , . blog.example.com.

1: DNS

, DNS. A- blog - IP ( , - ).

2: Cloudflare

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

,   Edit .

, .

3: accountid zoneid

Domain → Overview → [ ]

, .

4: Workers

Domain → Workers → Manage Workers

Workers → Unlimited ($5 ). .

3: ( )

, , . :

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

2.   : cd blog.example.com

3. wrangler: wrangler init — site hugo-worker

4. wrangler ( , ): wrangler config

wrangler.toml ( ):

1. accountid zoneid

2. route - *blog.example.com/*

3. false workersdev

4. bucket ./public ( )

5. , : workers-site/index.js (. handleEvent)

, wrangler publish.

4:

Gitlab, .

1:

1. GitLab : blog.example.com

2. CFAPITOKEN : Settings → CI/CD → Variables

2:  .gitlab-ci.yml

.gitlab-ci.yml :

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 #

(CI / CD → Pipelines → Run Pipeline) commit master. !

, , , . , Workers.

 Cloudflare Workers    Hugo    GitLab Ci