A GatsbyJS landing page starter.

A simple, ready to use, easy to customize landing page starter for GatsbyJS with auto generated (sizes & types) Hero images.

A simple, ready to use, easy to customize landing page starter for GatsbyJS with auto generated, highly optimized in sizes & types Hero images.

The starter uses the css-in-js library JSS and its integration for React React-JSS to declare and mantain CSS styles.


If you do not have Gatsby Cli installed yet, do it first.

npm install --global gatsby-cli

More information on

Getting started

Install the starter using Gatsby Cli gatsby new command.


Go into the newly created directory and run

gatsby develop

to hot-serve your website on http://localhost:8000 or

gatsby build

to create static site ready to host (/public).



Edit \src\utils\siteConfig.js

module.exports = {
  pathPrefix: "/",
  appName: "SimpleLanding",
  siteTitle: "SimpleLanding - a landing page GatsbyJs starter",
  siteUrl: "",
  siteImage: "preview.jpg",
  siteLanguage: "en",
  siteDescription: "SimpleLanding is a dead simple landing page GatsbyJs starter.",
  contactEmail: "[email protected]",
  ctaLinkUrl: "",
  // manifest.json
  manifestName: "SimpleLanding - Gatsby starter",
  manifestShortName: "SimplLanding",
  manifestStartUrl: "/",
  manifestDisplay: "standalone",
  // analytics
  analyticsTrackingId: "UA-110088221-3"

Color palette

Edit the \src\styles\colors.js file to customize the color palette.

module.exports = {
  bg: "#D9D9D9",
  accent: "#709425",
  bright: "#ffffff",
  dark: "#333333",
  gray: "#777777"

Style Theme

Edit the \src\styles\theme.js file to customize style of elements

const theme = createMuiTheme({
  main: {
    colors: {
      text: colors.dark,
      link: colors.accent,
      linkHover: Color(colors.accent)
    fonts: {
      unstyled: `"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif"`,
      styled: "Open Sans"
  billboard: {
    colors: {
      text: colors.dark,
      textAccent: colors.accent,
      ctaLinkBackground: colors.accent,
      logo: colors.bright
    sizes: {
      logoWidth: "200px",
      logoWidthForM: "300px",
      logoWidthForL: "50%",
      h1Font: 1.8,
      h2Font: 1.2,
      fontIncraseForM: 1.2,
      fontIncraseForL: 1.4
  footer: {
    colors: {
      text: colors.gray,
      link: Color(colors.gray)
      linkHover: colors.gray
    sizes: {
      height: "50px"
  mediaQueryTresholds: {
    M: 600,
    L: 1024

Content editing


Edit the md files in the /scr/content/ directory to change text on the page.


Exchange /src/images/phone.png, '/src/images/pnone-perspective.pngand/src/images/background.jpginto your own. The responsive variants of the images will generated automaticaly duringgatsby develop`.


Exchange /src/images/icon.png and /src/images/apple-icon.png into your own. Then run yarn generate-manifest-icons command to regenerate icons for android (manifest.json) and apple devices.

Edit the \src\images\logos.js

export default {
  MAIN: {
    viewBox: "...",
    path: (
      <g fillRule="evenodd" clipRule="evenodd" fill="#FFF">
        <path />