Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

Gatsby Theme Musician

A Gatsby theme for bands and music artists 🎸🎙

Demo Site thumbnail

Features

  • ⏱ 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 DEV.to


💡 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

🚧 IN PROGRESS 🚧

Option B: Manually add to your existing site

npm install --save gatsby-theme-musician
# or
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

Example:

// 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.

config
├── 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.

content
├── 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! 🤘🏽