TinaCMS & Astro

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx @tinacms/cli@latest init
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm dlx @tinacms/cli@latest init
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn dlx @tinacms/cli@latest init
  ```
  </Fragment>
</PackageManagerTabs>

- When prompted for a Cloud ID, press <kbd>Enter</kbd> to skip. You'll generate one later if you want to use Tina Cloud.
- When prompted "What framework are you using", choose **Other**.
- When asked where public assets are stored, press <kbd>Enter</kbd>.

After this has finished, you should now have a `.tina` folder in the root of your project and a generated `hello-world.md` file at `content/posts`.

2. Change the dev script in package.json:

   ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ``` ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ``` ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ```

3. TinaCMS is now set up in local mode. Test this by running the dev script, then navigating to /admin/index.html#/collections/post.

   Editing the “Hello, World!” post will update the content/posts/hello-world.md file in your project directory.

4. Set up your Tina collections by editing the schema.collections property in .tina/config.ts.

   For example, you can add a required "date posted" frontmatter property to our posts:

   import { defineConfig } from "tinacms";
   
   // Your hosting provider likely exposes this as an environment variable
   const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";
   
   export default defineConfig({
     branch,
     clientId: null, // Get this from tina.io
     token: null, // Get this from tina.io
     build: {
       outputFolder: "admin",
       publicFolder: "public",
     },
     media: {
       tina: {
         mediaRoot: "images",
         publicFolder: "public",
       },
     },
     schema: {
       collections: [
         {
           name: "posts",
           label: "Posts",
           path: "src/content/posts",
           format: 'mdx',
           fields: [
             {
               type: "string",
               name: "title",
               label: "Title",
               isTitle: true,
               required: true,
             },
             {
               type: "datetime",
               name: "posted",
               label: "Date Posted",
               required: true,
             },
             {
               type: "rich-text",
               name: "body",
               label: "Body",
               isBody: true,
             },
           ],
         },
       ],
     },
   });

   Learn more about Tina collections in the Tina docs.

5. In production, TinaCMS can commit changes directly to your GitHub repository. To set up TinaCMS for production, you can choose to use Tina Cloud or self-host the Tina Data Layer. You can read more about registering for Tina Cloud in the Tina Docs.

Official Resources

• TinaCMS Astro integration guide.

Community Resources

• Astro Tina Starter with visual editing by Jeff See + Dylan Awalt-Conley
• Astro Tina Starter with basic editing by Tom Bennet
• Using Astro’s Image Optimization with Tina