{"id":18648778,"url":"https://github.com/mitchmac/tina-cloud-starter-april-19","last_synced_at":"2025-10-14T15:44:44.408Z","repository":{"id":145859255,"uuid":"359502176","full_name":"mitchmac/tina-cloud-starter-april-19","owner":"mitchmac","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-20T17:15:56.000Z","size":9248,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T15:44:43.661Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"tina-cloud-starter-april-19-git-main-mitchmac.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mitchmac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-19T15:09:18.000Z","updated_at":"2023-03-07T15:37:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"8bba41ff-8d28-4d4b-9c97-9401daeb6f80","html_url":"https://github.com/mitchmac/tina-cloud-starter-april-19","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mitchmac/tina-cloud-starter-april-19","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchmac%2Ftina-cloud-starter-april-19","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchmac%2Ftina-cloud-starter-april-19/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchmac%2Ftina-cloud-starter-april-19/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchmac%2Ftina-cloud-starter-april-19/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitchmac","download_url":"https://codeload.github.com/mitchmac/tina-cloud-starter-april-19/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitchmac%2Ftina-cloud-starter-april-19/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019351,"owners_count":26086711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T06:33:48.741Z","updated_at":"2025-10-14T15:44:44.392Z","avatar_url":"https://github.com/mitchmac.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tina Cloud Starter 🦙\n\nBasic TinaCMS starter based on [Next.js](https://nextjs.org) and [TinaCMS](https://tina.io) that connects to Tina Cloud Content API.\n\n![Starter Homepage Preview](public/uploads/tina-cloud-starter-preview.png)\n\n## Project scope:\n\n- Run this project locally using local content within this repository.\n- Connect to Tina Cloud to benefit from its GraphQL Content API.\n- Deploy the site to visually edit your site.\n- Invite collaborators.\n\n## Table of contents\n\n- 🍴 [What is this?](#what-is-this)\n- 🍴 [Fork and Clone](#fork-and-clone-this-repository)\n- ⬇️ [Install](#install)\n- 🌎 [Run the project locally](#run-the-project-locally)\n- 📝 [Edit content locally](#edit-content-locally)\n- 🦙 [Connect to Tina Cloud](#connect-to-tina-cloud)\n  - ☁️ [Register your local application with Tina Cloud](#register-your-local-application-with-tina-cloud)\n  - 🔌 [Connect your local project with Tina Cloud](#connect-your-local-project-with-tina-cloud)\n  - 📝 [Edit content](#edit-content)\n- ⬆️ [Deploy](#deploy)\n  - ▲ [Vercel](#vercel)\n  - [Netlify](#netlify)\n- 🗂 [Starter structure](#starter-structure)\n- 📐 [Content Modeling](#content-modeling)\n- 💡 [Local development workflow tips](#local-development-workflow-tips)\n\n## What is this?\n\nThis is a [TinaCMS](https://tina.io)-enabled Next.js app, so you can edit your content on a live page. In this project the Tina file-based CMS is used via GraphQL: it's powered by a schema that _you_ define.  It not only serves content from Markdown files in your repository, but it also generates TinaCMS forms for you automatically ✨.\n\n Feel free to read more about [why we built this](). Now, let's get started!\n\n## Fork this repository\n\nStart by **forking** the repositorty and then pull it down to your computer.\n\n## Install\n\n\u003e ℹ️ This project uses `yarn` as a package manager, if `yarn` isn't installed on your machine, open a terminal and run `npm install -g yarn`\n\nInstall the project's dependencies:\n\n```\nyarn install\n```\n\n\u003e ⚠️ If you'd like to use `npm` beware that there is no `package-lock.json` so we can't guarantee the dependencies are the same for you.\n\n## Run the project locally\n\nTo run the local development server:\n\n```\nyarn dev\n```\n\nThis command starts the GraphQL server and the Next.js application in development mode. It also regenerates your schema types for TypeScript and GraphQL so changes to your `.tina` config are reflected immediately.\n\nOne of the most interesting aspects of the Tina Cloud Content API is that it doesn't actually require anything from the Cloud to work locally. Since Tina is by default a Git-backed CMS, everything can be run from your local filesystem via the CLI.\n\nThis is ideal for development workflows and the API is identical to the one used in the cloud, so once you're ready to deploy your application you won't face any challenges there.\n\nOpen [`http://localhost:3000`](http://localhost:3000) in your browser.\n\nThe default homepage displays some basic content: a page title, a heading, and a button.\n\nClick on the **Raw JSON** link to display the corresponding structured data:\n\n```json\n{\n  \"__typename\": \"Page_Doc_Data\",\n  \"title\": \"Page Title\",\n  \"blocks\": [\n    {\n      \"__typename\": \"BlockHero_Data\",\n      \"heading\": \"Welcome to my website!\",\n      \"message\": \"This is some quality content right here. Here's another bit of text.\"\n    },\n    {\n      \"__typename\": \"BlockCta_Data\",\n      \"text\": \"Click Me\"\n    }\n  ],\n  \"_body\": null\n}\n```\n\n## Edit content locally\n\nWe need to define some local environment variables in order to run the project.\n\nCopy `.env.local.sample` to `.env.local`:\n\n```\ncp .env.local.sample .env.local\n```\n\n`NEXT_PUBLIC_USE_LOCAL_CLIENT` should be set to `1`, other values can be ignored for now.\n\nRestart your server and visit [`http://localhost:3000/admin`](http://localhost:3000/admin`),\nthe same page is displayed but you can notice a pencil icon at the bottom left corner.\n\nClick to open Tina's sidebar which displays a form with fields you can edit and see update live on the page.\nSince we're working locally, saving results in changes to your local filesystem.\n\n\u003e 🐛 issue: when adding a block and populating its content, that data on your page updates to the wrong block.\n\u003e [Watch this issue](https://github.com/tinacms/tinacms/issues/1669).\n\nRead the [folder structure](#folder-structure) section below to learn more about how this site's routing works.\n\n## Connect to Tina Cloud\n\nWhile the fully-local development workflow is the recommended way for developers to work,\nyou'll obviously want other editors and collaborators to be able to make changes on a hosted website with authentication.\n\n\u003e ℹ️ Changes from the `/admin` route show up on your home page after your site finishes a rebuild.\n\n## Register your local application with Tina Cloud\n\n1. Visit [auth.tinajs.dev](https://auth.tinajs.dev/register), create an organization, and sign in. Make a note of your orgnization name.\n2. Create an app which connects to the GitHub repository you've just forked. Once your app is created, open settings and copy the client ID.\n\n## Connect your local project with Tina Cloud\n\nIn the `env.local` file set:\n\n- `NEXT_PUBLIC_USE_LOCAL_CLIENT` to `0`.\n- `NEXT_PUBLIC_ORGANIZATION_NAME` to your Tina Cloud organization name\n- `NEXT_PUBLIC_TINA_CLIENT_ID` to the Client ID displayed in your Tina Cloud App.\n\nRestart your server and run `yarn dev` again.\n\nOpen [`http://localhost:3000/admin`](http://localhost:3000/admin`)\n\n![](public/uploads/tina-cloud-authorization.png)\n\nThis time a modal asks you to authenticate through Tina Cloud. Upon success, your edits will be sent to the cloud server (and subsequently to GitHub).\n\n#### Edit content\n\nMake some edits through the sidebar and click save.\nChanges are saved in your GitHub repository.\n\nNow that Tina Cloud editing is working correctly, we can deploy the site so that other team members can make edits too.\n\n## Deploy\n\n### Vercel\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/)\n\nConnect to your GitHub repository and set the same environment variables as the ones in your `env.local` file:\n\n```\nNEXT_PUBLIC_ORGANIZATION_NAME= \u003cYOUR_ORGANIZATION\u003e\nNEXT_PUBLIC_TINA_CLIENT_ID= \u003cYOUR_CLIENT_ID\u003e\n```\n\n![](public/uploads/vercel-congratulations.png)\n\n🎉 Congratulations, your site is now live!\n\nYou can test that everything is configured correctly by navigating to `[your deployment URL]/admin`,\nlogging in to Tina Cloud, and making some edits. Your changes should be saved to your GitHub repository.\n\n### Netlify\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/)\n\nConnect to your GitHub repository, click on **advanced** to set the same environment variables as the ones in your `env.local` file:\n\n![](public/uploads/netlify-build-settings.png)\n\n```\nNEXT_PUBLIC_ORGANIZATION_NAME= \u003cYOUR_ORGANIZATION\u003e\nNEXT_PUBLIC_TINA_CLIENT_ID= \u003cYOUR_CLIENT_ID\u003e\n```\n\nSet the **build command** to `yarn build`,\nSet the **publish directory**. To `.next/` .\n\nOnce you're done, click \"Deploy site\".\n\nInstall the [\"Next on Netlify\" plugin](https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/)\nin order to take advantage of server-side rendering and Next.js preview features.\n\nTrigger a new deploy for changes to take effect.\n\nYou can test that everything is configured correctly by navigating to `[your deployment URL]/admin`,\nlogging in to Tina Cloud, and making some edits. Your changes should be saved to your GitHub repository.\n\n---\n\n## Starter structure\n\nTina Cloud Starter is a [Next.js](https://nextjs.org) application. The file-based routing happens through the `pages` directory.\n\n### `pages/[[...slug]].tsx`\n\nThis is the only public route for the website, any path you visit will be passed in as arguments to the Content API,\nwith first value from the path being used as the `section` slug, and everything after that representing the document's path _relative_ to the configured section path. When deploying to a server, these paths are statically generated at build time.\n\n### `pages/admin/[[...slug]].tsx`\n\nThis is the route where you are able to edit your content.\nIt's protected by an authentication layer, so be sure you've set up an account in the **Getting Started** steps above.\nIt matches the routing pattern seen in `[[...slug]].tsx`.\n\nFor example, to edit `http://localhost:3000/posts/hello-world`, visit `http://localhost:3000/admin/posts/hello-world`.\n\n### `components/document-renderer.tsx`\n\nThe document renderer component demonstrates the rich development experience gained by using auto-generated types from the Tina CLI.\nThe `\u003cDocumentRenderer\u003e` shows how you can use the provided types to step through the data.\nThis a great hand-off point to your design system.\n\nIt's at this layer where the data-fetching and routing logic has already been handled, and you can focus on the look and feel of your website.\nWe've provided a few components to get you started, but the idea is to let you run with it yourself, or plug in your favorite design system.\nEnjoy!\n\n## Content Modeling\n\nWith Tina Cloud there's no need to build forms manually like you would with TinaCMS. Instead, you're required to define a schema which acts as the single source of truth for the shape and structure of your content.\n\nThis is set up for you in `./.tina/schema.ts`, let's break down what this function is doing:\n\n```ts\nimport { defineSchema } from \"tina-graphql-gateway-cli\";\n\nexport default defineSchema({\n  collections: [\n    {\n      label: \"Pages\",\n      name: \"pages\",\n      path: \"content/pages\",\n      templates: [\n        {\n          label: \"Page\",\n          name: \"page\",\n          fields: [\n            {\n              type: \"text\",\n              label: \"Title\",\n              name: \"title\",\n            },\n          ],\n        },\n      ],\n    },\n  ],\n});\n```\n\n### `defineSchema`\n\nBe sure this is your default export from this file, we'll validate the schema and build out the GraphQL API with it.\n\n### `collections`\n\nThe top-level key in the schema is an array of _collections_, a `collection` informs the API about _where_ to save content. You can see from the example that a `pages` document would be stored in `content/pages`, and it can be the shape of any `template` from the `templates` key.\n\n### `templates`\n\nTemplates are responsible for defining the shape of your content, you'll see in the schema for this starter that we use `templates` for `sections` as well as `blocks`.\n\n## Local development workflow tips\n\n### Guided tour\n\nWatch our [walkthrough video](https://www.loom.com/share/e62776f138ec485d81d71c68364857a8) to see on how you can leverage the tooling provided and get the most out of the starter.\n\n### Typescript\n\nA good way to ensure your components match the shape of your data is to leverage the auto-generated TypeScript types.\nThese are rebuilt when your `.tina` config changes.\n\n### Visual Studio Code\n\n#### GraphQL extension\n\nTina Cloud generates your GraphQL schema automatically. 🪄\n\n[Install GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to benefit from type auto-completion.\n\n#### Forestry Schema extension\n\n[Install Forestry extension](https://marketplace.visualstudio.com/items?itemName=jeffsee55.forestry-schema) to lint your YAML-based content models.\n\n### Explore the GraphQL API\n\nIf you have a GraphQL client like [Altair](https://altair.sirmuel.design/) go to `http://localhost:4001/graphql` to learn more about our GraphQL API.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitchmac%2Ftina-cloud-starter-april-19","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitchmac%2Ftina-cloud-starter-april-19","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitchmac%2Ftina-cloud-starter-april-19/lists"}