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. A live version of the Tina demo in the cloud is coming soooon 😊. Checkout the Gatsby version 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 git@github.com: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.
• src/posts/contains all your markdown blog posts.
• src/static/ is where you images live and will get uploaded.
• src/pages is where you page components live.
• The blog pages are dynamically generated with a slug parameter. See the template in src/pages/blog/[slug].js.
• The pages & template are comprised of components from src/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

Netlify is a great way to easily deploy sites.