Skip to content
Opinionated Gatsby starter by Ueno.
Branch: master
Clone or download
Pull request Compare This branch is 54 commits ahead, 350 commits behind gatsbyjs:master.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src @ 54556bb Update template-www Mar 6, 2019
.editorconfig First release Oct 3, 2018
.env.example Allow .env.example Feb 7, 2019
.gitignore Allow .env.example Feb 7, 2019
.gitmodules Change https link to template-www Jan 31, 2019
.stylelintrc Ignore ts/tsx files for stylelint Feb 26, 2019
LICENSE Update template-www Jan 12, 2019 Update banner Mar 6, 2019
gatsby-config.js Fix include folder for svg under Windows Feb 25, 2019
gatsby-node.js Refactoring starter with less bloat Jan 10, 2019
gatsby-ssr.js Format all .js files with Prettier (gatsbyjs#71) Jul 27, 2018
package.json Remove unused plugin Mar 6, 2019
tsconfig.json Update tsconfig.json Jan 12, 2019
tslint.json Add fresh new tsconfig Jan 12, 2019
yarn.lock Remove unused plugin Mar 6, 2019




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.