bantam.hostbantam.host
Back to all frameworks
CLI Guide

Deploy VitePress with Bantam CLI

Vite & Vue powered static site generator for documentation

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your VitePress app
npm run docs:build

# Deploy it
bantam deploy .vitepress/dist

Quick Start

1

Install dependencies

Install VitePress and dependencies

npm install
2

Build documentation

Generate static documentation site

npm run docs:build
Creates .vitepress/dist with optimized static files
3

Deploy with Bantam

Your VitePress docs are now live!

bantam deploy .vitepress/dist
Get an instant URL like https://my-docs-abc123.bantam.site

Framework Details

VitePress Configuration

Configure VitePress for your documentation:

.vitepress/config.js:

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: "My Documentation",
  description: "A VitePress documentation site",
  base: '/',
  
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'API', link: '/api/' }
    ],
    
    sidebar: [
      {
        text: 'Introduction',
        items: [
          { text: 'Getting Started', link: '/guide/getting-started' },
          { text: 'Installation', link: '/guide/installation' }
        ]
      }
    ],
    
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})
VitePress uses file-based routing. Each .md file becomes a route.

Markdown Extensions

VitePress extends markdown with Vue components:

Using Vue in Markdown:

# My Page

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

## Counter Example

<button @click="count++">Count is: {{ count }}</button>

::: info
This is an info box.
:::

::: warning
This is a warning.
:::
Vue components in markdown are processed at build time, not runtime.

Build Output

VitePress generates optimized static files in .vitepress/dist:

  • index.html - Documentation homepage
  • assets/ - JS bundles and CSS with hashing
  • guide/ - HTML files for each markdown page
  • 404.html - Custom 404 page
  • Automatic code splitting for optimal performance
VitePress pre-renders all pages and includes Vue only where needed.

Advanced Usage

Custom Domain

Deploy directly to your own domain

bantam deploy ./dist --domain myapp.com

Permanent Deployment

Keep your site online forever (requires login)

bantam deploy ./dist --permanent

Custom Expiry

Set how long your deployment stays online

bantam deploy ./dist --expiry-days 7

Custom Subdomain

Choose your own subdomain on bantam.site

bantam deploy ./dist --subdomain my-project

CI/CD Integration

Add Bantam to your continuous deployment pipeline:

# GitHub Actions example
- name: Deploy to Bantam
  run: |
    npm install -g @bantamhq/cli
    bantam login --token ${{ secrets.BANTAM_TOKEN }}
    bantam deploy ./dist --domain myapp.com --permanent
Troubleshooting

Common Issues & Solutions

Quick fixes for deployment challenges

01.Build output in wrong directory?

VitePress outputs to .vitepress/dist by default:

# Default build location
bantam deploy .vitepress/dist

# Custom output directory
export default defineConfig({
  outDir: '../dist'
})

02.Base URL issues with assets?

Configure base URL for subdirectory deployment:

// .vitepress/config.js
export default defineConfig({
  base: '/docs/', // For mysite.com/docs/
  
  // For root deployment
  base: '/'
})

03.Sidebar not showing all pages?

Configure sidebar items explicitly:

// .vitepress/config.js
themeConfig: {
  sidebar: [
    {
      text: 'Guide',
      collapsed: false,
      items: [
        { text: 'Introduction', link: '/guide/intro' },
        { text: 'Getting Started', link: '/guide/getting-started' },
        // Auto-generate from directory
        ...generateSidebarItems('/guide')
      ]
    }
  ]
}

04.Search not working after deployment?

VitePress includes local search by default:

// .vitepress/config.js
export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        detailedView: true
      }
    }
  }
})

05.Custom components not loading?

Register components globally or use in markdown:

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import MyComponent from './MyComponent.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('MyComponent', MyComponent)
  }
}