How To Host Your WordPress Blog In A Sub-Folder, Hosted Separately

One of my Concierge clients had an interesting situation we had to figure out.

His main site is hosted somewhere else because it is a proprietary job board. However, he wants his blog to be on WordPress. The job board cannot host WordPress, so we had to host the blog elsewhere.

Typically, when you use different hosts, you would use a sub-domain to do that. Your root domain can point to one host while you can have any number of sub-domains you like pointing anywhere you please. It is very simple.

But, it was determined it would be best not to use a sub-domain and instead use a sub-folder structure. It is better for SEO this way since the SEO benefits of those blog posts would lend strength to the primary domain.

This same setup would work in other kinds of situations. You could have your main site running on ClickFunnels, Kajabi, Shopify or any other third-party proprietary system and still have your blog run on WordPress.

Here’s The Setup

So, let’s say your main site is running on domain.com.

You want your blog to run on WordPress and be available at domain.com/blog/.

This way it will all look like the same site, even though it is technically on two different platforms and two different hosting providers.

Using a sub-domain like blog.domain.com would be much easier. Just point the domain at the DNS level using an A record or a CNAME. But, that doesn’t work for a sub-directory. We need a different approach. An approach that will “fake it”. 🙂

Here’s How It Was Done

First off, for this approach, you must be using Cloudflare as your domain’s DNS provider. Cloudflare is what I use and use for most of my clients. They happen to be the best at this and that power and flexibility is what we’re using for our solution here.

Specifically, we will be using Cloudflare Workers.

A Cloudflare worker is basically a script which can be run right at the domain level to do various things. You can use workers to rewrite URLs, run search/replace operations or any a wide array of things.

In our case, we’re going to use a Cloudflare worker script to take all URL calls to domain.com/blog/ and re-write them over to blog.domain.com.

• Go to the “Workers” section of your Cloudflare account and create a new Worker. Give it a name like “blog-proxy”, but you can use whatever you like.
• Once you’re able to create your script, go to “Edit Code” and use the following code. Be sure to change the pathname and the sub-domain address to suit your website.

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

async function handleRequest(request) {
  const url = new URL(request.url)
  if (url.pathname.startsWith('/blog/')) {
    // Rewrite the URL to fetch from blog.proactuary.com
    url.hostname = 'blog.domain.com'
    url.protocol = 'https'
    const newRequest = new Request(url.toString(), request)
    
    // Fetch the content from the new URL
    const response = await fetch(newRequest)
    
    // Create a new response and copy the headers and status
    const modifiedResponse = new Response(response.body, response)
    modifiedResponse.headers.set('X-Worker-Status', 'proxied')

    return modifiedResponse
  }
  // If not matching, return original request
  return fetch(request)
}

• Save and deploy your worker script.
• Now, go back to your main domain and go to the “Workers Routes” section. Click on “Add Route”.
• The route will be “domain.com/blog/*. Be sure to change that to match your domain and the desired sub-folder name. Also note the asterisk on the end that will serve as a wildcard to match anything after that. For the Worker, select your “blog-proxy” worker created above.
• Save your worker route.
• In your DNS, ensure the Cloudflare proxy is enabled for the non-www and www version of your domain. The worker will not be triggered unless the Cloudflare proxy is enabled.

Once that is all set, it shouldn’t take long at all for the changes to take effect. Cloudflare changes are usually pretty quick.

Here’s What’s Happening

The worker script is intercepting any requests that start with “/blog/”.

It then rewrites the request to fetch blog.domain.com.

It fetches that content and delivers it to the browser while keeping the original URL in the browser. This makes is to that it doesn’t look like a redirect, but actually in place.

If you wanted an actual redirect, you could use this as your worker script:

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

async function handleRequest(request) {
  const url = new URL(request.url)
  if (url.pathname.startsWith('/blog/')) {
    url.hostname = 'blog.domain.com'
    return Response.redirect(url.toString(), 301)
  }
  // If not matching, return original request
  return fetch(request)
}

One last thing….

WordPress is going to use the site URL in it’s settings for all of it’s internal links. So, if you are using your sub-domain as the main domain for your blog, then all internal links will use your sub-domain and “break” the look of it being in a sub-folder.

To get around that, you’re going to want to change the site URL in WordPress settings so that it uses your root domain sub-folder structure.

In other words, change the site URL to domain.com/blog/ in your site settings.

After that, your WordPress site should operate nicely. It will look like it is within a sub-folder of your main site, even if the main site is hosted somewhere else and isn’t even running WordPress.

Need Help With This?

If you need any help setting this up, just get in touch. Please have at least one Anytime Credit on your account and I can take care of this for you.

Again, bear in mind that we’ll need to use Cloudflare for this approach to work. But, no worries. It is free and it is easy to move your domain’s DNS over to Cloudflare.