David Konsumer, from our Discord community, shows us how he likes to set up a new TinaCMS project in this getting started tutorial.

This video is a great introduction to Tina and covers a lot. By the end of it, you should have a good understanding of how TinaCMS works and how to customize it. See the timestamps below and the final source code here.

Setup Tina

00:30 - Install Node.js & TinaCMS
04:18 - Look at files in the TinaCMS Barebones Starter
05:00 - Customize package.json

Quick look at the Tina Schema

07:40 - Break out schema to separate files
09:15 - Rename “posts” to “blog”
11:58 - Look at Media configuration

Convert file formats to MDX and fix navigation

13:22 - Change home page to use file format from Markdown to MDX
16:35 - Fix navigation links
21:03 - Look at project structure

Setup home to use blocks

23:10 - Add a block to Schema with a single “Row” field
28:15 - Make home use JSON instead of MDX
29:29 - Look at how data gets into the page
35:15 - Render content to the page
40:10 - Add a Title field to the block and use it for the list of blocks in the CMS UI

Create a custom input field for the Rich Text editor

46:30 - Overview
49:00 - Create new component for custom image embed

Last Edited: September 19, 2022