Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kendallstrautman/brevifolia-next-tinacms
A simple starter blog built with Next.js & TinaCMS
https://github.com/kendallstrautman/brevifolia-next-tinacms
nextjs react tina tinacms
Last synced: 5 days ago
JSON representation
A simple starter blog built with Next.js & TinaCMS
- Host: GitHub
- URL: https://github.com/kendallstrautman/brevifolia-next-tinacms
- Owner: kendallstrautman
- Created: 2019-11-05T15:17:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:15:41.000Z (almost 2 years ago)
- Last Synced: 2023-03-03T10:52:08.274Z (over 1 year ago)
- Topics: nextjs, react, tina, tinacms
- Language: JavaScript
- Homepage: https://brevifolia-next-tinacms.now.sh/
- Size: 69.4 MB
- Stars: 71
- Watchers: 3
- Forks: 35
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://github.com/kendallstrautman/brevifolia-next-tinacms/commit/207db822a942532c8288f121b2b2cf6fa13ce919), fixing the [router config](https://github.com/kendallstrautman/brevifolia-next-tinacms/commit/73c1e41f1e947b20ad71cc2ea368854c13f50182), altering how [sidebar options](https://github.com/kendallstrautman/brevifolia-next-tinacms/commit/2b5dfb5493d98162bec7817bf177f92ce568e973) are passed in, and implemented the next-tinacms helper packages to [create forms](https://github.com/kendallstrautman/brevifolia-next-tinacms/commit/eb4c1703500444c444b8d16d6255103a93feaf52) 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](https://tinacms.org) with [Next.js](https://nextjs.org/). Check out the demo [here](https://brevifolia-next-tinacms.now.sh).
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](https://github.com/zeit/styled-jsx) (which is inherently supported by [Next.js](https://nextjs.org/docs#built-in-css-support)). The font used is [Work Sans](https://fonts.google.com/specimen/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](https://tinacms.org/docs/nextjs/overview) 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
```bash
#clone the repo
git clone [email protected]: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 `` 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](https://tinacms.org) 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](https://tinacms.org/docs/getting-started/introduction). 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
[](https://vercel.com/import/project?template=https://github.com/kendallstrautman/brevifolia-next-tinacms)
[Vercel](https://vercel.com/docs/v2/introduction) 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.