Docs/Tutorials/Path mode (/blog)
Tutorials

Path mode (/blog)

Serve your blog at yourapp.com/blog via a reverse proxy.

Path mode serves your blog at yourapp.com/blog (or any base path you choose). Point your root domain at Blogizi, or use a reverse proxy on your end — Blogizi rewrites /blog/* to your project automatically when path mode is enabled.

Option A — point DNS at Blogizi (simplest)

  1. Open Settings → DNS and switch to Path mode
  2. Set your root domain (e.g. yourapp.com) and base path (defaults to blog)
  3. Point your domain's DNS to the same place as blogizi.com (e.g. Vercel)

Option B — reverse proxy

If your main site already runs elsewhere, copy the reverse-proxy config for your platform (Vercel, Cloudflare, Nginx, or Caddy) from the settings page. The proxy must forward /blog/* to to your-slug.app.blogizi.com and set the Host header to your Blogizi subdomain.

Cloudflare Worker example

Create a Worker at dash.cloudflare.com, paste the script from your dashboard (it's JavaScript — save as src/index.js if using Wrangler), and add a route for yourdomain.com/* (whole domain — not yourdomain.com/blog* only).

worker.js
javascript
// Route: yourdomain.com/*
export default {
  async fetch(request) {
    const url = new URL(request.url)
    const prefix = '/blog'

    function refererFromBlog(referer) {
      if (!referer) return false
      try {
        const ref = new URL(referer)
        return ref.pathname === prefix || ref.pathname.startsWith(prefix + '/')
      } catch {
        return false
      }
    }

    function proxyToBlogizi(pathname, search) {
      const blogUrl = new URL(pathname + search, 'https://YOUR-SLUG.app.blogizi.com')
      const headers = new Headers(request.headers)
      headers.set('Host', 'YOUR-SLUG.app.blogizi.com')
      headers.set('X-Forwarded-Host', url.host)
      headers.set('X-Forwarded-Prefix', prefix)
      const init = { method: request.method, headers, redirect: 'manual' }
      if (request.method !== 'GET' && request.method !== 'HEAD') {
        init.body = request.body
      }
      return fetch(blogUrl.toString(), init)
    }

    if (url.pathname === prefix || url.pathname.startsWith(prefix + '/')) {
      const newPath = url.pathname.slice(prefix.length) || '/'
      return proxyToBlogizi(newPath, url.search)
    }

    if (url.pathname.startsWith('/_next/') && refererFromBlog(request.headers.get('Referer'))) {
      return proxyToBlogizi(url.pathname, url.search)
    }

    if (url.pathname.startsWith('/api/sites/')) {
      return proxyToBlogizi(url.pathname, url.search)
    }

    return fetch(request)
  }
}

Vercel (main site repo)

Add both files to the project that already hosts your root domain — not the Blogizi dashboard. Do not add a blanket /_next/* rewrite in vercel.json if your root site is also Next.js; use middleware.ts with a Referer check instead.

vercel.json
json
{
  "rewrites": [
    {
      "source": "/blog/:path*",
      "destination": "https://YOUR-SLUG.app.blogizi.com/:path*"
    },
    {
      "source": "/api/sites/:path*",
      "destination": "https://YOUR-SLUG.app.blogizi.com/api/sites/:path*"
    }
  ]
}
middleware.ts
typescript
import { NextRequest, NextResponse } from 'next/server'

const BLOG_PREFIX = '/blog'
const BLOGIZI_ORIGIN = 'https://YOUR-SLUG.app.blogizi.com'
const BLOGIZI_HOST = 'YOUR-SLUG.app.blogizi.com'

function refererFromBlog(referer: string | null) {
  if (!referer) return false
  try {
    const ref = new URL(referer)
    return ref.pathname === BLOG_PREFIX || ref.pathname.startsWith(BLOG_PREFIX + '/')
  } catch {
    return false
  }
}

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/_next/')) {
    return NextResponse.next()
  }
  if (!refererFromBlog(request.headers.get('referer'))) {
    return NextResponse.next()
  }

  const dest = new URL(
    request.nextUrl.pathname + request.nextUrl.search,
    BLOGIZI_ORIGIN
  )
  const headers = new Headers(request.headers)
  headers.set('Host', BLOGIZI_HOST)
  headers.set('X-Forwarded-Host', request.headers.get('host') || '')
  headers.set('X-Forwarded-Prefix', BLOG_PREFIX)

  return NextResponse.rewrite(dest, { request: { headers } })
}

export const config = {
  matcher: '/_next/:path*',
}
Reverse proxies must forward /blog/*, blog-only /_next/* (when the Referer is a blog page — required if your root site is also Next.js), and /api/sites/*. On Cloudflare, attach the worker to yourdomain.com/* — not yourdomain.com/blog* only — so asset requests reach the worker. Canonical URLs and sitemap entries use your root domain + base path in path mode.