Deploying Your Docs

    Once you've set up your TinaDocs site locally and configured TinaCloud, the next step is deploying it to a hosting provider. This guide will walk you through the process, with a focus on deploying to Vercel.

    Prerequisites

    Before deploying, ensure you have:

    1. A TinaCloud project set up (see Setting Up TinaCloud)
    2. Your repository fully configured with TinaCMS
    3. Environment variables for NEXT_PUBLIC_TINA_CLIENT_ID and TINA_TOKEN

    Setting Up Environment Variables

    For your deployment to work correctly, you must set the following environment variables on your hosting provider:

    You can find these values in your TinaCloud dashboard:

    • Client ID: In the "Overview" tab of your project
    • Token: In the "Tokens" tab of your project

    Configuring Your Build Command

    To ensure the TinaCMS admin interface is built alongside your site, your build command should run tinacms build before your site's build command:

    This creates the admin interface at /admin/index.html in your final build.

    Deploying to Vercel (Recommended)

    Vercel is the recommended hosting provider for TinaDocs sites due to its seamless integration with Next.js.

    Step 1: Connect Your Repository

    1. Log in to Vercel
    2. Click "Add New Project"
    3. Connect your GitHub repository
    4. Select the repository containing your TinaDocs site

    Step 2: Configure Build Settings

    In the configuration screen:

    1. Leave the framework preset as "Next.js"
    2. Modify the build command if needed:
      • If your package.json has a build script like "build": "tinacms build && next build", you can leave the default setting
      • Otherwise, set the build command to: tinacms build && next build

    Step 3: Set Environment Variables

    Add your TinaCMS environment variables:

    1. Expand the "Environment Variables" section
    2. Add the following variables:
      • NEXT_PUBLIC_TINA_CLIENT_ID = Your TinaCloud Client ID
      • TINA_TOKEN = Your TinaCloud Read-Only Token
    3. Add any other environment variables your project requires

    Step 4: Deploy

    Click "Deploy" and Vercel will build and deploy your TinaDocs site.

    Step 5: Configure Branch Settings (Optional)

    For production branch settings:

    1. Go to your project settings in Vercel
    2. Navigate to "Git" section
    3. Configure your production branch (typically "main")

    Other Deployment Options

    Netlify

    1. Connect your GitHub repository to Netlify
    2. Set the build command to: tinacms build && next build
    3. Set the publish directory to: out (for static export) or .next (for server rendering)
    4. Add the TinaCMS environment variables in the Netlify dashboard

    GitHub Pages

    1. Create a GitHub workflow file (.github/workflows/deploy.yml)
    2. Configure the workflow to set environment variables
    3. Use the tinacms build && next build command
    4. Set up GitHub Pages to deploy from your build output

    Testing Your Deployment

    After deploying, verify that:

    1. Your site is accessible at your domain
    2. The TinaCMS admin interface works at /admin/index.html
    3. You can log in and make edits that are saved to your repository

    Troubleshooting

    If you encounter issues:

    • Admin page not found: Ensure your build command includes tinacms build
    • Authentication failures: Check that your environment variables are correctly set
    • Content not updating: Verify your TinaCloud project has the correct site URL configured
    • Branch issues: Ensure your branch configuration in tina/config.js is correct

    For more details, visit the official TinaCMS deployment documentation.

    Last Edited: July 31, 2025