How I built this blog

Introduction

The purpose of this blog post is to explain how I built this blog with Hugo and Wrangler to use Cloudflare for hosting my static website.

Hugo

To install Hugo, follow those steps described here

Choose a theme

Now Hugo is installed and ready, you have to choose a theme for your websites. The theme I decided to use is hello-friend-ng

Wrangler

So now you have your hugo installation ready and your static files freshly generated by Hugo it only missing a hosted plateform for them. I decided to choose Cloudflare Workers to host my static file into a KV and get the logic through a javascript files on Workers.

First of all, we will configure Wrangler, the CLI tool of Cloudflare Workers.

All the steps are explained here

As soon as your wrangler is ready you can then generate the static files with hugo -D and then get the preview wrangler preview --watch

Automation: how to simplify your life

Now you are set up for build your blog and posting all your new article on Cloudflare, let see how to automatised some commands.

You probably don’t want to type each times:

• hugo new posts/<name.md>
• hugo server -D
• hugo
• wrangler preview --watch
• wrangler publish

So for that purpose we will create a npm package file to make it reproductible everywhere.

Let’s follow this guide

  {
    "name": "vence.tech",
    "version": "1.0.0",
    "description": "Vence blog website",
    "main": "index.js",
    "scripts": {
      "build": "hugo && wrangler build",
      "start-hugo": "hugo server -D",
      "new-post": "hugo new",
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "hugo && wrangler preview --watch",
      "publish": "npm run build && wrangler publish"
    },
    "dependencies": {
      "@cloudflare/wrangler": "^1.5.0"
    },
    "author": "Venceslas",
    "license": "MIT"
  }

So now you are able to run all those command with npm run <scripts>

Improvement

Write test with Ava ¹

Add CI/CD pipeline to push the code automatically into workers.