Skip to content
A Gatsby theme for bands and music artists πŸŽΈπŸŽ™
JavaScript
Branch: master
Clone or download

README.md

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

# create a new site at the directory "my-band-site"
gatsby new my-band-site https://github.com/ekafyi/starter-musician-theme

# 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

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! 🀘🏽

You can’t perform that action at this time.