Host your blog on a subdirectory using Cloudflare Workers
Tags: cloudflare, subdirectoryhosting, cloudflareworkers, hosting
Published: 2024-01-26 00:01:43

At Hyvor Blogs, we have been working on [several different solutions](https://blogs.hyvor.com/docs/self-hosting-web-framework) to allow hosting a blog on a sub-directory. Out of all the solutions, Cloudflare Workers is by far the easiest solution if you are already using Cloudflare for DNS. It will only take about 10-15 minutes to complete the setup. **No coding is required.**

> If this is the first time hearing about Hyvor Blogs, see [our homepage](https://blogs.hyvor.com/) for more details on how we make blogging easy!

How it works
------------

Sub-directory hosting is handled by our [hyvor/hyvor-blogs-cloudflare-workers](https://github.com/hyvor/hyvor-blogs-cloudflare-workers) script, which you can easily deploy to your own Cloudflare account as a Worker. Here's what it does under the hood (you don't have to understand any of this to use it 🙏)

-   It uses [Cloudflare Workers](https://workers.cloudflare.com/) to create a serverless application to serve your blog.

-   It uses [Hyvor Blogs Delivery API](https://blogs.hyvor.com/docs/api-delivery) to fetch serving instructions from Hyvor Blogs.

-   Then, it caches responses in [Cloudflare KV](https://developers.cloudflare.com/workers/learning/how-kv-works/) (key-value storage). All resources in your blog (images, CSS, JS, and even HTML files) are cached in Cloudflare's global network. This means everything in your blog is served to end users from the nearest node in the network. Your blog will be **blazingly fast**!

-   Then, it uses Hyvor Blogs [Webhooks](https://blogs.hyvor.com/docs/webhooks) to clear the cache when you update your blog posts. (Due to this, there can be a delay of a few seconds before you see updates in your blog after updating a post.)

-   Finally, we use [Cloudflare Workers Routes](https://developers.cloudflare.com/workers/configuration/routing/routes/) of your domain to route all `example.com/blog*`requests to the worker.

Let's get started!

Prerequisites
-------------

-   A blog created on [Hyvor Blogs](https://blogs.hyvor.com/).

-   A domain that uses [Cloudflare for DNS](https://www.cloudflare.com/). It must be proxied through Cloudflare (orange cloud turned on).

-   A [GitHub](https://github.com/) account (free)

Step-by-step
------------

1.  Hyvor Blogs

    -   [1.1 Hosting URL](https://hyvor.com/blog#hosting-url)

    -   [1.2 Delivery API Key](https://hyvor.com/blog#delivery-api-key)

    -   [1.3 Webhooks](https://hyvor.com/blog#webhooks)

2.  Cloudflare Workers

    -   [2.1 KV store](https://hyvor.com/blog#create-kv)

    -   [2.2 Deployment](https://hyvor.com/blog#deployment)

    -   [2.3 Variables](https://hyvor.com/blog#variables)

3.  Cloudflare Workers Routes

    -   [3.1 Set up Workers Routes](https://hyvor.com/blog#worker-routes)

4.  Finalizing & Debugging

    -   [4.1 Verify Features](https://hyvor.com/blog#verify)

    -   [4.2 Cloudflare Worker Logs](https://hyvor.com/blog#worker-logs)

    -   [4.3 Clear Cache](https://hyvor.com/blog#clear-cache)

[1\. Hyvor Blogs](https://hyvor.com/blog#hyvor-blogs)
-----------------------------------------------------
First, let's make your blog hostable on a sub-directory.

### [1.1 Hosting URL](https://hyvor.com/blog#hosting-url)

Go to **Hyvor Blogs Console → Settings → Hosting** and set the following options.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebstfwoa2moaaxcr3tlr.png)

![Changing Hosting URL in the Hyvor Blogs Console](https://hyvor.com/blog/media/KakwGqnDmRM8tqnceYZPeyg4kGaiMlQmJzPDsiI9.png)

Hosting URL

Then, save.

### [1.2 Delivery API Key](https://hyvor.com/blog#delivery-api-key)

Go to **Hyvor Blogs Console → Settings → API Keys** and generate a Delivery API key.

![Generate Delivery API key in the Hyvor Blogs Console](https://hyvor.com/blog/media/htAyn5bTtq7bcP3UPGdnCG5zqw6RdYR3TPjC8XAc.png)

Generate Delivery API Key

We'll need the generated API key in a later step, which you can copy from the API Keys section.

![How to copy the Delivery API Key](https://hyvor.com/blog/media/2l5MZa8IzY0TexLrMeFbkcHQRDDeRfonAS6SXZuQ.png)

How to copy the Delivery API Key

### [1.3 Webhooks](https://hyvor.com/blog#webhooks)

Next, go to **Hyvor Blogs Console → Settings → Webhooks **and create a webhook with the following values.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8j3neugtg3g7906g9a6.png)

![Create Webhook](https://hyvor.com/blog/media/IOgmcB7QIs75BdibYufYVEAfk13pFBuOohOvcZws.png)

Create Webhook

We'll need the webhook secret in a next step.

![Copying Webhook Secret from the Hyvor Blogs Console](https://hyvor.com/blog/media/XUP6PNvBewCXfRM5mgLsHxUIT3AjKmCI3yFZBO0C.png)

Copying Webhook Secret

[2\. Cloudflare Workers](https://hyvor.com/blog#cloudflare-workers)
-------------------------------------------------------------------

Let's create our worker.

### [2.1 KV Store](https://hyvor.com/blog#create-kv)

Log into the [Cloudflare Dashboard](https://dash.cloudflare.com/?to=/:account/workers). Then, navigate to **Workers & Pages → KV**.

![Cloudflare KV Settings](https://hyvor.com/blog/media/JCcxLeJL8KnHAmCIKHkRvnz7AlICd8BxepUq1CZB.png)

Cloudflare KV

Then, create a new namespace with a descriptive name.

![Create KV namespace in Cloudflare Workers](https://hyvor.com/blog/media/C0G1qT5dGatnFS5kbcSqiPNuvjGilquAOLHVHoxe.png)

Create KV Namespace

### [2.2 Deployment](https://hyvor.com/blog#deployment)

Click the button below to initiate a new deployment to Cloudflare workers.

[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/hyvor/hyvor-blogs-cloudflare-workers)

Next, we'll follow the steps shown on the deployment page.

First, authorize Github to use Workers. You will need a free GitHub account to do this.

![Authorize Workers](https://hyvor.com/blog/media/2YDCh07pBzIFB26STw6e677ohkECJDRtHSqgreqV.png)

Authorize GitHub with Workers

Next, select "I have an account"

![I have an account on Cloudflare workers deployment](https://hyvor.com/blog/media/uozS1aOf7BwDnuePbSChKitJvAarHOcHYowSoXZa.png)

For the next step, we will need your Cloudflare Account ID and an API token.

![Account ID and API Token requirement](https://hyvor.com/blog/media/FtcfTyzBQ9JrfRg3zyPTezCbvpktvCE6XmygO6Ua.png)

Account ID and API Token

The easiest way to find this is by going to the Overview section of your domain and finding the Account ID on the right. Copy and paste it in the deployment page.

![Copy Account ID in Cloudflare](https://hyvor.com/blog/media/AICd3I6lBuR2NnAoHuaA2bni7WFjv04DoaTdAdS3.png)

Cloudflare Account ID

Then, click the "Get your API token" link below the account ID.

![Create Token](https://hyvor.com/blog/media/NxCd6rEyzrSg5dX3IhoHpdFMkcTSxVrsKovdHMmy.png)

Create API Token

Use the Edit Cloudflare Workers template.

![Create Token - Select Cloudflare Workers](https://hyvor.com/blog/media/EsuWsqmE91yeJISPxn5w611ZZOemOmJFQwvzWOnO.png)

In the configuration, set the Account Resources to 'All accounts' and Zone resources to your domain name.

![Create Token - Select Resources Options](https://hyvor.com/blog/media/JQlj1k0lE0sQVsHpcJcScn4bHtz1LgzuUAYJobmw.png)

Create your API token.

![Create your API token - confirm](https://hyvor.com/blog/media/BVjB0TiXpmvHhq9Qk9yi910DtL59PUmeKHlsV9aE.png)

Copy the API token and paste it on the deployment page.

![Copy API token](https://hyvor.com/blog/media/epwbVtSdR4GyP5NEeSxoD608Hxkj03a7Eyfvp20a.png)

Then, Connect your account.

![Connect your Cloudflare acccount for the deployment](https://hyvor.com/blog/media/yqYarePcjLeQXpMYKFqHg9R6hXNjgMmUoLtuCUf8.png)

Next, fork the github repository.

![Fork the github repository](https://hyvor.com/blog/media/dqpAysm1sW7XPHmYWrXYZPStb7HmCoqFIZifdbte.png)

Go to the Github Actions page.

![Go to github actions page](https://hyvor.com/blog/media/MniEoL3Kg2a8LFt0MUZ1IEfpZ7ilgAoPIu0vbadB.png)

Enable Github Actions.

![Enable github actions](https://hyvor.com/blog/media/KaHYSMY0R83HGxAoUzGQ3O2uchqLFAFjB0HP3iFA.png)

Click **Workflows enabled**.

![Workflows enabled](https://hyvor.com/blog/media/XPNuH2JpcOY7kMupr0qJP3qA5fSyTAKkFuiMnY7P.png)

Finally, DEPLOY!

![Deploy the worker](https://hyvor.com/blog/media/kZkHAbHDLwrmpj1MlrwbDNXywf1q0002FX8XpgmU.png)

It will take a couple of minutes to complete the deployment. You can refresh the page to see the deployment status.

![Worker deployed - pending](https://hyvor.com/blog/media/7XoAWsN3aLMvs78kARDQ39nUB9VzeSGkOOKMiVnU.png)

### [2.3 Variables](https://hyvor.com/blog#variables)

Once the deployment is completed, go to your worker settings page.

![changing worker variables](https://hyvor.com/blog/media/cACrxI1237WCW7pwYQgkOyBxfLxfSEglbXozXPul.png)

Then, **Settings → Variables → Edit Variables**.

![editing variables in the worker](https://hyvor.com/blog/media/jCGgbh2zCAfv5SQHJXFsiLPlf7BbaCJBvaNvOCii.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3potqailc45efel99b82.png)
Click Save and Deploy.

![saving edited variables in the cloudflare worker](https://hyvor.com/blog/media/YsP5Q3efzXZcc4rEY87zVXRvoIJsVZ2SbsGnIozz.png)

Then, scroll down to the **KV Namespace Bindings **section, and add a new binding.

![setting up KV namespace in the cloudflare worker](https://hyvor.com/blog/media/JUrV87f5EaL2sqOdAOYpiqU9jUFe7jBpuCPOJaDU.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1g5jfv6d4iefa9ydjgo.png)
![cloudflare worker KV setup](https://hyvor.com/blog/media/dQreYV6RtR1wOuYVGdiaRRy1dy0sKQzxKWqwZN2E.png)

Now, our Worker is complete.

3\. Cloudflare Workers Routes
-----------------------------

The final step is to route traffic from your domain to the Worker we just created. To do that, we'll use Cloudflare Workers Routes.

### [3.1 Set up Workers Routes](https://hyvor.com/blog#worker-routes)

Go to **Cloudflare Dashboard → Your Domain → Workers Routes**.

![cloudflare worker routes](https://hyvor.com/blog/media/Ed3dLm5tsuRiE04dRSPpRKyrreh8aMnRYIDL5xBa.png)

Add a route with the following values (make sure to replace `example.com` with your domain name. Also, `/blog` if you are using a different base path). Then, click Save.

![add route to your DNS](https://hyvor.com/blog/media/3pM3FM5VtD0s5qgpYV4kmXQC31H8G8GAbRlbpkDh.png)

Now, open your blog URL in your browser. You should see your blog perfectly rendered.

4\. Finalizing & Debugging
--------------------------

### [4.1 Verify Features](https://hyvor.com/blog#verify)

Follow these steps to make sure everything is working.

-   Make sure `/blog` is loading

-   Make sure posts with images are loading

-   Update one of your posts from the Console. You should see the changes on your blog in a couple of seconds.

-   Open `https://{yourdomain.com}/blog/_cache_health`. You should see a "Healthy ✅" message. If not, make sure you have connected the KV store correctly as explain above.

### [4.2 Cloudflare Worker Logs](https://hyvor.com/blog#worker-logs)

If the blog is not loading at all, if you see an error on your blog page, or if updates are not shown on your blog, use Worker Logs to debug.

![logging for debugging](https://hyvor.com/blog/media/eMJrP5X5Tlb5bSkMy44sjPFTWVTMS4nwVeB5iFWA.png)

### [4.3 Clear Cache](https://hyvor.com/blog#clear-cache)

If you have any issues with styles or fonts in your blog, you can try to clear cache of your blog at **Console → Settings → Danger Zone → Clear Cache. **Select **All** as the **Type.**

![clear cache in Hyvor Blogs Console](https://hyvor.com/blog/media/08UeQNTLYr3XdzAlJvw6lPFZIHPWYhvMG4v3jWRk.png)

The End
-------

I hope this guide helped you set up your blog on a sub-directory using Cloudflare workers. If you need any help, feel free to comment below or contact Hyvor Blogs support. If you found anything confusing, please leave a comment below. It will help us make this guide better for future readers.

Resources:

-   Worker script: [hyvor/hyvor-blogs-cloudflare-workers](https://github.com/hyvor/hyvor-blogs-cloudflare-workers)

-   [Cloudflare Workers Homepage](https://workers.cloudflare.com/)

-   [Hyvor Blogs Docs](https://blogs.hyvor.com/docs)