With minimal styling and maximum features — including multiple homepage layouts, built-in social sharing and dark mode — Novela makes it easy to start publishing beautiful articles and stories with Gatsby.

Novela is built by the team at Narative, and built for everyone that loves the web.

• Getting Started

  • Installation
  • Folder structure
  • Using Novela Theme
  • Adding an Author
  • Adding a Post
  • Configuring Site Metadata

• Customization

  • Adding your logo
  • Changing styles
  • Component shadowing

• Data Models

  • Authors
  • Posts
  • Site Metadata

There are many Gatsby themes to choose from. Here’s why we think you won’t regret choosing Novela:

Choose between a variable width grid or a simpler list style to display each story.

Out of the box, Novela includes both light and dark designs that can be toggled by the user anywhere across the site.

Consistent, easy-to-read code let you quickly customize every color and setting.

Users can select text within an article to copy or share to platforms like Twitter and LinkedIn.

Read time is automatically generated for each article based on length, with an animated bar tracking the reader’s progress through each piece.

Navigable by cursor or keyboard, readable via screens and screen readers, Novela ensures everyone on the web can read what you write.

This guide will take you through adding Novela to a new project. You do not require any Gatsby starters or similar, but you can add Novela to an existing Gatsby project.

You can also view the completed example repository.

# Create an empty directory and go into it
mkdir novela-site && cd novela-site

# Add all required depedencies
yarn add react react-dom gatsby @narative/gatsby-theme-novela

Once you've installed React, Gatsby, and Novela you'll want to add your first Post. Every Post requires an Author. The recommended project structure for your content and site looks like this:

  novela-site
  └── content
    └── authors
      ├── avatars
        └── avatar.jpg
      └── authors.yml
    └── posts
      └── 2020-01-01-my-first-novela-post
        ├── images
          └── novela-hero.jpg
        └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

You must add @narative/gatsby-theme-novela as a plugin in your gatsby-config.js. @narative/gatsby-theme-novela is configurable through plugin options but we will use the defaults for now.

// gatsby-config.js

module.exports = {
  plugins: ["@narative/gatsby-theme-novela"],
};

Once you've setup the @narative/gatsby-theme-novela to your gatsby-config.js you can start creating your first posts. In order to create a post you also need at least one author.

In Step 2 we created the folder structure of our project. We can now add an Author by populating /content/authors/authors.yml:

  novela-site
  └── content
    └── authors
      ├── avatars
        └── brotzky-avatar.jpg
      └── authors.yml

In authors.yml add an Author. There must be at least one featured Author.

/content/authors/authors.yml:

- name: Dennis Brotzky
  bio: |
    Written by Dennis Brotzky who lives and works in Vancouver building useful things.
    You should follow him on Twitter.
  avatar: ./avatars/brotzky-avatar.jpg
  featured: true

Once you have at least one Author set in authors.yml you can add your first Post! Start by creating a new folder in content/posts. You can name it anything you like but we recommend including the date at the front to easily organize your posts. Once you've created your folder you can add an index.mdx file and an images folder that will contian all images, including your Post's hero image.

/content/posts/2020-01-01/index.mdx

---
title: Why Narative loves Gatsby
author: Dennis Brotzky
date: 2019-04-27
hero: ./images/narative-gatsby-hero.jpg
excerpt: This is a love story about Narative and Gatsby
---
# And then under the heading YML you can insert any MDX you like
# like headings, links, code, images, etc
# This will show up in the body of your post
# ...

In order to configure the theme to properly genreate the pages and meta tags you must add specific data in your siteMetadata. If you skip this step the site will not load properly and your SEO score will rank really low.

The fields that are unique to Novela are hero.heading, hero.maxWidth, and social.

