Last reviewed by Netlify Support Staff: November 2024
Say you have an awesome blog as part of your larger website. But you’ve chosen to have your awesome blog in its own, separate git repository apart from the rest of your site content. How can you make this work so that your visitors have a seamless experience browsing that content as well under your one, main hostname? Proxying to the rescue!
Yes, Netlify is built around the “single codebase per site” model. But this isn’t to say that you can’t host multiple repositories under a single hostname! The choice is completely yours.
I’ll describe a typical workflow for how to do this. In this example, both sites are hosted on Netlify. However, this workflow should work equally well even if the second site is not hosted on Netlify.
Let’s connect your blog with its own repository to your existing marketing site that has a totally separate code base and lives in its own repository . Your blog will live on the Marketing site (already configured as www.yoursite.com) as https://www.yoursite.com/blog in this example.
-
Blog content should be published on its own site, but with a special caveat. You’ll want to deploy the blog as a subdirectory of the published site (that is: not in the root directory). Since you’ll browse it on https://www.yoursite.com/blog as just
/blog/index.html, you’ll want to publish it under/blog/(not just/index.html).
So, for example,/assets/logo.pngbecomes/blog/assets/logo.png. References to assets should look like<img src=/blog/assets/logo.png>, without a leading hostname. You can also reference assets from the main site in this codebase as<img src=https://www.yoursite.com/assets/header.png>
Another way to accomplish this is to make sure that all of your content has relative paths for all links within the subsite, only, like this:<img src=filename-with-no-path-and-not-starting-withslash.png> -
On your Marketing site, you’ll deploy the main site’s code as usual, but you’ll add some special configuration to refer to the other site using a proxy redirect. For example:
/blog/* https://yourblogsite.netlify.app/blog/:splat 200! -
Test the blog site (recalling that you’ll browse the directory
/blog/*rather than the default/)! First you should make sure you can see your blog and that all assets load appropriately. Check those assets you have embedded in the blog site as well as those referenced from the main site. -
Test via the redirect! Visit https://www.yoursite.com/blog and make sure that things look as expected. Assets should still load, but you’re now connecting to the Marketing site, and Netlify is reverse proxying to your second site secretly and quickly - and sending the responses back via that connection to www.yoursite.com.
How are things looking? Let us know in the comments below!