Last week, I had a problem. I wanted to start blogging using . But for SEO reasons, I wanted to put my new blog at , instead of either a completely different domain, or a subdomain like blog.cloak.ist. Ghost cloak.ist/blog That's because I want to build up SEO value for my principal domain, . Google sees subdomains as being a whole other thing. So it's muuuuch better to use if you can. cloak.ist yoursite.com/blog I spent 3 days figuring out how to set up Ghost at cloak.ist/blog. It was pretty painful. So I've decided to celebrate my blog finally existing by writing a guide to how I set it up. I hope it helps you out! 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 Ghost has a hosted option which you can pay for. But I'm going cheap – and also I'm pretty sure, from reading a few things online, that their hosted option won't work with this guide. So head on over to DigitalOcean and . Choose the $5/month droplet. set up a new droplet with their 1-click option Once the droplet is set up, don't go and do anything in it just yet. Just make a note of the droplet's ipv4 address . Step 2: point a subdomain at your droplet's IP You need to set Ghost up at a subdomain at your domain, like . blog.yoursite.com This is so that we can later tell to get all content from that subdomain. But don't worry, we'll also have the option of telling Cloudflare to restrict access to that subdomain to you and Cloudflare, so that you don't have a competing location for your blog living out there. yoursite.com/blog So go to Cloudflare and create a new A record, with Name set to whatever you want the subdomain to be (e.g. Name will be blog if you want to use blog.yoursite.com), and IPv4 address set to the droplet's IP that you have noted. Click the orange cloud to change it from Proxied to DNS Only! This caused me a of pain. VERY IMPORTANT: lot Step 3: drink some tea The next step will be to go back to your droplet and set up Ghost on it. But if your subdomain hasn't propagated yet (in other words, if the internet hasn't yet realised that you added the A record from the previous step), the set up will fail. DNS should propagate pretty fast, but please, please: 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 before going onto the next step to make sure that your subdomain is pointed at your droplet IP. service like this If you left the orange cloud enabled in the previous step, it's very likely that your Ghost set up will fail and you'll see Cloudflare IP addresses when you do the DNS check. (Not doing this step properly meant that I went into a frenzy of destroying and then remaking droplets. I went through around 5 of them before I got it right.) Step 4: set up Ghost Use . this guide to set up Ghost on your droplet When you're asked for the URL of your Ghost droplet, enter: https: //yoursubdomain.yoursite.com All of the rest of the set up should be straightforward – use the standard options throughout. If you get an error, it could be that your DNS didn't propagate yet so Ghost was unable to issue an SSL certificate for your subdomain. I'd recommend going back to Step 1 and starting again if that happens – alternatively, if your error looks different, have a google around to see if you can fix it. Quite a lot of people seem to have had issues with DigitalOcean's '1-click' Ghost installation... At this point, you should also check that your blog is live at https://yoursubdomain.yoursite.com. Keep your SSH session open! Step 5: put your blog at /blog We're going to put your blog at a subdirectory on the subdomain now, we move it to living at your root domain instead of the subdomain. before Run the following commands while you're still in your SSH session: sudo -i -u ghost-mgr cd / /www/ghost ghost config url https: ghost restart // This will let you configure Ghost var // This will move you into the Ghost installation folder to make changes //yoursubdirectory.yoursite.com/blog // This will change the URL of your Ghost blog. You can obviously change /blog to whatever you want // IMPORTANT! This will restart your Ghost instance so that the URL change comes into effect. At this point, check that https://yoursubdirectory.yoursite.com/blog is working. If you see a 404, you probably need to run ghost restart. Also, you could now set yourself up as the admin of the blog by going to https://yoursubdirectory.yoursite.com/blog/ghost. This is not a necessary step though – you can do it later. Step 6: set up a Cloudflare worker We're going to set up a Cloudflare worker at your subdirectory https://yoursite.com/blog which is going to act as a reverse proxy – so it'll basically serve your Ghost blog at that URL. Go to Cloudflare -> Workers'Add Route' -> yoursite.com/blog*'Add Route' -> www.yoursite.com/blog* if you want to make sure you'Manage Workers''Create a Worker' At this stage, you're going to want to replace everything in the code editor with the following script, after : changing the config object to reflect your set up config = { : , : , : ,
} { url = URL(request.url) targetPath = url.pathname response = fetch( ) (
  	targetPath.includes( ) || 
    targetPath.includes( ) ||
    targetPath.includes( ) ||
    targetPath.includes( )
  ) { response
  } body = response.text() body = body.split(config.subdomain).join(config.root)

  response = Response(body, response) response
}

addEventListener( , (event) => {
  event.respondWith(handleRequest(event.request))
}) // 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 subdomain "yoursubdirectory.yourdomain.com" root "yourdomain.com" blogPath "blog" // Function that processes requests to the URL the worker is at async ( ) function handleRequest request // Grab the request URL's pathname, we'll use it later const new const // Change request URLs to go through to the subdomain let await `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 '/blog/favicon.png' `/ /assets/` ${config.blogPath} `/ /public/` ${config.blogPath} `/ /content/` ${config.blogPath} return // 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 await // Then we search in the body to replace the subdomain everywhere // with the root domain. new return "fetch" I've written comments explaining what this code is doing. Paste this code in, give the Worker a slightly clearer name – e.g. yoursite-blog – hit Save and Deploy, and then go back to the main Workers page: Here, you'll want to hit Edit on the Route you created earlier, and set the Worker on it to the one you just made. Step 7: test it out At this point, if all has gone well, you should have a fully working blog at yoursite.com/blog (or whichever subdirectory you chose). If you don't, check through the instructions to see if there's anything you missed. Step 8 (optional): Restrict access to the subdomain blog So to make things cleaner, you might want to do one last thing: use a Cloudflare Firewall rule to make access to yoursubdirectory.yoursite.com impossible for everyone apart from: 1) you (because you're going to need to go there still to use the CMS) 2) Cloudflare Workers. I feel like this may be a good thing to do for SEO, since otherwise you have a blog with exactly the same content and with competing canonical URLs. (I could be wrong here though – please let me know via the live chat if so!) First, we'll create an IP list for Cloudflare IP addressesGo to Configurations at your main Cloudflare menu: Select Lists, 'Create new list': Paste everything from into your new list and hit SaveGo to your domain from the main Cloudflare menu, then Firewall -> Firewall Rules -> Create a Firewall RuleSet your rule up like this: this list - 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! At this point you should have: - 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 Hopefully this will be much better for your SEO than if you'd had to put your Ghost blog at the subdomain! If you have any questions at all, feel free to tweet @cloakist . Also published at: https://cloak.ist/blog/ how-to-put-a-ghost-blog-at-a-subdirectory-using-cloudflare-workers/

Fetch

Google

ORANGE

2021 - HackerNoon Contributor of the Year - ADVERTISING

Follow me on Twitter

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to set up a Ghost blog on a subdirectory via Cloudflare Workers

Too Long; Didn't Read

Companies Mentioned

@louisbarclay

RELATED STORIES