Adding TinaCMS to an Existing Site

This doc assumes that you have a working site. If not, you can quickly get started with our default Astro starter, or one of the other starters in the CLI.

Adding TinaCMS

We created a quick way to bootstrap a TinaCMS application to show the power of visual editing; from your terminal, enter the following command:

For help with the prompts for non-NextJS based sites, see this guide.

This command will ask you a few questions, and sets up the TinaCMS boilerplate in your application:

  1. Installs all required dependencies for TinaCMS.
  2. Defines a basic content schema in the tina directory.
  3. Creates example content in the demo directory.
  4. (NextJS-only): Edits the package.json to have the dev, build, and start scripts run the tina GraphQL API.

Updating your build scripts

Depending on your framework, tina init may try to update your package.json scripts.

NextJS Example

Hugo Example

These should be applied manually if they haven't been set by the CLI.

A quick test

Now that we have a basic TinaCMS boilerplate setup, you can launch your application using the following command:

When TinaCMS is initialized on a NextJS site, a "/admin/index.html" page is created to allow editors to log in and begin to make content changes.

Now, if you navigate to http://localhost:3000/admin/index.html (assuming your site runs on port 3000), you should see a new CMS landing page has been added to your site!

Commit the tina-lock.json file

<strong>Important:</strong> Running <code>tinacms dev</code> (or <code>yarn dev</code> if your dev script wraps it) generates a <code>tina/tina-lock.json</code> file. This file <strong>must be committed and pushed to your repository</strong> for TinaCloud to index your content and branches. Without it, TinaCloud will not be able to detect your schema, and your branches will remain unindexed.

After running your dev command for the first time, make sure to commit and push the generated tina/tina-lock.json:

Many frameworks offer a way to redirect /admin/index.html to /admin.

Figure: The TinaCMS login screen at /admin

Next we'll show you how to use the CMS and start editing some content!

Last Edited: February 4, 2022