Using Netlify and Ghost for /blog url

I want to use a ghost blog where my original domain example.com is hosted on Netlify and blog should be hosted on example.com/blog

I tried multiple methods,

  1. redirect /blog* https://blog.example.com/:splat 200 in _redirects file.
  • The CSS was not working correctly for the blog
  • The blog links did not work correctly, since the blog is set to https://blog.example.com not https://blog.example.com/blog. All links would work as https://example.com/my-new-blog where as it should be https://example.com/blog/my-new-blog.
  1. redirect /blog* https://MY_BLOG_IP/blog/:splat 200 in _redirects file where MY_BLOG_IP/blog hosts the blog.

Since this was a redirect from example.com/blog, in Nginx I couldn’t figure out a way to avoid example.com/blog redirecting to https://MY_BLOG_IP/blog.

Let me know if there are any solutions to make this work.
Thanks

Hi, @thellimist.

Using hypotheticals (like example.com) is great when the situation is hypothetical. In this case, it appears that there is a deployed site and redirect rules have been created. If we are troubleshooting an actual site, then knowing the real URLs and redirects being tested is helpful.

From what I understand, the redirect is working but the references to assets in the HTML are not. It that the case?

If so, being able to test the actual URL will help us to answer. Would you please send us the URL which doesn’t redirect as required? Would you also send us the redirect rule you created?

You can private message (PM) that information to one of our support staff and I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

I have wrote a hack on how to do it. It’d be great if Netlify allowed reverse proxy functionalities. I don’t necessarily recommend this solution to anyone. It’s a hack to get going without more headaches.

Hi, @thellimist. Thank you for sharing that link to how you resolved the issue. It looks like you are using a worker to transform the URLs in the HTML on the fly as the page is requested. This changes the references to the assets in the HTML to match the pattern used in the URL.

I think you could have also solved this by linking to any assets in the HTML by changing absolute URLs to relative URLs. Meaning instead of references like this:

<link rel="stylesheet" href="/example.css">

To this instead:

<link rel="stylesheet" href="example.css">

or maybe:

<link rel="stylesheet" href="./example.css">

The point is: there is a way to make the links work regardless of how they are proxied to.

Note, I’m not an expert with Ghost. I can tell you what needs to change about the HTML but I won’t necessarily know how to get Ghost to make that change. Whatever change is required should be possible, I just don’t know Ghost well enough to know what the change in Ghost needs to be, I’ll only be able to say what need to change in the page itself.

Also, I’m only guessing about the solution above because I don’t actually know what problem you are experiencing.

I keep asking you to see the real URLs and the actual site HTML. I need this information to answer your questions. You said “CSS was not working correctly for the blog” but the details of what wasn’t working matter and a required for me to answer. I still don’t have the specifics.

If you want to use examples instead of real pages and links, more details would help me to answer. Such an example would ideally include:

  • A working URL
  • A not working URL
  • The section of HTML from the page which works with the first URL and not the second URL

Again, I do think there is a much simpler solution here. If you want to provide a details about the issue, we would be happy to provide more information about the other solution. It is probably much less work that writing javascript to do transformations of HTML at the edge.

I basically needed a reverse proxy rule to set proxy blog.example.com to example.com/blog. That problem is as simple as that. I couldn’t find any tools Netlify offers to do it. Everything other issue such as assets being loaded frmo wrong url etc. are just the headaches reverse proxy that needs to be done regardless.

You are correct, however, default settings of Ghost are with references. Changing them would break ghost stuff like the admin page etc. So, that was not an easier option.

Hi, @thellimist, I am sorry for implying that there was a simpler way when there is not.

I had hoped there was a configuration or code in the static site generator or theme which could be modified to change this behavior.

Many static site generators support this. For example Hugo uses the functions absURL and relURL. Sometime this requires manually modifying theme code and isn’t as simply as editing a configuration file. The relative URL solution does results in a static HTML file which works both proxied to and not.

We do like to see static assets served when possible as that is the Jamstack philosophy. This is why I was trying to find a solution involving only static files and avoiding edge transformations.

Without a way to do relative URLs, I don’t see any other solution besides the one you posted. Thanks again for sharing your solution. :+1: