### Install Dependencies and Run Dev Server

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/simple-markdown-blog-nextjs.mdx

Navigate into the project directory, install the necessary dependencies, and then start the Next.js development server. This prepares and launches the blog application.

```bash
cd brevifolia-next-2023
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Setup

Source: https://github.com/tinacms/tina.io/blob/main/README.md

Use this command to copy the environment file and install project dependencies using pnpm. Python is required for gyp.

```bash
cp .env.example .env
pnpm i
```

--------------------------------

### Install Dependencies and Run Dev Server

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/simple-markdown-blog-nextjs.mdx

After cloning, navigate into the project directory, install necessary dependencies using npm, and start the Next.js development server.

```bash
cd my-nextjs-blog
npm install
npm run dev
```

--------------------------------

### Clone TinaCMS Examples Repository

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/syntax-highlighting-with-tina.mdx

Clone the repository and checkout a specific commit to set up the starting point for the tutorial. Then, navigate to the correct directory and install dependencies.

```bash
git clone https://github.com/tinacms/examples.git tina-examples
cd tina-examples

git checkout 7753363ad1e967524359131565f13791d3a378eb

cd syntax-highlighting

yarn

yarn dev
```

--------------------------------

### Setup Project Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/AGENTS.md

Copy the environment file and install project dependencies using pnpm.

```bash
cp .env.example .env
pnpm i
```

--------------------------------

### Example of Created Files

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/frameworks/next/pages-router.mdx

After running 'tina init', these files are typically created. They serve as a starting point and can be deleted if not needed.

```bash
 Adding file at content/posts/hello-world.md... ✅
 Adding file at pages/demo/blog/[filename].tsx... ✅
```

--------------------------------

### Complete tina/config.ts Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/tinacloud/overview.mdx

A complete example of the tina/config.ts file, including the branch configuration and credential setup.

```typescript
import {  defineConfig } from 'tinacms'

const branch =
  process.env.NEXT_PUBLIC_TINA_BRANCH ||
  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||
  process.env.HEAD

export default defineConfig({
  token: '<Your Read Only Token>' // generated on app.tina.io
  clientId: '<Your Client ID>', // generated on app.tina.io
  branch,
  schema: {
    // ...
  },
})
```

--------------------------------

### Clone and Set Up TinaCMS Locally

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/contributing/setting-up.mdx

Clone the TinaCMS repository, install dependencies, bootstrap local packages, and build the project. This is the initial setup for local development.

```bash
git clone https://github.com/tinacms/tinacms.git
cd tinacms
npm install
npm run bootstrap
npm run build

# Start the Gatsby demo
cd packages/demo-gatsby
npm run start
```

--------------------------------

### Install Provider Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/self-hosted/manual-setup.mdx

Installs specific dependencies for chosen Git providers, database adapters, and auth providers. Example includes GitHub, Auth.js, and Upstash Redis.

```bash
yarn add tinacms-gitprovider-github tinacms-authjs upstash-redis-level @upstash/redis
```

--------------------------------

### TinaCMS CLI Output Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/graphql/cli.mdx

Example console output when the `yarn dev` script is run, indicating the GraphQL server has started and other processes are initializing.

```bash
> yarn dev

Started Filesystem GraphQL server on port: 4001
Visit the playground at http://localhost:3000/admin/index.html#/graphql
Generating Tina config
...
```

--------------------------------

### Initialize TinaCMS Project

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/cli-overview.mdx

Installs TinaCMS dependencies, defines a basic content schema, creates example content, and configures `package.json` scripts. This command must be run inside an existing project.

```bash
npx @tinacms/cli init
```

--------------------------------

### Install and Initialize TinaCMS CLI

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/using-tinacms-with-nextjs.mdx

Clone the starter repository, install dependencies, and initialize the TinaCMS CLI. This command sets up Tina in your Next.js application, installs necessary packages, defines a basic schema, and configures scripts for Tina.

```bash
git clone https://github.com/tinalabs/brevifolia-next-2022 next-tina-blog

cd next-tina-blog

yarn install
npx @tinacms/cli@latest init

do you want us to override your _app.js? Yes
```

--------------------------------

### Self-Hosted CSP Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/csp-configuration.mdx

Use this example to configure CSP for a self-hosted TinaCMS setup. Replace placeholder domains with your actual backend and media storage URLs. Ensure `connect-src` includes your content API endpoint.

```javascript
const baseCsp = [
    "default-src 'self';",
    "img-src 'self' data: your-media-storage.example.com;",
    "connect-src 'self' your-backend.example.com;",
    "// ... other directives"
];
```

--------------------------------

### AI Prompt for Environment Setup

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/vibe-coding.mdx

This markdown prompt can be given to an AI assistant to check for and install necessary development tools like Node.js, pnpm, and Git.

```markdown
1. Check whether Node.js, Git & pnpm are already installed

2. If Node.js is missing, detect my OS and install Node.js LTS:
   a. macOS / Linux: install via nvm
   b. Windows: install via Chocolatey
      
3. Enable pnpm via corepack
   
4. If Git is missing, install it.

5. Confirm everything by running `node -v`, `pnpm -v`, and `git --version`.
```

--------------------------------

### Install Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/self-hosted/auth-provider/authjs.mdx

Install the necessary packages for the Auth.js provider. Ensure a database adapter is set up prior to this step.

```bash
yarn add next-auth tinacms-authjs
```

--------------------------------

### Field Configuration Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/fields.mdx

Example demonstrating how to configure a field with a name and an optional name override for content files.

```javascript
fields: [
  {
    name: 'my_field',
    nameOverride: 'my-field',
    //...
  },
];
```

--------------------------------

### Install dateformat library

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/converting-gatsby-to-tina.mdx

Install the dateformat library using yarn to handle date formatting.

```bash
yarn add dateformat
```

--------------------------------

### Forward Pagination Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/graphql/queries/advanced/pagination.mdx

Query the 'post' collection with `postConnection`, limiting results to 1 and starting after a specific cursor. This is useful for fetching subsequent pages of data.

```graphql
{
  postConnection(sort:"date",first:1,after:"cG9zdCNkYXRlIzE2NTUyNzY0MDAwMDAjY29udGVudC9wb3N0cy92b3RlRm9yUGVkcm8uanNvbg=="){
  edges{
  node{
  id
  title
  date
  }
  }
  pageInfo{
  hasNextPage
  endCursor
  }
  }
  }
```

```json
{
  "data":{
  "postConnection":{
  "edges":[
  {
  "node":{
  "id": "content/posts/anotherPost.json",
  "title": "Just Another Blog Post",
  "date": "2022-07-15T07:00:00.000Z"
  }
  }
  ],
  "pageInfo":{
  "hasNextPage":true,
  "endCursor": "cG9zdCNkYXRlIzE2NTc4Njg0MDAwMDAjY29udGVudC9wb3N0cy9hbm90aGVyUG9zdC5qc29u"
  }
  }
  }
  }
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/self-hosted/starters/nextjs-vercel.mdx

Install the project's dependencies using Yarn. Ensure you have Yarn installed globally.

```shell
yarn install
```

--------------------------------

### Install @tinacms/auth

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/media/external/authentication.mdx

Install the @tinacms/auth package to handle user authorization for media uploads.

```bash
yarn add @tinacms/auth
```

--------------------------------

### Start Development Server

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/gatsby-tina-101.mdx

Run this command in your project's root directory to start the development server and enable TinaCMS editing.

```bash
# Start the dev server
npm start

```

--------------------------------

### Install next-tinacms-cloudinary and @tinacms/auth

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/media/external/cloudinary.mdx

Install the necessary packages for Cloudinary integration and authentication.

```bash
yarn add next-tinacms-cloudinary @tinacms/auth
```

--------------------------------

### Clone Example Gatsby Project

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/converting-gatsby-to-tina.mdx

Clone the provided example Gatsby project to follow along with the tutorial. Navigate into the project directory after cloning.

```powershell
git clone https://github.com/tinacms/gatsby-mdx-example-blog
cd gatsby-mdx-example-blog
```

--------------------------------

### Install TinaCMS and Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/contextual-editing/astro.mdx

Install the necessary TinaCMS packages and the Astro adapter for your hosting environment. If using MDX bodies, include `@astrojs/mdx`. For self-hosting, add `@tinacms/datalayer`.

```bash
pnpm add @tinacms/astro tinacms
pnpm add -D @tinacms/cli
pnpm add @astrojs/node          # or @astrojs/vercel / netlify / cloudflare
```

--------------------------------

### Good Bug Report Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/contributing/bug-reports.mdx

This is an example of a detailed bug report with numbered steps to reproduce the issue.

```text
1. Open TinaCMS admin
2. Navigate to any page with an image field (e.g., a Hero Banner block)
3. Click the image field → "Media Library" tab
4. Select any image from the media library
5. Click "Insert"
```

--------------------------------

### Next.js Cloudflare Adapter Setup

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/tinacloud/deployment-options/cloudflare-workers.mdx

For Next.js projects, use the OpenNext Cloudflare adapter. Follow its setup instructions to generate the necessary configuration files (`open-next.config.ts` and `wrangler.jsonc`).

```bash
npx opennextjs-cloudflare build
```

--------------------------------

### GraphQL query response example

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/using-tinacms-with-nextjs.mdx

Example JSON response from the `postConnection` GraphQL query, showing the structure of returned filenames.

```json
{
  "data": {
    "postConnection": {
      "edges": [
        {
          "node": {
            "_sys": {
              "filename": "bali"
            }
          }
        },
        {
          "node": {
            "_sys": {
              "filename": "iceland"
            }
          }
        },
        {
          "node": {
            "_sys": {
              "filename": "joshua-tree"
            }
          }
        },
        {
          "node": {
            "_sys": {
              "filename": "mauritius"
            }
          }
        }
      ]
    }
  }
}
```

--------------------------------

### Start the Tina development server

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/from-cms-to-contextual.mdx

Run this command to start the TinaCMS development server. This allows you to preview your site and access the CMS dashboard.

```bash
yarn tina-dev
```

--------------------------------

### Example AGENTS.md File

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/vibe-coding.mdx

An example AGENTS.md file structure that provides project context, stack details, and coding conventions to an AI assistant.

```plaintext
# Project: My Tina Blog
Stack: Next.js, TinaCMS, Tailwind CSS

- Use `tina/config.ts` for schema definitions.
- Components live in `components/`.
- Use TypeScript interfaces for all props.
```

--------------------------------

### Example Output of Content Migration

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/content-auditing-github-actions.mdx

This is an example of the output you should expect after successfully running the 'pnpm run migrate-content' command. It lists the files that have been updated with the 'lastChecked' field.

```bash
updated: content/posts/future-of-remote-work-2025.mdx 
updated: content/posts/learning-about-components.mdx 
updated: content/posts/june/learning-about-tinacloud.mdx 
updated: content/posts/artificial-intelligence-explained.mdx 


```

--------------------------------

### Install Nginx Web Server

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/tinacloud/deployment-options/alibaba-cloud.mdx

Install Nginx, a high-performance web server and reverse proxy, on your Alibaba Cloud ECS instance. This is necessary for serving your TinaCMS application.

```bash
yum install nginx
```

--------------------------------

### Run Tina Starter Project with pnpm

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/introduction/using-starter.mdx

After navigating into your starter project directory, use this command to run the development server. Ensure you have pnpm installed.

```bash
pnpm run dev
```

--------------------------------

### Install Latest TinaCMS Version

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/2025-09-23-markdown-editor-upgrade.mdx

Update your project dependencies to the latest version of TinaCMS to get the new editor features. This command installs the latest stable release.

```bash
npm install tinacms@latest
```

```bash
yarn add tinacms@latest
```

--------------------------------

### Install TinaCMS Packages with npm or Yarn

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/gatsby-tina-101.mdx

Install the necessary Gatsby plugins for TinaCMS, including Git integration and Remark support. Ensure you have Gatsby's Markdown plugins if starting from scratch.

```bash
# With npm
npm i --save gatsby-plugin-tinacms gatsby-tinacms-git gatsby-tinacms-remark styled-components

# Or using Yarn
yarn add gatsby-plugin-tinacms gatsby-tinacms-git gatsby-tinacms-remark styled-components
```

--------------------------------

### Example: Blog Post Title Text Field

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/toolkit/fields/text.mdx

Demonstrates how to implement a text field for editing a blog post's title. This example shows the basic setup within a form configuration.

```javascript
const BlogPostForm = {
  fields: [
    {
      component: 'text',
      name: 'title',
      label: 'Title',
      description: 'Enter the title of the post here',
      placeholder: '...',
    },
  ],
}
```

--------------------------------

### Clone Next.js Starter Project

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/simple-markdown-blog-nextjs.mdx

Clone the starter repository to begin building your Next.js Markdown blog. This command initializes the project in the specified directory.

```bash
git clone https://github.com/tinalabs/nextjs-starter-boilerplate my-nextjs-blog
```

--------------------------------

### Create TinaCMS Project with Barebones Starter

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/tina-next-i18n.mdx

Use `create-tina-app` with the barebones starter to set up a new TinaCMS project. This command-line interface helps initialize the project with your chosen package manager and starter template.

```bash
npx create-tina-app@latest tina-internationalization

✔ Which package manager would you like to use? › Yarn
✔ What starter code would you like to use? › Bare bones starter
```

--------------------------------

### Initialize TinaCloud Backend

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/tinacloud/overview.mdx

Run this command to initialize your TinaCloud backend. It will prompt for your Client ID and Read Only Token, and populate your .env file.

```bash
npx @tinacms/cli init backend
```

--------------------------------

### Initialize TinaCMS in a Next.js Blog Starter

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/tina-cms-get-started.mdx

Use these commands to create a Next.js blog starter and then initialize TinaCMS within it. This sets up Tina's dependencies, basic schema, demo content, and package.json scripts.

```bash
npx create-next-app --example blog-starter tina-cms-blog

cd tina-cms-blog

npx @tinacms/cli@latest init

```

--------------------------------

### Example Path to Tina Config in Monorepo

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/tinacloud/dashboard/projects.mdx

Illustrates a monorepo structure where the 'tina' directory is not at the project root. This setup requires specifying the path to the 'tina' directory in the TinaCloud project settings.

```tree
- projects
     |
     |- northwind-docs
     |     |- tina
     |         |- config.ts
     |         |- __generated__              
     |
     |
     |- cat-photos

```

--------------------------------

### Install Dependencies and Run Content Migration

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/content-auditing-github-actions.mdx

Install project dependencies using pnpm and then run the 'migrate-content' script to seed existing content with the 'lastChecked' field. This is a prerequisite for running the content audit workflow.

```bash
pnpm install
pnpm run migrate-content
```

--------------------------------

### Example File Structure After Init

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/frameworks/next/app-router.mdx

This shows the typical file structure created by `tina init`, including content and pages folders. These are safe to delete if not needed.

```bash
Adding file at content/posts/hello-world.md... ✅
Adding file at pages/demo/blog/[filename].tsx... ✅
```

--------------------------------

### Query Collections with Fetch API

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/content-api/content-delivery.mdx

This JavaScript `fetch` example demonstrates how to make a POST request to the Tina Content API to get collection names. It includes setting the `X-API-KEY` and `Content-Type` headers, and handling the response. Replace placeholders as needed.

```javascript
var myHeaders = new Headers()
myHeaders.append('X-API-KEY', '5f47d1d1c89755aba3b54684dd25f580ec6bb0d3')
myHeaders.append('Content-Type', 'application/json')

var graphql = JSON.stringify({
  query: '{\n        collections{\n            name\n        }\n}',
  variables: {},
})
var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: graphql,
  redirect: 'follow',
}

fetch(
  'https://content.tinajs.io/<TinaGraphQLVersion>/content/<ClientId>/github/main',
  requestOptions
)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.log('error', error))
```

--------------------------------

### Defining Custom Field Alongside Tina Form

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/custom-field-components.mdx

Example of defining a custom field component (`RangeInput`) directly within the same file as the Tina Form setup. This approach is suitable for smaller projects or when the custom field is tightly coupled with a specific form.

```jsx
/*
** Custom field defined alongside
** component using a Tina Form
*/
import { useLocalJsonForm, JsonFile } from "next-tinacms-json";

export default function AboutMe(props) {
  // Tina Form config
  const [data] = useLocalJsonForm(props.data, formOptions)
  return (
    //...
  )
}

function RangeInput(props) {
  //...
}

const formOptions = {
  /*
  ** RangeInput will be referenced
  ** in the custom field definition
  */
}

AboutMe.getInitialProps = async function() {
  //...
}
```

--------------------------------

### Update tina-gql cli command

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/tinacloud/schema-migration.mdx

Change the command for starting the TinaCMS server from `yarn tina-gql server:start` to `yarn tinacms server:start`.

```bash
- yarn tina-gql server:start
+ yarn tinacms server:start
```

--------------------------------

### Run the Project Locally

Source: https://github.com/tinacms/tina.io/blob/main/README.md

Execute this command to start the React/Next.js project locally. It will be accessible at localhost:3000, with the GraphQL playground at localhost:4001.

```bash
pnpm dev
```

--------------------------------

### Install lerna-clean-changelogs-cli

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/contributing/releasing.mdx

Installs the lerna-clean-changelog-cli globally to help clean up changelog entries.

```bash
npm i -g lerna-clean-changelogs-cli
```

--------------------------------

### Simple Image Field Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/types/image.mdx

A basic example of an Image Field configuration.

```APIDOC
## Simple Image Field Example

### Description
This example demonstrates a simple Image Field configuration with a label and a name.

### Request Example
```json
{
  "type": "image",
  "label": "Hero image",
  "name": "imgSrc"
}
```
```

--------------------------------

### Install next-tinacms-dos with NPM

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/media/external/do-spaces.mdx

Use this command to add the Digital Ocean Spaces media provider package to your Next.js project using NPM.

```bash
npm install next-tinacms-dos
```

--------------------------------

### Start TinaCMS Development Server

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/frameworks/other.mdx

Use this command to launch the TinaCMS development server. Replace `<your-dev-process>` with your site's specific development command. Access the Tina admin at `http://localhost:3000/admin/index.html`.

```bash
npx tinacms dev -c "<your-dev-process>"
```

--------------------------------

### Simple Date Field Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/types/datetime.mdx

A basic example of a Date Field configuration.

```APIDOC
## Simple Date Field

### Request Example
```json
{
  "type": "datetime",
  "name": "date",
  "label": "Date"
}
```
```

--------------------------------

### Create Tina App with Astro Starter

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/astro-is-becoming-the-default-tinacms-starter.mdx

Use this command to create a new TinaCMS project, selecting the Astro starter.

```bash
npx create-tina-app@latest
# choose the Astro starter
```

--------------------------------

### Clone and Install TinaDocs

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/tinadocs-your-complete-documentation-solution.mdx

Clone the TinaDocs repository and install its dependencies using pnpm.

```bash
git clone https://github.com/tinacms/tina-docs.git

cd tina-docs
pnpm install
```

--------------------------------

### Next.js getStaticPaths Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/internationalization.mdx

Example of a getStaticPaths function in Next.js for handling internationalized routing.

```jsx
// Example: Fetching the page list in NextJS
const getStaticPaths = async({ locales }) {

  // ...
})
```

