gatsby-starter-emotion-theme

An extension of the gatsby-starter-default repository, made to get up and running quicker with standard marketing microsites.

💫 Deploy

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the emotion starter.

   # create a new Gatsby site using this starter
   gatsby new my-default-starter https://github.com/jackoliver/gatsby-starter-emotion-theme

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-default-starter/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

Plugins used

• gatsby-plugin-emotion
• gatsby-alias-imports

Packages used

• @emotion/core
• @emotion/styled
• emotion-reset
• emotion-theming

📂 Folder structure

By using gatsby-alias-imports, we can define alias paths to the modules and components we require, making it easier to import and re-use code across multiple pages and layouts.

For example, this:

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

turns into:

import { Default as Layout } from 'layouts'
import { Image, SEO } from 'components'

Benefits

1. Multiple layouts can be created very easily on a per-page level.
2. Components can be imported in one line.
3. Modules can also be imported in one line.

The full folder structure looks like this:

.
├── node_modules
├── src
│   ├── components
│   ├── config
│   ├── images
│   ├── layouts
│   ├── modules
│   └── pages
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with the in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to the documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.