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.