initial commit after project creation
This commit is contained in:
118
content/docs/going-live/deploying-your-docs.mdx
Normal file
118
content/docs/going-live/deploying-your-docs.mdx
Normal file
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Deploying Your Docs
|
||||
last_edited: '2025-10-27T04:14:52.046Z'
|
||||
auto_generated: false
|
||||
---
|
||||
|
||||
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](/docs/tinacloud/overview))
|
||||
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:
|
||||
|
||||
```javascript
|
||||
NEXT_PUBLIC_TINA_CLIENT_ID=<your-client-id>
|
||||
TINA_TOKEN=<your-read-only-token>
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```bash
|
||||
tinacms build && next build
|
||||
```
|
||||
|
||||
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](https://vercel.com)
|
||||
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](/docs/tinacloud/deployment-options/vercel).
|
||||
80
content/docs/going-live/tinacloud/configuring-tinacloud.mdx
Normal file
80
content/docs/going-live/tinacloud/configuring-tinacloud.mdx
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Configuring TinaCloud
|
||||
last_edited: '2025-08-07T23:37:23.124Z'
|
||||
auto_generated: false
|
||||
---
|
||||
|
||||
<Callout
|
||||
variant="idea"
|
||||
body={<>
|
||||
Rather watch a video? Check out our video below.
|
||||
</>}
|
||||
/>
|
||||
|
||||
<youtube embedSrc="https://www.youtube.com/embed/sTVd8CYtXrA?si=XjFqX35NwcNgVhP3" caption="" />
|
||||
|
||||
TinaCloud connects your website to GitHub via an indexed datalayer, allowing editors to make changes directly through your site's interface.
|
||||
|
||||
You can also set this up yourself with custom database, git and auth logic.
|
||||
|
||||
**If using GitHub, we recommend going with TinaCloud**. To read more about TinaCloud, see the [TinaCloud documentation](https://tina.io/docs/tina-cloud/introduction).
|
||||
|
||||
## Create Your TinaCloud account
|
||||
|
||||
1. Go to [https://app.tina.io/signin](https://app.tina.io/signin).
|
||||
2. Click "Authenticate with GitHub".
|
||||
3. Sign in with your GitHub account.
|
||||
4. Authorise Tina.
|
||||
|
||||
You should now be redirected to the TinaCloud dashboard.
|
||||
|
||||
## Creating a Project in TinaCloud
|
||||
|
||||
1. **Authorize GitHub**: When setting up a project, you'll need to authenticate with GitHub. A popup window will ask for permission to give Tina.io access to your GitHub repositories.
|
||||
2. **Choose Your Repository**: After GitHub authorization, select the repository that contains your site's content. If you don't see your repository in the list, you may need to reconfigure your Tina.io permissions in GitHub.
|
||||
3. **Configure the Project**: Set up the following properties:
|
||||
* **Project Name**: This appears when users log in to the project
|
||||
* **Site URL(s)**: Enter both your local URL (e.g., `http://localhost:3000`) and production URL (e.g., `https://yourdomain.com`)
|
||||
* **Glob Patterns**: If you're using dynamic preview deployments, you can enter patterns like `https://<PROJECT-NAME>-*-<ACCOUNT-OWNER>.vercel.app`
|
||||
4. **Sync Media**: Click on the 'Media' tab and then 'Sync Media'. This will import your media files from your GitHub repository into Tina's Media Manager so they're available in the visual editor.
|
||||
|
||||
## Connecting Your Project to the Editor
|
||||
|
||||
Once your project is created, you'll need to connect it to your site:
|
||||
|
||||
1. **Run the Backend Init Command**:
|
||||
|
||||
```bash
|
||||
npx @tinacms/cli init backend
|
||||
```
|
||||
|
||||
This command will:
|
||||
|
||||
* Prompt for your Client ID (found in the "Overview" tab of your project)
|
||||
* Prompt for a Read Only Token (found in the "Tokens" tab)
|
||||
* Populate your `.env` file with the necessary environment variables
|
||||
|
||||
1. **Update Your Configuration**: Ensure your `tina/config.js` file correctly references the environment variables:
|
||||
|
||||
```javascript
|
||||
export default defineConfig({
|
||||
token: process.env.TINA_TOKEN,
|
||||
clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID,
|
||||
branch: process.env.NEXT_PUBLIC_TINA_BRANCH || '',
|
||||
// other config options...
|
||||
})
|
||||
```
|
||||
|
||||
> **Important**: These environment variables must also be set in your deployment workflow. See our [deployment guide](/docs/set-up/deploying-your-docs) for more information.
|
||||
|
||||
By following these steps, your TinaCloud project will be connected to your repository, enabling content editing directly through your site's interface.
|
||||
|
||||
## Using the Editor with TinaCloud
|
||||
|
||||
Edits made via the TinaCloud (as opposed to the local) editor are automatically pushed to your Git repository.
|
||||
|
||||
Access the local editors by running `pnpm run dev` in your terminal and going to `http://localhost:3000/admin/index.html`.
|
||||
|
||||
Access the TinaCloud editor by going to `https://<DOMAIN>/admin/index.html` on your deployed site.
|
||||
|
||||
You can also access the TinaCloud editor by running `pnpm run build`, then `pnpm run start`, and then going to `http://localhost:3000/admin/index.html`.
|
||||
54
content/docs/going-live/tinacloud/custom-datalayer.mdx
Normal file
54
content/docs/going-live/tinacloud/custom-datalayer.mdx
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Custom Datalayer
|
||||
last_edited: '2025-07-15T06:59:09.720Z'
|
||||
---
|
||||
|
||||
Setting up your own datalayer gives you complete control over how TinaCMS interacts with your content. This guide provides an overview of the key components and concepts.
|
||||
|
||||
## Core Components
|
||||
|
||||
When self-hosting the TinaCMS datalayer, you'll need to configure four main components:
|
||||
|
||||
### 1. Backend Host
|
||||
|
||||
The backend host is where your datalayer API will run. Common options include:
|
||||
|
||||
* Next.js API routes
|
||||
* Vercel Serverless Functions
|
||||
* Netlify Functions
|
||||
|
||||
### 2. Database Adapter
|
||||
|
||||
The database adapter determines where your content index is stored. Options include:
|
||||
|
||||
* MongoDB
|
||||
* Vercel KV
|
||||
* Custom database solutions
|
||||
|
||||
Learn more in the [official Database Adapter documentation](https://tina.io/docs/reference/self-hosted/database-adapter/overview).
|
||||
|
||||
### 3. Git Provider
|
||||
|
||||
The Git provider manages how your content files are stored and retrieved. Options include:
|
||||
|
||||
* GitHub
|
||||
* Custom Git providers
|
||||
|
||||
Learn more in the [official Git Provider documentation](https://tina.io/docs/reference/self-hosted/git-provider/overview).
|
||||
|
||||
### 4. Auth Provider
|
||||
|
||||
The auth provider handles user authentication for your CMS. Options include:
|
||||
|
||||
* Auth.js (formerly NextAuth.js)
|
||||
* Clerk
|
||||
* TinaCloud auth
|
||||
* Custom auth solutions
|
||||
|
||||
Learn more in the [official Auth Provider documentation](https://tina.io/docs/reference/self-hosted/auth-provider/overview).
|
||||
|
||||
## Getting Started
|
||||
|
||||
For complete step-by-step instructions on configuring your own datalayer, we recommend following the [official TinaCMS Self-Hosting documentation](https://tina.io/docs/self-hosted/overview).
|
||||
|
||||
The official documentation provides detailed examples, code snippets, and best practices for setting up each component of your custom datalayer.
|
||||
59
content/docs/going-live/tinacloud/what-is-a-datalayer.mdx
Normal file
59
content/docs/going-live/tinacloud/what-is-a-datalayer.mdx
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: What is a Datalayer?
|
||||
last_edited: '2025-10-27T03:00:50.463Z'
|
||||
auto_generated: false
|
||||
---
|
||||
|
||||
The Datalayer is a critical component of TinaCMS that acts as the bridge between your content files and the TinaCMS editing interface. It provides:
|
||||
|
||||
1. Content Indexing: Indexes your content files to enable fast queries and searching
|
||||
2. GraphQL API: Generates a GraphQL API based on your content model
|
||||
3. Authentication: Manages user authentication for the editing interface
|
||||
4. Storage: Handles content storage and retrieval from your repository
|
||||
|
||||
## TinaCloud vs Self-Hosting
|
||||
|
||||
TinaCMS offers two approaches for implementing the datalayer:
|
||||
|
||||
### TinaCloud (recommended)
|
||||
|
||||
TinaCloud is a managed service that handles the Datalayer for you, providing:
|
||||
|
||||
* Automatic content indexing
|
||||
* User authentication and management
|
||||
* Seamless GitHub integration
|
||||
* No need to maintain your own infrastructure
|
||||
|
||||
This is ideal for most projects and is the quickest way to get started.
|
||||
|
||||
A free option also exists for small-scale projects.
|
||||
|
||||
### Self-Hosted
|
||||
|
||||
The self-hosted option allows you to run the datalayer on your own infrastructure, giving you:
|
||||
|
||||
* Complete control over your data
|
||||
* Custom authentication providers
|
||||
* Support for custom Git providers
|
||||
* Integration with your own database
|
||||
|
||||
### When to choose Self-Hosted
|
||||
|
||||
Consider self-hosting the Datalayer when:
|
||||
|
||||
* You need to use a Git provider other than GitHub
|
||||
* You want to use a custom database for content indexing
|
||||
* You need a custom authentication system
|
||||
* You have specific compliance or security requirements
|
||||
* You have the resources to manage and work with custom hosting infrastructure.
|
||||
|
||||
#### Components of a Self-Hosted Datalayer
|
||||
|
||||
To self-host the Datalayer, you'll need to configure:
|
||||
|
||||
1. Backend Host: A server to run the Datalayer (e.g., Next.js, Vercel Functions)
|
||||
2. Database Adapter: A database to store and index content (e.g., MongoDB, Vercel KV)
|
||||
3. Git Provider: A service to store and manage content files (e.g., GitHub, custom Git provider)
|
||||
4. Auth Provider: A system to authenticate users (e.g., Auth.js, Clerk)
|
||||
|
||||
For detailed instructions on setting up a self-hosted Datalayer, see our [Self-Hosting Guide](https://tina.io/docs/self-hosted/overview).
|
||||
Reference in New Issue
Block a user