-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
458 additions
and
241 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| --- | ||
| title: Tina CMS & Astro | ||
| description: Add content to your Astro project using Tina as a CMS | ||
| type: cms | ||
| stub: false | ||
| service: Tina CMS | ||
| --- | ||
| import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' | ||
|
|
||
| [Tina CMS](https://www.tina.io/) is a Git-backed headless content management system. | ||
|
|
||
| ## Integrating with Astro | ||
|
|
||
| To get started, you'll need an existing Astro project. | ||
|
|
||
| 1. Run the following command to install Tina into your Astro project. | ||
|
|
||
| <PackageManagerTabs> | ||
| <Fragment slot="npm"> | ||
| ```shell | ||
| npx @tinacms/cli@latest init | ||
| ``` | ||
| </Fragment> | ||
| <Fragment slot="pnpm"> | ||
| ```shell | ||
| pnpx @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 an `admin` folder in your public directory. It will also create a Markdown file at `content/posts/hello-world.md`. | ||
|
|
||
| 2. Change the `dev` script in `package.json`: | ||
|
|
||
| <PackageManagerTabs> | ||
| <Fragment slot="npm"> | ||
| ```json del={4} ins={5} | ||
| // package.json | ||
| { | ||
| "scripts": { | ||
| "dev": "astro dev", | ||
| "dev": "npm tinacms dev -c 'astro dev'" | ||
| } | ||
| } | ||
| ``` | ||
| </Fragment> | ||
| <Fragment slot="pnpm"> | ||
| ```json del={4} ins={5} | ||
| // package.json | ||
| { | ||
| "scripts": { | ||
| "dev": "astro dev", | ||
| "dev": "pnpm tinacms dev -c 'astro dev'" | ||
| } | ||
| } | ||
| ``` | ||
| </Fragment> | ||
| <Fragment slot="yarn"> | ||
| ```json del={4} ins={5} | ||
| // package.json | ||
| { | ||
| "scripts": { | ||
| "dev": "astro dev", | ||
| "dev": "yarn tinacms dev -c 'astro dev'" | ||
| } | ||
| } | ||
| ``` | ||
| </Fragment> | ||
| </PackageManagerTabs> | ||
|
|
||
| 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: | ||
|
|
||
| ```js title=".tina/config.ts" ins={35-40} | ||
| 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](https://tina.io/docs/reference/collections/). | ||
|
|
||
| 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](https://tina.io/docs/tina-cloud/) or self-host the [Tina Data Layer](https://tina.io/docs/self-hosted/overview/). You can [read more about registering for Tina Cloud](https://app.tina.io/register) in the Tina Docs. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.