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.
Downloading Hugo from https://github.com/gohugoio/hugo/releases
Place the Hugo executable file one of the defined in PATH ways
We create a new website:
hugo new site blog.example.com
Change the current directory to the one we just created:
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 everything is done, change the draft value to false
We generate static files:
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
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 -> [правая боковая панель]
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:
npm i @cloudflare/wrangler -g
Go to the directory of our blog:
wrangler init — site hugo-worker
Create config for wrangler (enter token when asked):
Now let’s try to make changes to the newly created file wrangler.toml (here full list of possible settings):
We indicate accountid and zoneid
Change route to something like *blog.example.com/*
We indicate 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
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
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 .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!
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.