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




Ueno Gatsby Starter

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


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 " --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.


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


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>


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


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

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


Deploy to Netlify

Deploy to Heroku

You can’t perform that action at this time.