--------------------------------

### Install TinaCMS CLI

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/self-hosted/manual-setup.mdx

Installs the TinaCMS command-line interface for development tasks. This is a development dependency.

```bash
yarn add --dev @tinacms/cli
```

--------------------------------

### Install Clerk Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/self-hosted/auth-provider/clerk-auth.mdx

Install the necessary Clerk and TinaCMS Clerk packages using yarn.

```bash
yarn add @clerk/clerk-js @clerk/backend tinacms-clerk
```

--------------------------------

### Install Tina Markdown Plugin

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/using-tinacms-with-nextjs.mdx

Install the necessary package for Markdown editing support in TinaCMS.

```bash
yarn add react-tinacms-editor
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/simple-markdown-blog-nextjs.mdx

Launch the Next.js development server to see your application in action. You may need to refresh the homepage to view blog posts.

```bash
npm run dev
```

--------------------------------

### Create Tina Application with Next.js Starter

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/a-b-test-with-tina.mdx

Use the create-tina-app command to scaffold a new TinaCMS project with the Next.js starter template. This sets up the basic project structure and dependencies.

```bash
npx create-tina-app@latest a-b-testing

✔ Which package manager would you like to use? › Yarn
✔ What starter code would you like to use? › Next.js Starter
Downloading files from repo tinacms/tina-cloud-starter. This might take a moment.
Installing packages. This might take a couple of minutes.
```

```bash
cd a-b-testing
yarn upgrade
yarn dev
```

--------------------------------

### Markdown Example with Custom Component

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/guides/converting-gatsby-to-tina.mdx

Example of how to use the custom `RichBlockQuote` component within your markdown content.

```markdown
<RichBlockQuote>
  ### TinaCMS Rocks!

Go check out the starter template on [tina.io](https://tina.io/docs/introduction/using-starter/)
</RichBlockQuote>

```

--------------------------------

### Start TinaCMS with Jekyll

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/frameworks/jekyll.mdx

Use this command to start the TinaCMS development server. Replace `jekyll serve` with your site's custom development command if necessary. TinaCMS will then be accessible at `http://localhost:4000/admin/index.html`.

```bash
npx tinacms dev -c "jekyll serve"
```

--------------------------------

### Create Next.js Project with Tailwind

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/using-the-power-of-mdx-with-tina.mdx

Initializes a new Next.js project with Tailwind CSS. Navigate into the created directory to proceed.

```bash
npx create-next-app -e with-tailwindcss tina-demo
cd tina-demo
```

--------------------------------

### Install TinaCMS Core Dependencies

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/self-hosted/manual-setup.mdx

Installs the main TinaCMS library and its data layer package. Use this for your project.

```bash
yarn add tinacms @tinacms/datalayer
```

--------------------------------

### Basic Template Example

Source: https://github.com/tinacms/tina.io/blob/main/content/docs/reference/templates.mdx

Illustrates how to define multiple templates within a collection.

```APIDOC
## Examples

### Basic example with two templates

```ts
import { defineConfig } from 'tinacms'

export default defineConfig({
  //...
  schema: {
    collections: [
      {
        name: 'page',
        label: 'A page of the website',
        path: 'content/pages',
        format: 'mdx',
        templates: [
          {
            name: 'content',
            label: 'Content Page',
            fields: [
              // ... content page fields
            ],
          },
          {
            name: 'marketing',
            label: 'Marketing Page',
            inline: true,
            fields: [
              //... marketing page fields
            ],
          },
        ],
      },
    ],
  },
})
```

Tina uses folder names matching the template to organize files correctly, e.g.:

```javascript
/content/pages/marketing/home.md
/content/pages/content/about.md
```
```

--------------------------------

### Create Tina App

Source: https://github.com/tinacms/tina.io/blob/main/content/blog/tina-1-0-announcement.mdx

Use this command to start a new project with TinaCMS.

```bash
npx create-tina-app@latest
```