California Gatsby Blog Theme

By gatsbytemplates.io

New beautiful Gatsby theme for creative bloggers

Demo

Features

  • Page transitions and animations using framer motion
  • Multiple posts layouts - row, grid, masonry grid
  • Minimal responsive design
  • Light and dark themes
  • Customizable color schemes, using Theme UI
  • Post scrolling progress bar
  • MDX posts support
  • Good SEO
  • Styles using tailwind css inside styled-components powered by Emotion
  • Post Categories
  • Pagination
  • Offline support (PWA)
  • Subscription and contact forms
  • Mailchimp support

Installation

Using Starter

This will generate a new themed site to use Gatsby Theme California with default content and pages.

From current directory, run:

gatsby new project-name ./gatsby-starter-california

Using as a theme

NOTE: method of theme delivery will be improved in future, our team currently working on this. Currently we can't put theme in public npm repository by obious reasons. So we are using private github repos and ssh-keys for access.

  1. Install theme:
npm i https://8626f9d1cd17b83c8661d046f1593c1590c07243:x-oauth-basic@github.com/vse-volod/gatsbyheme-california.git@1.0.0

where before :x-ouath your secure token(DO NOT SHOW IT TO ANYONE). And in the end of line after "@" version of the theme

  1. Install theme dependencies:
npm i twin.macro

It's the library that allows you to use Tailwind classes within any CSS-in-JS library

  1. Create tailwind.config.js in root of your project with re-export of theme tailwind config:
// tailwind.config.js
module.exports = require("gatsby-theme-california/tailwind.config.js");
  1. Add the theme to your gatsby-config.js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-california',
      options: {
        // Scroll docs to see more info about configuration
      },
    },
  ],
}

Usage

Theme Options

Key Default Value Description
basePath / Root URL for this theme.
contentPath content/blog Location of markdown files used for the posts.
assetsPath content/assets Location of hero images, etc
blogPathPrefix - Path prefix for blog pages. Required for progress bar
transitions true Use page and image transitions powered with framer-motion
postsPerPage 3 How much posts shown on each page of posts page template
layout row Type of post layout. Three options available: row, grid, masonry
progressBarIncludePaths blog Pages where progress bar will be displayed. Can be string or array. For more info refer to gatsby-plugin-page-progress docs
progressBarExcludePaths - Pages where progress bar will be disabled. Array only(e.g. ["/blog/beep-beep-lettuce"])
progressBarColor #FCFC00 Color of progress bar
mailchimpEndpoint - Mailchimp enpoint for collecting emails using subscription form

Example Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-california',
      options: {
        layout: 'row',
        blogPathPrefix: 'blog',
      },
    },
  ],
}

Additional Configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // site title, also displayed on MainHero component
    title: 'California Dreamin’',
    author: 'Frank',
    // displayed on MainHero component 
    description: 'Hi! I’m Frank and I’ll tell you the story of my life',
    // footer copyright message
    copyright: 'All the materials are owned by their respective owners',
    siteUrl: 'https://gatsbytemplates.io/',
    // your email for contact that will be showed in about page
    email: 'info@gatsbytemplates.io',
  
    // link to your social network profiles on about page, supported all below:
    social:
    [
      {
        name: 'twitter',
        url: 'https://twitter.com/gatsbytemplates',
      },
      {
        name: 'instagram',
        url: 'https://instagram.com/',
      },
      {
        name: 'linkedin',
        url: 'https://linkedin.com/',
      },
      {
        name: 'youtube',
        url: 'https://youtube.com/',
      },
      {
        name: 'facebook',
        url: 'https://facebook.com/',
      },
      {
        name: 'pinterest',
        url: 'https://pinterest.com/',
      },
    ],

    // Defining menu links to your pages:
    menu: [
      {
        name: 'Home',
        url: '/',
      },
      {
        name: 'About',
        url: '/about',
      },
      {
        name: 'Posts',
        url: '/posts',
      },
      {
        name: 'Categories',
        url: '/categories',
      },
    ],
  },
}

Color Customization

Gatsby Theme California utilizes Theme UI. You can change all specified in theme colors using method described below:

// src/gatsby-plugin-theme-ui/index.js

import californiaTheme from 'gatsby-theme-california/src/gatsby-plugin-theme-ui'

export default {
  ...californiaTheme,
  colors: {
    ...californiaTheme.colors,
    background: '#FBFBFB',
  },
}

Style customization

This theme using tailwind-ui inside of styled components powered by Emotion. Example:

import tw from 'twin.macro';
import styled from '@emotion/styled';

const Date = styled.div`
  ${tw`
    uppercase px-6 font-body
  `}
  color: ${(p) => p.theme.colors.light};
`;

export default Date;

inside ${tw``} you define tailwind styles, and outside you can use ordinary styled components style, including ThemeUI pre-defined colors.

For tailwind classes customization, use tailwind.config.js* in root of your project. Refer to official tailwind docs. Don't forget to import gatsby-theme-california tailwind config.

*changes of this file my require reload of gatsby development server(due to current twin.macro limitations)

Components customization

Use component shadowing, following official docs

Writing Content

Posts are written in markdown / mdx format with either .md or .mdx and placed in the content/blog directory at the root of the site unless a different contentPath is defined in the theme options. There are four frontmatter variables used in the theme which are shown below.

---
title: Hello World
date: 2020-02-02
image: image.jpg
category: Sport
---

Any questions?

Feel free to contact us on info@gatsbytemplates.io

Made by Jason, Chris and Shawn

© 2020 Builtneat, Inc. All rights reserved.