Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


The React95 Gatsby theme


For a new site

If you’re creating a new site and want to use the React95 theme, you can use the Gatsby CLI (make sure to select styled-components as your styling system)

gatsby new my-nostalgic-blog

Follow the CLI and when you’ve finished, go to the next step

For an existing site

If you already have a site you’d like to add the React95 theme to, you can manually configure it.

  1. Install the React95 theme
npm install @react95/core @react95/gatsby-theme styled-components

# or

yarn add @react95/core @react95/gatsby-theme styled-components
  1. Add the configuration to your gatsby-config.js file
// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `@react95/gatsby-theme`,
      options: {
        // basePath defaults to `/`
        basePath: `/site`,
  1. Add content to your site by creating md or mdx files inside /content folder.

React95 theme will create everything for you so you might not need src/pages.

Note that if you’ve changed the default contentPath in the configuration, you’ll want to add your markdown files in the directory specified by that path.

  1. Run your site using gatsby develop and see your content in the TaskBar. If you used the above configuration, your URL will be http://localhost:8000/site

If you have no content in the beginning, React95 theme will generate a starter for you.


Theme options

Key Default value Description
basePath / Root url for all content
contentPath content Location of your content

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site’s gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the site title and SEO
    title: `Gatsby - Powered By React95`,
    // Used for SEO
    description: `This is a Gatsby website that uses React95`,
    // Used for resolving images in social cards
    siteUrl: `https://example.com`,
    // Used for SEO in social cards
    image: `/path-to/your/image`,
    // Used for SEO
    author: `@mynickname`,

Content Fields

The following are the defined content fields based on the node interface in the schema

Field Type
title String
image String
description String
icon Icon
image String
modal Boolean

Icon type

Field Type
name String
variant String
# content/getting-started.mdx


title: Getting Started
description: Your awesome and nostalgic website!
name: Computer
variant: 32x32_4


# Your website starts on this folder

Feel free to add your content!

Image Behavior

Content can include references to images from static folder inside frontmatter.

title: Hello World (example)
image: /some-image.jpg
  name: Computer
  variant: 32x32_4

When adding an image it will be the featured image within the post.

How Styles work

Inside any mdx file you have all React95 components at your service:

title: How to
  name: FolderExe
  variant: 16x16_4


# How to




File structure folder structure
Desktop View Desktop view
404 page Desktop view
© 2023 Gatsby, Inc.