Tina CMS
Table of Contents
I have used Strapi and recently Sanity and now it’s time for TinaCMS.
TinaCMS
TinaCMS is an open-source, headless CMS that supports Git, with built-in version control.
When they say git and version control it feels like Bruno API Client.
Getting started with New Project:
Create a new Next.js project
npx create-next-app@latest my-tina-blog
cd my-tina-blog
Install Tina
npx @tinacms/cli@latest init
Install additional required dependencies
npm install tinacms @tinacms/cli
┌─(~/Desktop/Projects/TS/Tina CMS)─────────────────────────────────(atulyaraaj@pavilion-pc:pts/1)─┐
└─(14:45:11)──> # Create a new Next.js project ──(Mon,Jan13)─┘
npx create-next-app@latest my-tina-blog
cd my-tina-blog
# Install Tina
npx @tinacms/cli@latest init
# Install additional required dependencies
npm install tinacms @tinacms/cli
Need to install the following packages:
create-next-app@15.1.4
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /home/atulyaraaj/Desktop/Projects/TS/Tina CMS/my-tina-blog.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc
added 377 packages, and audited 378 packages in 60s
144 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created my-tina-blog at /home/atulyaraaj/Desktop/Projects/TS/Tina CMS/my-tina-blog
Need to install the following packages:
@tinacms/cli@1.8.0
Ok to proceed? (y) y
✔ What framework are you using? › Next.js
✔ Choose your package manager › Yarn
✔ Would you like to use Typescript for your Tina Configuration (Recommended)? … yes
Adding node_modules,.env to .gitignore
Adding file at content/posts/hello-world.md... ✅
Adding file at src/pages/demo/blog/[filename].tsx... ✅
Adding a nextjs example... ✅
Adding dependencies, this might take a moment...
┃ yarn add tinacms
Adding dev dependencies, this might take a moment...
┃ yarn add -D @tinacms/cli @types/node
Adding file at tina/config.ts... ✅
TinaCMS has been initialized!
To get started run: yarn dev
To get your site production ready, run: tinacms init backend
Once your site is running, access the CMS at <YourDevURL>/admin/index.html
Run `npm audit` for details.
Running the project: yarn dev
┌─(~/Desktop/Projects/TS/Tina CMS/my-tina-blog)────────────────────(atulyaraaj@pavilion-pc:pts/1)─┐
└─(14:51:37 on main ✹ ✭)──> yarn dev ──(Mon,Jan13)─┘
yarn run v1.22.22
$ TINA_PUBLIC_IS_LOCAL=true tinacms dev -c "next dev --turbopack"
Starting Tina Dev Server
Indexing local files ⠋
│
○ Tina Dev Server is running... ──────────────────────────────────────────╮
│ │
│ 🦙 Tina Config │
│ CMS: <your-dev-server-url>/admin/index.html │
│ API playground: <your-dev-server-url>/admin/index.html#/graphql │
│ API url: http://localhost:4001/graphql │
│ │
│ 🤖 Auto-generated files │
│ GraphQL Client: tina/__generated__/client.ts │
│ Typescript Types: tina/__generated__/types.ts │
│ │
│ │
├──────────────────────────────────────────────────────────────────────────╯
Starting subprocess: next dev --turbopack
▲ Next.js 15.1.4 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.1.103:3000
The new project works on latest tech yet!
"next": "15.1.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tinacms": "^2.6.0"
Tina Admin
Visit: http://localhost:3000/admin/index.html
This new project seems a bit confusing at first.
After creating this project, going through this documentation will be good.
following the documentation just about you should be end up with this:
- Route: /posts
A clickable list of blogs from content/posts
Preview of md file data.
This will give you basic about the TinaCMS.
Tina Cloud Starter
Clone this Github repository: https://github.com/tinacms/tina-cloud-starter
This will a good starter to start with.
They have:
- pages
- Blogs
- Author
- Mdx suppport
Creating a new blog:
Visit the admin at http://localhost:3000/admin/index.html
In Collections check, Blog Posts:
Here you can see the list of blogs added:
Click on Add files to add a new blog:
Blogs post is not being shown in Blogs page in site.
I have created a new blog post with an image and that is not being fetched in frontend.
It’s the caching problem. You can remove generated directory inside tina directory in root.
If that didn’t work remove .next too!
30 Jan 2025
So, today I would like to use TinaCMS with cloud too and see how it will help me add content without getting to the code.
- Cloning the project again:
git clone https://github.com/tinacms/tina-cloud-starter.git
- Install packages
pnpm i
- Setting up the ENV
# These are retrieved from your project at app.tina.io
NEXT_PUBLIC_TINA_CLIENT_ID=***
TINA_TOKEN=***
- Visit: app.tina.io
Verify self and login into your dashboard of TinaCMS.
- Creating project:
Well seems like Github is required for this.
