Gatsby Theme Musician is a Gatsby theme that lets bands and music artists spin up a landing page with SEO and social sharing built in, content written in MDX, and styling controlled by design tokens in Theme UI.
What is Gatsby Theme Musician?
Gatsby Theme Musician is a Gatsby theme for bands and music artists to create a landing page. It takes content files written as MDX (Markdown with React components) and YAML config files (artist data, navigation, text labels) and produces a static, mobile-friendly site. The theme was created by ekafyi and is available as an npm package with a companion starter (starter-musician-theme) and a live demo at gatsby-theme-musician.netlify.com.
Key Features
- MDX content — Write page content in plain text, Markdown, HTML elements, or React components; MDX is supported out of the box.
- Theme UI styling — Design-token-based styling with Theme UI; colors, typography, and spacing are customizable without deep CSS.
- SEO and social sharing — Includes metadata handling for social thumbnails via an optional artist-social.png image.
- Performance — The generated site is fast and works with or without JavaScript enabled.
- Theme composability — Can be combined with other Gatsby themes (blog, ecommerce, photo galleries) to extend the site.
- Mobile-friendly layout — Built to reflow on phones and tablets.
- Minimal or full code — You can configure entirely through YAML files or write custom React components as needed.
Who is it for?
- Musicians and bands — create a professional landing page in minutes without a web developer.
- Independent artists — showcase music, upcoming shows, and releases using the provided shows.yml and releases.yml content files.
- Gatsby users — developers who want a starting point and then extend it with other Gatsby themes.
What can you do with it?
- Bands: publish an artist landing page with a banner, logotype, and social image using simple PNG/JPG files.
- Artists: list upcoming shows and releases from YAML data files.
- Developers: use the theme as a foundation and compose it with ecommerce or blog themes to add merch or news.
How does it work?
Start from the starter with gatsby new my-band-site https://github.com/ekafyi/starter-musician-theme, or install gatsby-theme-musician via npm/yarn and add it to the plugins array in gatsby-config.js. Edit the YAML config files in src/gatsby-theme-musician/config (artist.yml, navigation.yml, text_labels.yml) and drop your content into the content directory. Run gatsby develop to preview the site.
FAQ
Is Gatsby Theme Musician free?
The theme is open source and publicly available in the ekafyi/gatsby-theme-musician repository. The README shows only free installation via npm, and no paid tier is mentioned.
What files do I need to edit for basic customization?
Edit the YAML config files in src/gatsby-theme-musician/config — artist.yml for artist data, navigation.yml for links, and text_labels.yml for site text. Optional banner images (artist-banner.png, artist-logotype.png, artist-social.png) can be added to the content/images folder.
Does the theme work with other Gatsby themes?
Yes. The README lists composability with other Gatsby themes (blog, ecommerce, photo galleries) as a feature, so you can mix it with other themes to build a larger site.
How do I set a custom base URL?
Pass the basePath theme option in gatsby-config.js; the default is /. The example in the README sets it to my-band, which makes the site run at http://localhost:8000/my-band.
Can I use the theme without JavaScript?
The README states the site is performant with and without JavaScript, so the static HTML output should render and be navigable even when JS is disabled.
