Hosting under SubDirectory of your main domain

Hosting of subpages under subdirectory (i.e., mysite.com/blog, mysite.com/roadmap, etc.) is possible with additional server configuration at your end. This article serves as a guide to implementing this additional configuration.

This configuration to implement subdirectory hosting requires technical expertise. Please forward these instructions to the developer who has access to your server configuration.

SubDirectory hosting is made possible through the reverse proxy mechanism. It is required that you initially publish on the subdomain for verification purposes before you configure the subdirectory.

Steps to follow inside SubPage.app

1Open the page editor inside the SubPage app. Click on the Publish button on the top right.

2Make sure that the page is already published to your custom domain. If not done already, publish it on the custom domain first.

3Once published on the subdomain, you will see the additional options for adding subdirectory support. Turn the toggle button to 'On' and click on the 'Submit' button.

4 Copy the map proxy URL that you will be pasting in your server configuration. Example screenshot:

Screenshot 2024-07-22 at 7.47.43 PM.png

Once these steps are done, you are now ready to do the additional configuration on your server side.

Quick Links:

Server configuration steps for Nginx
Server configuration steps for CloudFront
Server configuration steps for Apache
Server configuration steps for Cloudflare
Server configuration steps for NextJS
Server configuration steps for Netlify
Other servers

Nginx

To set up a subdirectory on SubPage using the nginx server, follow the below steps:

1Open the nginx conf file.

vi /etc/nginx/nginx.conf

2Paste the configuration below inside the server block in your nginx configuration file.

location /sub_dir_path {

proxy_pass https://editor.subpage.app/dir/<your-subdir-id>;

resolver 1.1.1.1 8.8.8.8;

# Proxy headers

proxy_set_header Host $host;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Forwarded-Host $host;

proxy_set_header X-Forwarded-Port $server_port;

}

If you are configuring the blog page, which is on blog.yoursite.com to yoursite.com/blog,

then the above code will look like this:

location /blog {

proxy_pass https://editor.subpage.app/dir/<your-subdir-id>;

proxy_http_version 1.1;

proxy_cache_bypass $http_upgrade;

# Proxy headers

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Forwarded-Host $host;

proxy_set_header X-Forwarded-Port $server_port;

# Proxy timeouts

proxy_connect_timeout 60s;

proxy_send_timeout 60s;

proxy_read_timeout 60s;

}

CloudFront

To set up a subdirectory on SubPage using Cloubfront, follow the below steps.

1Login to your AWS console and open the CloudFront dashboard. Open your domain item under the Distributions.

2Click on the 'Origins' tab.

3Click on the "Create new Origin" button. In the window that opens, enter the details shown in the screenshot below.

4The created origin will be listed under the Origins tab. Next, click on the 'Behaviors tab'.

5Click on the 'Create New behavior' button. In the window that opens, enter the configuration as shown in the screenshot below:

6After creating the new behavior, it will be listed under the 'Behaviors' tab.

With this, the subdirectory path setup in CloudFront is done.

If you have setup a different Cloudfront distribution for www.domain.com starting with www, then you have to repeat the same steps for this distribution also.

Apache

To set up a subdirectory on SubPage using Apache, follow the below steps.

Enable the ssl, proxy and proxy_http modules.

Add the below code inside your Apache configuration file.

# Replace with your domain

ServerName <yoursite.com>

SSLProxyEngine on

# Your SSL Certificate details. Replace with your own SSL setup

# SSLCertificateFile /path/to/cert

# SSLCertificateKeyFile /path/to/key;

# Replace with your subdomain, https matters here

ProxyPass https://editor.subpage.app/dir/<your-subdir-id>

</Location>

</VirtualHost>

Cloudflare

To set up a subdirectory on SubPage using Cloudflare, follow the below steps.

Paste the following code inside the Worker script area. Refer here for more details on Cloudflare workers.

Note - In this code snippet, use your domain name wherever "yoursite.com" is used and replace 'blog' with the actual subpage path.

addEventListener('fetch', event => {

event.respondWith(handleRequest(event.request))

})

async function handleRequest(request) {

try {

const urlObject = new URL(request.url);

if (/^\/blog/.test(urlObject.pathname)) {

const SP_URL = "https://editor.subpage.app/dir/<your-subdir-id>";

const CUSTOM_URL = "yoursite.com";

let url = new URL(request.url);

url.hostname = SP_URL;

let proxyRequest = new Request(url, request);

proxyRequest.headers.set('Host', SP_URL);

proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);

proxyRequest.headers.set("X-Forwarded-Proto", "https");

let ip = proxyRequest.headers.get("CF-Connecting-IP");

proxyRequest.headers.set("X-Forwarded-For", ip);

return await fetch(proxyRequest);

}

} catch (error) {

return await fetch(request);

}

return await fetch(request);

}

NextJS

To set up a subdirectory on SubPage using NextJS, follow the below steps.

Paste the below code in your next.config.js file.

In this code, the subdirectory path name has been used as 'blog', and the main domain has been used as 'yoursite.com'.

const nextConfig = {

async rewrites() {

return [

{

source: "/blog/:path*/",

destination: "https://editor.subpage.app/dir/<your-subdir-id>/:path*/",

];

}

module.exports = nextConfig

Netlify

To set up a subdirectory on SubPage using Netlify, follow the below steps.

Paste the below code in your netlify.toml file.

In this code, the subdirectory path name has been used as 'blog', and the main domain has been used as 'yoursite.com'.

[[redirects]]

from = "/blog/*"

to = "https://editor.subpage.app/dir/<your-subdir-id>/:splat"

status = 200

force = true

headers = {X-Forwarded-Host = "<yoursite.com>"}

[[redirects]]

from = "/blog"

to = "https://editor.subpage.app/dir/<your-subdir-id>/"

status = 200

force = true

headers = {X-Forwarded-Host = "<yoursite.com>"}

General Instructions for other servers

If the server you are using is not covered in the above list, please follow these general instructions to set up the subdirectory.

1The subdirectory configuration is done using the 'Reverse Proxy' mechanism.

Check your server documentation to see how to implement the reverse proxy.

2In the reverse proxy implementation, always provide the source URL as the subdirectory path name that was configured inside the SubPage editor. This will usually be like /blog, /help, /faq, etc.,

The destination URL should be https://editor.subpage.app/dir/<your-subdir-id>,

The destination URL to map is given in the publish settings of your subpage.

If you encounter any issues or require additional support, you can contact us for assistance at support@subpage.app.

Rate this article