Skip to content


Repository files navigation

Gatsby Theme Musician

A Gatsby theme for bands and music artists πŸŽΈπŸŽ™

Demo Site thumbnail


  • ⏱ Have a landing page up and running in minutes
  • πŸ”Ž Optimized for SEO and social sharing
  • πŸ“± Mobile-friendly
  • ️⚑️ Fast and performant, with and without Javascript
  • πŸ€“ Write as little or as much code as you want
  • πŸ™ŒπŸ½ Better with othersβ€”endless combination with other Gatsby themes (blog, ecommerce, photo galleries...)
  • πŸ“ Write your content in plain text, Markdown, HTML elements, and React components thanks to MDX
  • πŸ’…πŸ½ Customizable, versatile design tokens-based styling with Theme UI

Read introductory post on

πŸ’‘ If you have never used Gatsby before, head to their quick start guide or beginner-friendly tutorials.

πŸ“¦ Installation

Option A: Use the starter to create a new site

# create a new site at the directory "my-band-site"
gatsby new my-band-site

# go to the site directory
cd my-band-site

# start your site
gatsby develop

Option B: Manually add to your existing site

npm install --save gatsby-theme-musician


yarn add gatsby-theme-musician

Add the theme to the plugins array in your gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: "gatsby-theme-musician",

Start your site. (This step will copy the necessary theme files to your site.)

gatsby develop

πŸ›  Usage

1) Theme options

Key Default value Description
basePath / Root url for landing page
contentPath content Location of data files


// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-theme-musician`,
      options: {
        // Your site will run at http://localhost:8000/my-band
        basePath: `my-band`,

2) Theme configuration

Configuration files are located in src/gatsby-theme-musician/config. They use the YAML format. These are where you edit theme-specific details such as artist data and site navigation.

β”œβ”€β”€ artist.yml # Artist data
β”œβ”€β”€ navigation.yml # Site navigation links
└── text_labels.yml # Site text labels

πŸ’‘ See Theme Config documentation for more details.

3) Content

By default, content files are located in content unless you specify a different path in the theme options.

β”œβ”€β”€ artist-landing-page.mdx
β”œβ”€β”€ images
β”‚Β Β  β”œβ”€β”€ favicon.png
β”‚   └── placeholder.png
β”œβ”€β”€ releases.yml
β”œβ”€β”€ sample-page.mdx
└── shows.yml

Optionally, you may add images in PNG or JPG format with the following file names.

  • artist-banner.png|jpg β€” displayed in top full-width banner
  • artist-logotype.png|jpg β€” displayed in header (in place of artist name)
  • artist-social.png|jpg β€” used in SEO and social thumbnail metadata

πŸ’‘ See Content documentation for more details.

Have fun! 🀘🏽


A Gatsby theme for bands and music artists πŸŽΈπŸŽ™







No releases published


No packages published