# Path mode (/blog)

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

HTML version: https://blogizi.com/docs/path-mode
Markdown version: https://blogizi.com/docs/path-mode.md

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 `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 (JavaScript — save as `src/index.js` if using Wrangler), and add a route for `yourdomain.com/*` (whole domain — not `yourdomain.com/blog*` only).

```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 hosts your root domain — not Blogizi.

```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*"
    }
  ]
}
```

```typescript
// middleware.ts — only proxy /_next/* when Referer is a blog page
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 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.