initial commit after project creation

This commit is contained in:
Gerhard Scheikl
2026-04-01 09:38:50 +02:00
commit b02af637d4
292 changed files with 61408 additions and 0 deletions

View 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`
![Vercel Build Settings](/img/vercel-build-settings.png)
#### 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).

View 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`.

View 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.

View 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).