Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Advent Theme

A simple and easy advent theme using Gatsby and Styled Components. Write your posts with Markdown.

npm version code style: prettier


Manual Setup

In your gatsby-config.js:

npm i @agney/gatsby-theme-advent

# OR #
yarn add @agney/gatsby-theme-advent

You can start using it by adding the following to gatsby-config.js

module.exports = {
  plugins: [
      resolve: `@agney/gatsby-theme-advent`,
      options: {
        contentPath: "content", // Tell the theme where your markdown files are.
        assetPath: "assets", // Tell the there where your cover image is.
        basePath: "/december", // Tell the theme which URL to render the theme at.


Options Description Required Default
contentPath This where markdown files are hosted false content
assetPath This is where your cover image can be false assets
basePath This is where URL where the theme is to be rendered false

Adding the Data

Add markdown files with frontmatter:

title: "This is the first advent gift"
date: "2019-12-01T22:12:03.284Z"
published: true

The post will be published only if the frontmatter published is true.

Changing the theme

Create a theme.js file at src/@agney/gatsby-theme-advent/utils/theme.js

const theme = {};

export default theme;

See full properties here

If you need to keep existing theme and edit some of the values:

import merge from "lodash.merge";
import theme from "@agney/gatsby-theme-advent";

export default merge({}, theme, {
  colors: {
    primary: "blue",

Replacing Components (Shadowing)



This theme makes use of Yarn Workspaces

yarn  # Install packages and dependencies
yarn dev
© 2023 Gatsby, Inc.