Quick Setup

To quickly setup a new Tina starter, from the command line, run:

npx create-next-app --example https://github.com/tinacms/tina-cloud-starter
# or
yarn create next-app --example https://github.com/tinacms/tina-cloud-starter

To run the starter, run:

yarn dev

Testing out Tina

To start editing, with the starter running, navigate to http://localhost:3000/admin. This allows you to enter edit-mode. Now navigate back to any page, start making edits, and see your local markdown files being updated!.

Manual Setup (on an existing site)

The tina init command can be used to bootstrap Tina within your existing NextJS application.

From the command line, run:

npx @tinacms/cli@latest init

Now run you project along with the Tina graphql API with:

yarn tina-dev

Testing out Tina

Let's assume your local site runs on port 3000.

Navigate to http://localhost:3000/demo/blog/HelloWorld. This is a new page created for you for demo purposes. You won't be able to edit right away, you'll first need to enter edit mode.

To enter edit mode, navigate to http://localhost:3000/admin.

Selecting the pencil in the bottom left allows you to edit the title and the body of the page right in the frontend. When you hit save, that will save your changes to the Markdown file.

Want to see your changes? Open up the file located at /content/HelloWorld.md and the changes you've made will be there!

Last Edited: October 18, 2021