seemoine / next-tinacms-blog-kit

Blog Starter for your next blog, portfolio or online publication using Next.js, Tina CMS and Tailwind CSS.

A free and open-source starter by MakerKit.

Blog Starter Template with Next.js, Tina CMS, MDX and Tailwind CSS

This Blog Starter is the perfect foundation for writing your next blog, portfolio or online publication using Next.js, Tina CMS and Tailwind CSS.

Features

• ✅ Responsive, fast and ready-to-deploy Next.js Blog Starter
• 📄 Write your articles with all the power of Tina CMS and MDX
• ⚡ Live-reloading MDX content
• 🚀 Search Engine Optimized (SEO) out-of-the-box
• 📂 Sitemap and RSS generated automatically
• 🎨 Dark and Light themes
• ✨ Written with strict Typescript, validated with EsLint, formatted with Prettier
• 👨‍💻 Developed, maintained and used by Makerkit

Getting Started

Clone the repository:

git clone https://github.com/makerkit/next-tinacms-blog-kit

Rename your project and jump into the folder.

Install Node dependencies

Install the Node dependencies:

npm i

Initialize Tina CMS

Initialize Tina CMS with the following command:

npx @tinacms/cli@latest init

When Tina prompts to override your App component, reject by typing "n" (it's already set up):

✔ do you want us to override your _app.tsx? … no

This command will generate some redundant files; feel free to remove them.

Decorate the following commands with --experimentalData to enable querying and filtering your graphql content with Tina:

"dev": "NODE_ENV=development tinacms server:start -c \"next dev\" --experimentalData",
"build": "tinacms server:start -c \"next build\" --experimentalData",
"start": "tinacms server:start -c \"next start\" --experimentalData",

NB: do not forget to prefix the dev command with NODE_ENV=development.

Setting up the Tina CMS schema

Copy the contents of the file schema.template and override the content of schema.ts. Tina CMS will initialize the correct GraphQL schema based on the schema we provided.

Run the application

Then, run the development server:

npm run dev
# or
yarn dev

1. Visit http://localhost:3000 to see your blog
2. Visit http://localhost:3000/admin to access the Tina CMS admin
3. Visit http://localhost:4001/altair to access the GraphqQL playground

Remove .tina from the .gitignore file, and remember to check it in, so that your builds will be able to use the folder.

Inline Tina Editor

Because Tina lazy-loads the inline editor in production mode, but does not disable it, I thought the best compromise was to dynamicaly add the editor based on a variable.

By default, the editor is loaded only if the URL contains a query parameter named tina. You can change this logic as you prefer in _app.tsx.

Using Tina Cloud?

If you're also using Tina Cloud, remember to add the NEXT_PUBLIC_TINA_CLIENT_ID environment variable, either from a .env file or from your Vercel console (or other provider).

You will find the Client ID environment variable in the Tina CMS Dashboard.

Setting the upstream folder

If you want, reinitialize the git repository and set this repository as your upstream, so you can continue getting updates:

rm -rf .git
git init
git remote add upstream https://github.com/makerkit/next-tinacms-blog-kit

To keep your repository up-to-date with this, use git pull:

git pull upstream main 

Solve the eventual conflicts and merge 😃

Configuration

Open the configuration file at ./configuration.ts. It will have the following content:

const configuration = {
  site: {
    name: '',
    description: '',
    themeColor: '',
    siteUrl: '',
    siteName: '',
    twitterHandle: '',
    githubHandle: '',
    language: 'en',
  },
  blog: {
    maxReadMorePosts: 6,
  },
  production: process.env.NODE_ENV === 'production',
};

Update it with your own data, or leave as is to begin with.

Enter the Tina CMS Admin

After starting the development server, access the following URL: https://localhost:3000/admin.

Time to get writing!

Add Articles, Categories and Authors manually

Before creating a blog post, we define which collection it belongs to and the author of the post.

To define a category, create a JSON file at content/categories:

{
  "name": "Tutorials",
  "emoji": "🖥️"
}

Alternatively, you can choose to assign a picture to each collection (or neither):

{
  "name": "Tutorials",
  "picture": "/assets/images/tutorials.png"
}

Next, we need to add the author of the article. Add a JSON file at _authors:

{
  "name": "MakerKit",
  "picture": "/assets/images/makerkit.png",
  "url": "https://twitter.com/makerkit_dev"
}

We can now create a blog post. Add an MDX file at _posts:

---
title: 'Dextera Sibi Orbes'
category: 'content/categories/lorem-ipsum.json'
author: 'content/authors/makerkit.json'
date: 2022-03-30
live: true
image: ''
description: "Lorem markdownum ictu; leti quae, paenituisse venere. Liquet praemia omne di
amarunt dicta."
---

As you can see, the properties category and author are references to the path of each.

Deploy on Vercel

The easiest way to deploy this app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.