81 lines
3.5 KiB
Plaintext
81 lines
3.5 KiB
Plaintext
---
|
|
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`.
|