How to have a WP blog show as a subdirectory on Webflow

Publishing help Hosting
1

Hi there,

My current situation is:

domain.com (the main site) is hosted on Webflow. Main reason is because Webflow is design friendly for our designers

We want to create a blog (subfolder) Domain Blog | Domain, Website, and Ecommerce Tips for Small Businesses. However, we want our blog to be hosted on WordPress since it is friendly for our editors who maintain the blog content.

Is it possible and what is the best way to implement this? I have been trying to research about this but the only thread I found was 3 years ago How to add Subfolder - http://www.domain.com/blog with no solution. Just hope things have changed that allow us to have the main site hosted on WF and a subfolder being hosted on WP.

Looking forward to your help

Cheers

2

You would need to use a subdomain, like blog.domain.com. You can redirect /blog to blog.subdomain.com but you won’t be able to serve the wordpress site from a subdirectory since it cannot be hosted on webflow.

3

Thanks for your answer @webdev I was advised that we can interfere with the CDN setup. The logic is

At the domain level (domain.com) (on Webflow), we create 2 subdomains so that the BLOG can be hosted on WP . These 2 subdomains are meant not for Users to see.

(1): webflow.domain.com : served as a mirror site of the domain.com
(2): blog.domain.com: served as a blog that is hosted on WordPress

Then we set some rules for the above 2 subdomains : This is what users see

(1) webflow.domain.com: What users see will be domain.com
(2) blog.domain.com: what users see will be Domain Blog | Domain, Website, and Ecommerce Tips for Small Businesses

Seems like an OKAY solution. However, one problem arises is the mirror site of the main site webflow.domain.com is indexed on Google, which we dont want. We tried to control that by setting up disallow on robots.txt file. However, whatever changes we make on the mirror site would affect directly the main site domain.com

Wondering whether there is some tips to hack around this .

Cheers

4

I think the only way around this would be to reverse proxy the whole site and then configure the the /blog to be a different resource. It may be possible with cloudflare, but you would not be able to use SSL on webflow, that would have to be enabled on CF only. Service workers could come into play. Normally I am in control of the hosting so no limitations.

You would have to probably build out a test to confirm.

5

@clareseos I remembered an article about using cloudflare’s service workers as a way to pull this off, just needed to find it. Here you go.

https://www.codiva.io/blog/post/host-saas-product-blog-in-subdirectory-instead-of-subdomain/

6

We did this over on our site and it’s been working great. While, you do have a mirrored domain, we haven’t had any issues with Google picking it up and indexing it. I wrote a guide on how to make this work using Cloudflare Workers: How to use Webflow to host parts of your site (Cloudflare Workers) | by Liran Cohen | Medium

2 Likes
7

Thanks for sharing this good workup. This will save others a bunch of time that have a similar requirement.

8

Hi, firstly thank you @liranco for the great write up. I’ve setup my domain as recommended. I’m facing some issues with 301 redirects however. I believe these come from Webflow. Here is what I observe:

I have a project with wf.smplrspace.dev as the only added custom domain. It’s not set as default. I am using a proxy (cloudflare worker) running at www.smplrspace.dev, which forwards the request to wf.smplrspace.dev and responds to the user on behalf. However Webflow seems to be responding to the proxied requests with a 301 redirect to wf.smplrspace.dev.

proxy to wf.smplrspace.dev
proxy to wf.smplrspace.dev3016×1978 884 KB

If I change the proxy to forward to smplrspace.webflow.io, it proxies correctly but then the page gets Webflow branding.

proxy to smplrspace.webflow.io
proxy to smplrspace.webflow.io3016×1978 899 KB

If I try to request with any browser, I get a 301, but if I use something like Postman, then it responds with 200 as I would like. :man_shrugging:

Screenshot 2020-06-04 at 4.30.24 PM
Screenshot 2020-06-04 at 4.30.24 PM3018×1978 710 KB

Other things I’ve tried without success:

  • override request before sending to webflow to rewrite the URL
  • override request before sending to webflow to rewrite the host value in headers

Any of you has an idea what might be happening?

Thank you,
Thibaut.

9

Hi Thibaut -

Can you post your code that’s causing this?

Liran

10

Sure, thanks for your time.

The minimal version which gives me a 301 is as follow:

function handleRequest (event) {
  const req = event.request
  const url = new URL(req.url)
  const proxyTo = 'https://wf.smplrspace.dev' + url.pathname
  return fetch(proxyTo, req)
}

Then I tried to modify the request to fake the requested host, but same result:

function handleRequest (event) {
  const req = event.request
  const url = new URL(req.url)
  const proxyTo = 'https://wf.smplrspace.dev' + url.pathname

  // get around 301 redirects from webflow
  const proxiedRequest = new Request(proxyTo, req)
  proxiedRequest.headers.set('host', 'wf.smplrspace.dev')

  return fetch(proxyTo, proxiedRequest)
}
11

Hey!

We have recently published a guide on our blog that explains the process of hosting your WordPress blog on a subdirectory using Cloudflare workers + Webflow - so you might find it helpful.

Check it out here: https://shapo.io/blog/wordpress-blog-on-a-subdirectory-with-cloudflare/