Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kendallstrautman/brevifolia-gatsby-tinacms

A simple starter blog built with Gatsby & TinaCMS
https://github.com/kendallstrautman/brevifolia-gatsby-tinacms

gatsby tina tinacms

Last synced: 3 months ago
JSON representation

A simple starter blog built with Gatsby & TinaCMS

Host: GitHub
URL: https://github.com/kendallstrautman/brevifolia-gatsby-tinacms
Owner: kendallstrautman
License: mit
Created: 2019-11-01T17:58:00.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-01-11T19:45:07.000Z (about 2 years ago)
Last Synced: 2023-05-04T08:36:29.877Z (almost 2 years ago)
Topics: gatsby, tina, tinacms
Language: CSS
Homepage: https://brevifolia-gatsby-tinacms.netlify.com/
Size: 75.1 MB
Stars: 18
Watchers: 2
Forks: 2
Open Issues: 16
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Brevifolia

## About

[![Netlify Status](https://api.netlify.com/api/v1/badges/314f6fb1-b4a6-484a-ad3d-c26663a63bca/deploy-status)](https://app.netlify.com/sites/brevifolia-gatsby-tinacms/deploys)

Brevifolia is minimalist blog starter to get you going using [TinaCMS](https://tinacms.org) with [Gatsby](https://www.gatsbyjs.org/). Check out the demo [here](https://brevifolia-gatsby-tinacms.netlify.com/). A live version of the Tina demo in the cloud is coming soooon 😊

This blog is statically generated by Gatsby, a rendered combination of react components and markdown 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 [scss](https://sass-lang.com/) with [css modules](https://github.com/css-modules/css-modules) (which are [inherently support by gatsby](https://www.gatsbyjs.org/docs/css-modules/)) and the [bem](http://getbem.com/) naming convetion. The font used is [Work Sans](https://fonts.google.com/specimen/Work+Sans).

## Quick Setup

#### *Using the Gatsby CLI*
In your terminal, navigate to where you would like this blog to live, then run
```bash
gatsby new [SITE_DIRECTORY_NAME] https://github.com/kendallstrautman/brevifolia-gatsby-tinacms
cd [SITE_DIRECTORY_NAME]
yarn dev
```
#### *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-gatsby-tinacms.git

#navigate to the directory
cd brevifolia-gatsby-tinacms

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

#or with npm
npm install
npm run dev
```
A new browser window should open with the dev server running or you can navigate to localhost:8000

### Plugins

With Gatsby offering a plugin-rich ecosystem, there are a few key plugins that make this project possible.

- [Gatsby-plugin-tinacms](https://github.com/tinacms/tinacms/tree/master/packages/gatsby-plugin-tinacms) allows us to use TinaCMS with Gatsby
- [Gatsby-tinacms-git](https://github.com/tinacms/tinacms/tree/master/packages/gatsby-tinacms-git) does the Tina magic for talking to Git
- [Gatsby-tinacms-json](https://github.com/tinacms/tinacms/tree/master/packages/gatsby-tinacms-json) helps us edit json data in our form fields.
- [Gatsby-tinacms-remark](https://github.com/tinacms/tinacms/tree/master/packages/gatsby-tinacms-remark) helps us edit markdown content from the blog.
- [Gatsby-image](https://using-gatsby-image.gatsbyjs.org/) optimizes image loading and provides the correct file paths for output.
- [Gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/?=gatsby-tranf) gives us access to and transforms the markdown files, using also [gatsby-remark-images](https://www.gatsbyjs.org/packages/gatsby-remark-images/?=gatsby-remark), [gatsby-remark-normalize-paths](https://www.gatsbyjs.org/packages/gatsby-remark-normalize-paths/?=gatsby-remark-no), & [gatsby-remark-relative-images](https://www.gatsbyjs.org/packages/gatsby-remark-relative-images/?=gatsby-remark-re) to make sure the content in the markdown works properly.
- [Gatsby-transformer-json](https://www.gatsbyjs.org/packages/gatsby-transformer-json/?=gatsby-tranfor) allows us to use the data in .json files.
- [Gatsby-plugin-sass](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/?=gatsby-plugin-sass) lets us write styles using scss or sass.
- [Gatsby-plugin-react-helmet](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/?=gatsby-plugin-react) extends the well-known react-helmet, allowing you to adjust content in the ‘head’ of your components.

## Project Structure

- Site-level configuration is stored in `config.json`. This file is loaded in the `gatsby-config.js` to configure Gatsby and all it to be accessible via siteMetaData in your graphql queries.
- Access any of Gatsby's [browser api's](https://www.gatsbyjs.org/docs/browser-apis/) via the `gatsby-browser.js`, or load global styles etc.
- Add and access plugin options or siteMetaData via `gatsby-config.js`
- Access Gatsby's [node api's](https://www.gatsbyjs.org/docs/node-apis/) via `gatsby-node.js`. This is where the creation of new blog pages or nodes is handled.
- Edit styles via `src/styles/...`
- `content/`contains all your markdown blog posts, images & data files (e.g. authors list, info page data).
- `src/pages` is a very important and required directory for Gatsby. This is where all your pages for the site live.
- Blog posts are built from a template that can be accessed at `src/templates`.
- The pages & template are comprised of components from `src/components`.

## 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

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kendallstrautman/brevifolia-gatsby-tinacms)

[Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) is a great way to easily deploy sites.