Gatsby Starter Gnonce

Gatsby + Typescript + Styled Components = 💖

👩‍💻 Features

• Google Lighthouse optimized (100/100)
• Search engine optimization
• Social media and meta tags
• One icon favicons
• Manifest support
• Sitemap support
• Offline support
• Easy to use media queries
• Custom routes using separate routing file
• Using Typescript
• Using styled-components
• Using Prettier
• Using tslint

🚀 Quick start

1. Create a Gatsby site.

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

   # create a new Gatsby site using the Gnonce starter
   gatsby new awesome-site https://github.com/gnonce/gatsby-starter-gnonce

2. Start developing.

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

   cd awesome-site/
   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 awesome-site directory in your code editor of choice and edit src/containers/index.tsx. Save your changes and the browser will update in real time!

⚡️ Deploy

Get your Gatsby site in 1 min.

Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites and web apps. They provide continuous deployment (Git-triggered builds), an intelligent, global CDN, full DNS (including custom domains), automated HTTPS, asset acceleration, and a lot more.

Read more about deploying your Gatsby site to Netlify or some other provider!

🛣 Routing

This starter uses custom routing plugin to separate routing configurations into external configuration file. Routes are defined in /src/routes.ts file by default. Path to external config can be changed in gatsby-config.js file.

Example on how to map component to route using routes.ts

// In your routes configuration file (routes.ts)
const path = require('path');
module.exports = [
  {
    path: '/',
    component: path.resolve(`src/containers/Home.jsx`)
  },
  {
    path: '/404/',
    component: path.resolve(`src/containers/404.js`)
  }
];

🤓 What's inside?

└── static
    ├── assets
    │   └── thumbnail
└── src
    ├── images
    │   └── icon
    ├── components
    │   ├── Head
    │   ├── Heading
    │   └── Image
    ├── layout
    │   └── index
    ├── containers
    │   ├── index
    │   └── 404
    ├── styles
    │   ├── globalStyles
    │   ├── styleUtils
    │   ├── theme
    │   └── typography
    └── templates