Gatsby Starters & Templates Logo Gatsby Starters & Templates
Gatsby Starter Procyon screenshot

Gatsby Starter Procyon

Author Avatar Theme by Danielmahon
Updated: 13 Apr 2018
85 Stars

An opinionated Gatsby starter designed for trash-eating pandas.

Github Live Preview

Categories

React Material ui

Overview

The Gatsby Starter Procyon is an opinionated Gatsby starter designed for trash-eating pandas. It incorporates various features such as Gatsby + ReactJS for server-side rendering, GraphCMS Headless CMS, DraftJS for in-place editing, Apollo GraphQL for client-side functionality, Material-UI for layout and components, and Netlify for deployment. This starter also includes versioning and CHANGELOG generation based on git commits via the versionist tool. It offers features such as PWA (Progressive Web App) support and integration with Google Fonts. The theme is aimed at providing an easy setup for creating and editing blog posts using the GraphCMS CMS platform.

Features

  • Gatsby + ReactJS (server side rendering)
  • GraphCMS Headless CMS via gatsby-source-graphcms
  • DraftJS (in-place) Medium-like Editing
  • Apollo GraphQL (client-side)
  • Local caching between builds
  • Material-UI (layout, typography, components, etc)
  • Styled-Components™-like API via Material-UI
  • Netlify Deployment Friendly
  • Netlify Identity Authentication (enables editing)
  • Versionist automated deployment and CHANGELOG
  • Automatic rebuilds with GraphCMS and Netlify web hooks
  • PWA (Progressive Web App)
  • Google Fonts
  • Trash Panda Approved

Coming Soon™

  • Enhanced styled API supporting React.forwardRef and props
  • Dynamic page and section creation
  • Example on how to use Markdown AST to render components
  • Transactional emails
  • Contact form and message management
  • Links to sites that used gatsby-starter-procyon

Installation

  1. Make sure that you have the Gatsby CLI program installed.
  2. Run the following command: npm install -g gatsby-cli
  3. Create an account at GraphCMS and create a new project using the blog template.
  4. Add at least one “Blog Post” to the CMS, filling out the required fields (title, coverImage, content, slug).
  5. Create .env.development and .env.production files in the root folder and add the following environmental variables with your token and endpoint:
    • GRAPH_CMS_TOKEN=your_graph_cms_token
    • GRAPH_CMS_ENDPOINT=your_graph_cms_endpoint
  6. Run the following command to start the application: gatsby develop
  7. Navigate to https://localhost:5000 in your browser to view the application.

Summary

The Gatsby Starter Procyon is a feature-rich starter theme for Gatsby that incorporates various technologies and tools to create a powerful and easily customizable website. It includes features like server-side rendering, a Headless CMS, in-place editing, client-side functionality, and deployment and versioning automation. The theme is designed to be user-friendly, with easy installation and setup instructions. Overall, this starter theme offers a comprehensive solution for building and editing websites using Gatsby and GraphCMS.