Gatsby Theme Musician
A Gatsby theme for bands and music artists 🎸🎙
- ⏱ Have a landing page up and running in minutes
- 🔎 Optimized for SEO and social sharing
- 📱 Mobile-friendly
- 🤓 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
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# oryarn add gatsby-theme-musician
Add the theme to the
plugins array in your
// gatsby-config.jsmoduleexports =plugins:resolve: "gatsby-theme-musician"
Start your site. (This step will copy the necessary theme files to your site.)
1) Theme options
||Root url for landing page|
||Location of data files|
// gatsby-config.jsmoduleexports =plugins:resolve: `gatsby-theme-musician`options:// Your site will run atbasePath: `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.
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! 🤘🏽