kendallstrautman / brevifolia-next-tinacms

A simple starter blog built with Next.js & TinaCMS

Brevifolia

Note: 03.13.20 — A lot of updates were recently made that change some fundamental Tina + Next.js configuration. Specifically the new Media Store, fixing the router config, altering how sidebar options are passed in, and implemented the next-tinacms helper packages to create forms on all pages. Everything in the source code should be up to date in line with latest from Tina 🦙.

About

Brevifolia is minimalist blog starter to get you going using TinaCMS with Next.js. Check out the demo here.

This blog is statically generated by Next.js, a rendered combination of react components and Markdown / JSON files. It is preconfigured to work with TinaCMS as a way to manage your content. Tina makes changes by editing Markdown or JSON files, uploading media to the correct directory and committing these updates to your repo directly.

The styles were coded & designed by yours truly, using styled-jsx (which is inherently supported by Next.js). The font used is Work Sans.

The structure of this blog with TinaCMS is based on the documentation, since Next.js is such a flexible framework, there's lots of ways you could approach using Tina with it. Checkout the documentation for some insight on how this site was setup with Tina + Next.

Quick Setup

Set-up Locally

In your terminal, navigate to where you would like this blog to live, then run

#clone the repo
git clone [e-mail]:kendallstrautman/brevifolia-next-tinacms.git

#navigate to the directory
cd brevifolia-next-tinacms

#install dependencies & run dev server with yarn
yarn install
yarn develop

#or with npm
npm install
npm run develop

This will start a dev server, navigate to localhost:3000. Note that the script dev doesn't start the git server which you need running to use Tina locally. Use develop whenever trying to make edits with Tina.

Project Structure

• Site-level configuration is stored in data/config.json. This is editable by Tina when you are on the home page.
• Edit styles within each component or page file within the <style jsx> tags.
• Global styles live in the Meta component.
• posts/contains all your markdown blog posts.
• static/ is where you images live and will get uploaded.
• pages is where you page components live.
• The blog pages are dynamically generated with a slug parameter. See the template in pages/blog/[slug].js.
• The pages & template are comprised of components from components.
• The routes are generated in next.config.js with exportPathMap

Using Tina as your CMS 🦙

Tina is an open-source site editing toolkit for React-based frameworks — Gatsby & Next.js. It's a lightweight but powerful toolkit for creating a content editing interface with JavaScript components. Tina allows you to create an intuitive UI for real-time content editing, built directly into your site. To learn more about using Tina with this starter, head over to the Tina docs. To get started editing with Tina, get the project up and running locally, open up the UI and navigate around to see what you can edit!

Deploy Options

Vercel is a cloud platform for static sites and Serverless Functions. It enables developers to host JAMstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

To easily deploy this starter, click the button above. You may need to create an account with Vercel and configure your git repository access preferences. For the deploy configuration settings, just use all the default commands provided by Vercel.