Skip to content
Opinionated Gatsby starter by Ueno.
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 54 commits ahead, 355 commits behind gatsbyjs:master.

README.md

logo

banner

about

Ueno Gatsby Starter

Kick off your project with this opinionated boilerplate. This barebones starter ships with the main Gatsby configuration files you might need.

Installation

Install create-ueno-app:

npm install -g create-ueno-app
yarn global add create-ueno-app

Create your app:

create-ueno-app gatsby my-app
Alternative setup

You also have the choice to use gatsby-cli to setup your project without installing create-ueno-app.

npm install -g gatsby-cli
gatsby new my-app "https://github.com/ueno-llc/ueno-gatsby-starter#master --recursive"

We recommend you changing straight away src/components/link/Link.tsx which is use for our 3 starter kits. You probably want something similar to that: Link.tsx.

Things to know

There are couple of things that are good to know about this starter, compared to the default gatsby starter.

TypeScript

We encourage TypeScript usage and have included basic linting.

  • Avoid export default ... - the only place you absolutely need to do this is in ./pages/*. Rather export const Module = ... and import { Module } from './file' (details)

See the TypeScript Handbook for more tips and tricks

SCSS

All .scss and .sass imports will:

Take the following code snippet as an example:

import React from 'react';
import s from './my-styles.scss';

export const Button = ({ disabled, children }: { disabled: boolean, children: React.ReactNode }) => (
  <button className={s('button', { disabled })}>{children}</button>
);

SVG

You can import SVG files as React components by placing them in the ./src/assets/svg folder.

Usage:

import React from 'react';
import Logo from 'assets/svg/logo.svg';

export const Header = () => (
  <header>
    <Logo style={{ color: 'blue' }} />
  </header>
);

Deploy

Deploy to Netlify

Deploy to Heroku

You can’t perform that action at this time.