Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-theme-musician with all npm packages installed. Try it out:

require("gatsby/package.json"); // gatsby is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var gatsbyThemeMusician = require("gatsby-theme-musician")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-theme-musician v1.0.5

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

KeyDefault valueDescription
basePath/Root url for landing page
contentPathcontentLocation 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! 🤘🏽

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free