Add your Site Metadata to the gatsby-config.js file.

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Novela by Narative`,
    name: `Narative`,
    siteUrl: `https://gatsby-theme-novela.netlify.com`,
    description: `This is my description that will be used in the meta tags and important for search results`,

    // important to set the main text that appears in the hero
    hero: {
      heading: `Perspectives on technology, design and business from the team at Narative.`,
      maxWidth: 652,
    },
    social: [
      {
        name: `twitter`,
        url: `https://twitter.com/narative`,
      },
      {
        name: `github`,
        url: `https://github.com/narative`,
      },
    ],
  },
  plugins: ["@narative/gatsby-theme-novela"],
};

Once all steps have been completed you can run your site. In the root of your project run gatsby develop.

If you ran into problems you can reference the example repository or create an issue.

Your logo must be in SVG (vector) format in order to add it to the theme. This is required because we will be making a React component containing your SVG Logo.

Start by creating the component file at:

  novela-site
  └── src
    └── @narative
      └── gatsby-theme-novela
        └── components
          └── Logo
            └── index.js

It is important you create the exact folder structure so Gatsby knows to shadow this component. Once the file is created you can create your Logo component.

import React from "react";

/**
 * Paste in your SVG logo and return it from this component.
 * Make sure you have a height set for your logo.
 * It is recommended to keep the height within 25-35px.
 */
export default function Logo() {
  return (
    <svg viewBox="0 0 106 28" height="30px">
      <path d="M62.9 12h2.8v10...." />
      <path fill="#fff" d="M25 14h-..." />
      <path d="M14 0C6.3..." fill="#639" />
    </svg>
  );
}

Once you've created the Logo component it should automatically appear in your site.

The technique we have used is called Component Shadowing and is a core feature of Gatsby Themes.

WIP

WIP

It is recommended to use the Default options, but if your project requires something else you can configure them to your need.

View Theme option example

plugins: [
  {
    resolve: "@narative/gatsby-theme-novela",
    options: {
      contentPosts: "content/posts",
      contentAuthors: "content/authors",
      basePath: "/",
    },
  },
];

View Author example

- name: Dennis Brotzky
  bio: |
    Written by You. This is where your author bio lives. Share your work, your
    joys and of course, your Twitter handle.
  avatar: ./avatars/dennis-brotzky.jpg
  featured: true

- name: Thiago Costa
  bio: |f
    Written by You. This is where your author bio lives. Share your work, your
    joys and of course, your Twitter handle.
  avatar: ./avatars/thiago-costa.png

View Post example

# novela-site/content/posts/2020-01-01/index.mdx
---
title: Why Narative loves Gatsby
author: Dennis Brotzky
date: 2019-04-27
hero: ./images/narative-gatsby-hero.jpg
excerpt: This is a love story about Narative and Gatsby
---
# And then under the heading YML you can insert any MDX you like
# like headings, links, code, images, etc
# This will show up in the body of your post
# ...

View Site Metadata example

Within gatsby-config.js you can configure siteMetadata to show the values you wish. It is required to add siteMetada

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Novela by Narative`,
    name: `Narative`,
    siteUrl: `https://gatsby-theme-novela.netlify.com`,
    description: `This is my description that will be used in the meta tags and important for search results`,

    // hero
    // A required key and will be displayed on the main page of Noveal
    hero: {
      heading: `Perspectives on technology, design and business from the team at Narative.`,
      maxWidth: 652,
    },

    // social
    // Add in the social links that will be displayed in the footer
    social: [
      {
        name: `twitter`,
        url: `https://twitter.com/narative`,
      },
      {
        name: `github`,
        url: `https://github.com/narative`,
      },
      {
        name: `instagram`,
        url: `https://www.instagram.com/narative.co/`,
      },
      {
        name: `dribbble`,
        url: `https://dribbble.com/narativestudio`,
      },
    ],
  },
};

This project is early in development and we are interested in creating an even more extensible experience, and increased out-of-box functionality, including:

• Data sources such as Prismic, Sanity, Contentful, Netlify CMS, and others
• Built in search with Algolia or similar
• Tags, categories, and more
• More theme variations
• More customization options