Sub-directory hosting

How to host your Bullet site as a sub-directory?

If you already have your website on other 3rd party tools and you want to use bullet only for specific use cases like Blog or a knowledge base, you can achieve that using reverse-proxy.
Note: Once you have configured your bullet site in a sub-directory, your internal links will not work in the subdomain. However, there will be no issues in the domain that you have configured.

Step 1: Configuring your Sub-Directory

The first step is to configure your sub-directory in the bullet dashboard.
  • Navigate to the domains section and click on the “Sub-Directory”.
  • Next, Enter the domain name and the sub-directory(Hosting path)details for your site.
    • notion image

Step 2: Setting up reverse proxy

Now we have to set a reverse proxy to your primary domain and the sub-directory. You can use any one of the below options to setup your reverse proxy.
1. Cloudflare workers.
  • Create a new Cloudflare worker, and add the below code.
  • Now, In the 3rd line in the code add the current URL of your bullet site. You will find in your Site settings in your bullet dashboard.
  • Next, In the 4th line of the code add the subrirectory(Hosting path) details you added in the Bullet dashboard.
addEventListener('fetch', (event) => { // Add your bullet subdomain below. Avoid trailing slash const bulletUrl = new URL(``) // Add sub-directory path where you want to see your bullet site in the next line. Avoid trailing slash/ const subdirectory = "/blog" const requestUrl = new URL(event.request.url) const pathname = requestUrl.pathname if (pathname.startsWith(`${subdirectory}/`) || pathname === subdirectory) { event.passThroughOnException() event.respondWith(fetch(`${bulletUrl.origin}${pathname.replace(subdirectory, "")}${}`, event.request).then((response) => { const clonedResponse = new Response(response.body, response); if (clonedResponse.status === 308) { const redirectLocation = clonedResponse.headers.get("location"); const destination = (subdirectory + redirectLocation + "/").replace('//', '/'); redirectLocation && clonedResponse.headers.set("location", destination); } return clonedResponse; })) } else { event.respondWith(fetch(event.request)) } })
  • After creating the worker and deploying, add the Worker Route, and set the path to*
2. Nginx
  • Add the below snippet in your ngnix configuration(.conf) file.
  • update and replace your placeholder proxy_pass details to your bullet domain.
location /blog/ { proxy_pass https://{{bullet-subdomain}}; proxy_ssl_server_name on; }
3. Next.js
  • Add the Below Code in your next.config.js file.
  • Replace the placeholder data in the below code with appropriate details.
// next.config.js /** @type {import('next').NextConfig} */ const config = {     rewrites() {         const bulletUrl = new URL(             `https://{{bullet-subdomain}}`,         ).origin         return [             {                 source: '/blog',                 destination: `${bulletUrl}`,             },// match all paths with extension eg .xml, .json etc. {                 source: '/blog/:slug(.*\\.[a-zA-Z]{2,5}$)',                 destination: `${bulletUrl}/:slug`,             },// match all paths starting with /blog             {                 source: '/blog/:path*',                 destination: `${bulletUrl}/:path*/`,             },         ]     }, } module.exports = config
By default, next.js will redirect url with trailing slash. Because of this there will be a redirect for every blog post. To avoid this, we can add the below code in next.config.js file.
trailingSlash: true
Feel free to reach out to us in case you have any issues.