How to put a Ghost blog at a subdirectory using Cloudflare Workers

Before we get started

• You need to own a domain and be using Cloudflare to manage its DNS

• You need to be able to buy a $5/month droplet on DigitalOcean

Step 1: create a DigitalOcean 1-Click Ghost Droplet

Step 2: point a subdomain at your droplet's IP

Step 3: drink some tea

• Have a little break to give DNS time to propagate, hence the tea. I recommend chamomile.

• On returning from your delicious tea session, check DNS with a service like this before going onto the next step to make sure that your subdomain is pointed at your droplet IP.

Step 4: set up Ghost

Ghost Hosting | DigitalOcean Marketplace 1-Click App

Ghost is a fully open source, adaptable platform for building and running a modern online publication. It powers blogs, magazines and journalists from Zappos to Sky News.

https://marketplace.digitalocean.com/apps/ghost

Step 5: put your blog at /blog

sudo -i -u ghost-mgr

// This will let you configure Ghost

cd /var/www/ghost

// This will move you into the Ghost installation folder to make changes

ghost config url https://yoursubdirectory.yoursite.com/blog

// This will change the URL of your Ghost blog. You can obviously change /blog to whatever you want

ghost restart

// IMPORTANT! This will restart your Ghost instance so that the URL change comes into effect.123456789101112131415

Step 6: set up a Cloudflare worker

• Go to Cloudflare -> Workers

• 'Add Route' -> yoursite.com/blog*

• 'Manage Workers'

• 'Create a Worker'

// Config for our subdomain (where the Ghost blog currently lives)
// and our root domain (where we want it to live)
// and our blogPath (the subdirectory we want it at)
// Change these to suit your case!
const config = {
  subdomain: "yoursubdirectory.yourdomain.com",
  root: "yourdomain.com",
  blogPath: "blog",
}

// Function that processes requests to the URL the worker is at
asyncfunctionhandleRequest(request) {
  // Grab the request URL's pathname, we'll use it later
const url =new URL(request.url)
const targetPath = url.pathname

  // Change request URLs to go through to the subdomain
let response =await fetch(`https://${config.subdomain}${targetPath}`)

  // Ghost loads assets like JS and CSS from 3 subdirectories
  // We don't need to change these requests at all
  // So if we're getting stuff from those subdirectories,
  // we return the response of the fetch request from above
  // immediately.
if (
  	targetPath.includes('/${config.blogPath}/favicon.png') ||
    targetPath.includes('/${config.blogPath}/sitemap.xsl') ||
    targetPath.includes(`/${config.blogPath}/assets/`) ||
    targetPath.includes(`/${config.blogPath}/public/`) ||
    targetPath.includes(`/${config.blogPath}/content/`)
  ) {
return response
  }

  // In other cases - which will usually be pages of the
  // Ghost blog - we want to find any reference to our subdomain
  // and replace it with our root domain.
  // This is so that things like our canonical URLs and links are
  // set up correctly, so we NEVER see our subdirectory in the code.

  // First we get the body of the response from above
let body =await response.text()
  // Then we search in the body to replace the subdomain everywhere
  // with the root domain.
  body = body.split(config.subdomain).join(config.root)

  response =new Response(body, response)
return response
}

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request))
})
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

Step 7: test it out (and fix SSL if necessary)

• Go to the SSL/TLS menu in your Cloudflare and change mode to Full instead of Flexible

• Note that this could have implications for other apps or sites you are hosting at Cloudflare

• See if it's now working

Step 8 (optional): Redirect www to the root

• It's cleaner to only have one of the two of the root and www live

• Your blog lives at the root, not at the www, so anyone trying to go to www.yoursite.com/blog will currently fail

• Go to Page Rules for yoursite.com

• For the URL, enter www.yoursite.com/*

• Select 'URL forwarding' and 'Permanent - 301 Redirect'

• For the URL to forward to, enter https://yoursite.com/$1

• (The $1 is to tell Cloudflare to add on whatever the end of the URL was when the user tried to hit the www page.)

Step 9 (optional): Restrict access to the subdomain blog

• First, we'll create an IP list for Cloudflare IP addresses

• Go to Configurations at your main Cloudflare menu:

• Select Lists, 'Create new list':

• Paste everything from this list into your new list and hit Save

• Go to your domain from the main Cloudflare menu, then Firewall -> Firewall Rules -> Create a Firewall Rule

• Set your rule up like this:

• My Ghost subdomain is cloak.ist – you'll want to replace this in the URI Full filter.

• You'll want to change the list filter to use your list of Cloudflare IPs.

• Finally, you'll want to use filters like the last 3 to add your own IP addresses. (I have 3 here because I move between different locations a lot.)

• ⚠️ You'll need to do this to ensure you have access to editing the Ghost blog!

That's it!

• A working blog at yoursite.com/blog...

• ...which has correct links to itself, and correct canonical URLs at your root domain (yoursite.com)

• A subdomain where you can go to manage your blog, which is only accessible to you and Cloudflare.

• (Note: you will always have to manage your Ghost blog at yoursubdirectory.yoursite.com/blog/ghost! Trying to manage your content from yoursite.com/blog/ghost will not work.)