We recently shifted our main website to Webflow. Primarily to enable quicker iterations on the website. Its better to spend more time articulating the right value prop on the website than adjusting css and html in a hand-coded site.

Of course, this raised the question of how will the blogs be hosted. Before the shift to Webflow, we were hosting our blog in a self hosted Ghost instance. And we were pretty happy with it. (Don't you like the dark theme on this page?)

The default theme which Ghost came with worked pretty well for us, they had a dark theme and they had good features to show coding blocks, bookmarked articles, etc. But I was a newbie to Webflow. I didn't know how could you make Ghost blog and Webflow work seamlessly.

And, yes, we also wanted the blog to be on a subdirectory. Like https://signoz.io/blog rather than https://blog.signoz.io . Two reasons for this:

  1. This was our structure at that time. Changing it would mean losing all the ranking pages on Google and submitting for re-indexing
  2. Though it is widely debated, in our experience as subdirectory structure performs much better than a subdomain structure in terms of SEO

I did some search and asked in a few groups on how to do this.  Make Ghost work with Webflow. Here are the options I ended up with

  1. Host CMS in Webflow - But that would mean again designing the CMS pages and then learning how blogs can work in CMS. I spent a few hours on this, didn't seem very intuitive
  2. Host blog in subdomain - This was easy. Host ghost in https://blog.signoz.io and redirect blog subdomain to DNS records. But of course, this option wouldn't be optimal from an SEO perspective
  3. Make Webflow & Ghost work via reverse proxy - This was non-trivial and found different instructions at different forums on how to do this. This seemed most optimal, if it works. So I decided to spend some time exploring this.

So, how do you make a reverse proxy server point to Ghost for some traffic & Webflow for some traffic

Let's dive into the details. This is what I wanted to achieve:

  1. https://signoz.io should be hosted in Webflow, with ability to create new pages as I want
  2. Any traffic to https://signoz.io/blog/* should be served by a self hosted ghost blog. I think it is also possible to do this for a cloud hosted Ghost, but I haven't tried it.
  3. I had access to EC2 servers and familiarity to do things on AWS - things like starting servers, configuring proxies and SSL certs, etc.

Steps to follow

  • Design your website on Webflow. Publish your Webflow website on https://www.example.com
  • Make www.example.com as the default site on Webflow. Webflow has this concept of default sit. You need to decide which site you want to make the default one - the one with www or one without www. There are few pros and cons of this. The below article explains this in detail. Though for us, the pros of having a www site were not so relevant, and we went with non-www site - which was what was our default structure before the shift.
www vs non www: Which is Right from SEO Perspective
We are all aware that some domain names start with www and some that don’t. And, most people wonder what the difference between both is because very few know. If you have ever found yourself questioning what’s the difference between www and non-www websites and which one is better, then this post c…
  • Disable SSL in Webflow. Since we will be handling SSL at the proxy server, we don't need to have a SSL layer at Webflow.
If you don't disable SSL at Webflow in this setup, you may get weird errors.
  • Get an EC2 server or login to the EC2 server you already have and ensure that Ghost is running on localhost at port 2368. If you have multiple instances of Ghost running note the ports on which they are running.
  • If you are running Ghost server, you would have an nginx configured by default . Ensure it's running properly and configurations are correct.
  • Got to your DNS provider ( e.g. GoDaddy, Namecheap, etc.) and point @ of domain in DNS records to ip of server which runs nginx. In this setup Ghost and nginx are running on the same server. I think it is possible to have them running on different servers also.
  • Use certbot to get SSL for https://www.example.com
  • Install ghost blog in https://www.example.com/blog
  • Use following config file in nginx sites-available
upstream webflow_example {

    server proxy.webflow.com;
}


server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name  www.example.com;
    root /var/www/ghost/system/nginx-root; # Used for acme.sh SSL verification (https://acme.sh)
    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; # managed by Certbot
    include /etc/nginx/snippets/ssl-params.conf;
    underscores_in_headers on;


location / {
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header Host $http_host;
              proxy_set_header X-NginX-Proxy true;
              proxy_pass http://webflow_example;
              proxy_redirect off;
          }

    location ^~ /blog {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;
        proxy_redirect off;
    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;

}

Once you are done with this, check that all nginx configurations are proper by doing

sudo nginx -t

And finally, don't forget to restart the nginx server

You should have a beautiful site working seamlessly with main pages hosted in Webflow and blogs in a self hosted Ghost. Here's a live example - https://signoz.io

Few things to keep in mind

  1. Disable SSL in Webflow
  2. If you want to have non-www version of your site as the default one, you should have the 2 server IP addresses shown in Webflow in the upstream block in the above nginx file.

If you have any questions or get stuck in the above steps, feel free to reach out pranay at signoz dot io