loading...

Make a landing page for your band in 30 minutes with gatsby-theme-musician 🎸

ekafyi profile image Eka Updated on ・9 min read

Learning Gatsby Themes (6 Part Series)

1) Introduction to “Learning Gatsby Themes” Series 2) [Pre-Stable Release] Using Gatsby Themes in a Non-Theme Starter 3 ... 4 3) [Pre-Stable Release] Getting Started with Our First Gatsby Theme 4) Using and customizing official Gatsby themes from scratch without starter sites 5) Make a landing page for your band in 30 minutes with gatsby-theme-musician 🎸 6) Gatsby theme shadowing for beginners: How I built a starter for LekoArts’ Minimal Blog theme

Background

I published my first Gatsby theme–which is also my first-ever public installable package–today! 🎉

The Musician Theme aims to make it easier for musicians—groups and solo artists alike—who want to create their own landing page (or a full website).

But why make a website when there are so many platforms that cater to musicians and their audience? 🤔 Here are some reasons.

  • Not rely on ever-shifting social media platforms to host essential information (bio, contact, where/how to get your albums, etc).
    • Services come and go. Myspace got deserted (and brought down your custom layouts and your songs with them 💀), ReverbNation got forgotten; are Bandcamp or Spotify next? Your website will likely outlive them.
    • You can also use your website as a funnel to direct your audience to social accounts of your choice.
  • You own your data. With this theme, it’s literally 4-5 text files you can edit and save like any regular text file.
  • Fast* and accessible. Works in various browsers and devices, with/without Javascript.

I find Gatsby themes to be an interesting medium to create web pages of this nature, as it reminds me of playing with Myspace band page layouts from last decade: you can just fill in your profile and images (and MP3s, in the case of Myspace). You may also decorate your page to your heart’s content… which has proven to be a gateway drug to frontend development lest your music career stalls 😈🙃.

I built this theme particularly with the following principles in mind:

  • Touch as little or as much code as you want to. You don’t need to write React components—or any Javascript beyond adding one line of theme name to the config if you don’t want to. But the src folder will be waiting in case you change your mind. 😬
  • Highly extendable and customizable due to Gatsby themes’ composable, modular nature. Ecommerce, blogging, podcasting, photo gallery… it might take too much time and effort to build everything from scratch yourself, but themes (hopefully) make it easier for you to piece together the combination of functionalities you need.

*) Caveat: The core theme is built without any tracking or third-party script. But embedding external media (eg. from Youtube, Spotify, Soundcloud) is also important for musicians, so I also make it easy to embed such media, which might hurt speed, performance, and privacy.

With that long intro out of the way, let’s get started! We are going to create a site for a fictional band called The Undefined from scratch using the Musician theme with as simple modifications as possible.

Table of Content

  1. Create new Gatsby site
  2. Add theme to site
  3. Start site
  4. Configure basic data
  5. Add content - Images
  6. Add content - Releases and Shows
  7. Edit landing page
  8. Deploy to Netlify

1) Create new Gatsby site

Skip this step if you already have one. On the other hand, if you’ve never used Gatsby before, check out their quick start guide or beginner-friendly tutorials.

We are using the theme starter to create a new Gatsby site preconfigured with the theme and its content.

# 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

If you use this step, you can skip steps 2 and 3.

Note: You can use any other starter—I originally used the official “hello-world” starter in the example site—just make sure you do steps 2 and 3.

2) Add theme to site

Install the theme by running ONE of the following, depending on your preferred package manager.

npm install --save gatsby-theme-musician
# or
yarn add gatsby-theme-musician

Then add the theme name to gatsby-config.js.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-musician",
    },
  ],
}

3) Start site

Run gatsby develop

The theme will copy the necessary data and our site will start running. But when we open http://localhost:8000, we cannot see the theme’s landing page. Instead, we see the starter site’s plain index page printing ”Hello world”.

This is to be expected because the hello-world starter site does contain an index page. Even so, this is something worth remembering when using themes, or combination of theme(s) and a starter site. 📝

In this case, there are two options to choose from:

  • Remove the hello-world starter’s src/pages/index.js , OR
  • Change the basePath theme option to something else, eg. my-band
    • If we choose this, the “Hello world” home page will remain as it is, and the theme’s landing page will be created at http://localhost:8000/my-band

For this post, we’ll do the first option. Stop the app, delete src/pages/index, and restart our app.

Now we can see our landing page!

In addition to basePath, we can also change contentPath from the theme option but we’re not going to do it here.

4) Configure basic data

To edit artist data, let’s open src/gatsby-theme-musician/config/artist.yml.

For all theme-specific config we use the YAML data format, which is described as “a human friendly data serialization standard” . I chose it because of its simple syntax, which makes it user-friendly even to folks who are beginners or non-developers. You can learn more about the YAML format here.

For this post, let’s make a website for a (fictional) electronic act called The Undefined.

#artist.yml

artist:
  name: The Undefined
  tagline: On Southeast Asia tour August-September 2019. Fictional.
  seo_title: "The Undefined | Yogyakarta, Indonesia fictional electronic band"
  seo_description: "Fictional electronic group from Yogyakarta, Indonesia"
  contact_twitter_username: "thisaccountdoesnotexist"
  # contact_phone: 
  # contact_email: 

social:
  - name: Instagram
    url: https://instagram.com/thisaccountdoesnotexist
  - name: Twitter
    url: https://twitter.com/thisaccountdoesnotexist
  - name: Youtube
    url: https://youtube.com/thisaccountdoesnotexist
  - name: Bandcamp
    url: https://thisaccountdoesnotexist.bandcamp.com

site_language: en

All fields except name are optional and are used for various metadata (native, OpenGraph, Twitter, Structured Data), which—among others—help with Search Engine Optimization and social sharing.

The social items’ names can be anything (Facebook, Twitter, Instagram, etc). You can see the list of supported icons in this file. If you add something not in the list, the icon will default to a globe icon—it will still be displayed in the social links.

Now our landing page displays our data. The browser tab also shows our SEO-friendly title.

We are not going to customize the navigation and text labels, but you can read about the theme config files the Theme Documentation.

5) Add content - Images

Next, we are adding our images to the content folder.

You can add the following images in PNG or JPG format (all optional):

  • artist-banner
  • artist-social
  • artist-logotype

If a file called artist-banner.png or artist-banner.jpg exists in the content folder, the theme will use it as background image for the top banner. Likewise with artist-social.jpg|png (for social sharing thumbnail) and artist-logotype.jpg|png (for top header menu).

You can refer to the Theme Documentation for image sizes and ratio.

Add the images files, restart the app—voila, now we have images!

6) Add content - Releases and Shows

This theme provides two theme-specific content types: Releases (a.k.a. Music; Discography) and Shows (a.k.a. Tour; Events).

Like the theme config, we also use YAML files for these. The files—releases.yml and shows.yml respectively—are available at your content folder.

Each entry in these files is marked by a dash (-) before the primary field. Three entries for the “Shows” section, for instance, basically look like this.

- name: Test Show 1
  date: 2019-08-10

- name: Test Show 2
  date: 2019-08-31

- name: Test Show 3
  date: 2019-09-01

The shows item contains the following fields:

  • name
  • date in yyyy-mm-dd format
  • location
  • info_url
  • map_url
# shows.yml
# Data example (with randomly generated place)
- name: Aliquam erat volutpat with Etiam Egestas
  date: 2019-08-10
  location: Inner Alehouse, 2545 Parrish Avenue, Rocky Creek
  info_url: https://some-website.com
  map_url: https://maps.google.com

The releases item contains the following fields:

  • title
  • date in yyyy-mm-dd format
  • release_type
  • image
  • links — each link item contains the following fields:
    • name — eg. Spotify, Apple Music, Bandcamp, Beatport
    • url
# artist.yml
# Data example (with rickrolling)
- title: "Scelerisque"
  date: 2000-01-01
  release_type: Single
  image: "./album-1.jpg"
  links:
    - name: Spotify
      url: https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC
    - name: Apple
      url: https://music.apple.com/au/music-video/never-gonna-give-you-up/277040657

7) Edit landing page

The last part before we’re ready to deploy is to edit the landing page itself. Unlike previous parts, now we are dealing with an MDX file. MDX is a new format “that lets you seamlessly write JSX in your Markdown documents” (read more in their website).

So basically, you can do any (and all) of the following in MDX:

  • Write regular text
  • Write Markdown formatting, eg. **bold text** and [hyperlink](https://dev.to)
  • Write native HTML element—which is part of JSX, eg. <aside> or <a href="#some-link">links with <em>formatting</em></a>
    • It does differ from vanilla HTML in some ways, among others using object for inlined CSS style, eg. <p style={{ color: 'hotpink' }}>hotpink text</p> , and using className instead of class attribute.
  • Import and use any React components—ones provided by the theme as well as any component you write yourself and/or install from external packages

To edit our landing page, open artist-landing-page.mdx in your content folder. You can add, remove, reorder anything the way you edit a regular Markdown text file.

This theme comes with several components that you can use right away without having to import them. For instance, <Banner>, <Releases>, and <Shows> displays the theme-specific content we just added above.

You can embed Youtube videos with the <Youtube> component, and additionally, you can embed from Spotify and Soundcloud by merely pasting the link in one line.

<!-- Embed Youtube video -->
<Youtube url="https://www.youtube.com/watch?v=GBUCmMxmup0" />

<!-- Embed Spotify track -->
https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC

We are not going through the other components as this post is meant for getting started quickly with this theme. But you can see everything in action in the default Sample Page and read more about the components in the docs.

8) Deploy to Netlify

Last step is to deploy our new site.

There are many ways to deploy and Gatsby has an exhaustive deployment guide. For this post, we are deploying static build files using Netlify’s ✨ magical ✨ drag-n-drop uploader as it's the fastest way. (If you want to setup continuous-deployment from your Github, Gitlab, or Bitbucket repo to Netlify, follow this guide instead.)

Build your site. This will create a public folder in your site’s root directory.

gatsby build

Next, create a free Netlify account (if you haven’t got one) and log in. Scroll down to the box that says “Need to update your site without making changes to the repository? Drag and drop your site folder here”. Drag your public folder there.

Netlify is going to deploy your site at a randomly-generated address and take you to your new site dashboard. When your site is deployed successfully, the “last published” date/time will reflect the newest build and you can access your site immediately. Click on “Site settings” to change the address.

That’s it, our site is live!


Closing

This theme is very new and buggy—I’m still discovering and making various fixes as I write this in-between other responsibilities. However, I’m excited about the possibilities of this theme. In the future, I might continue to post about:

  • Writing content in MDX — adding custom pages, creating and using components
  • Extending and shadowing UI/data components
  • Styling with Theme UI — extending and shadowing design tokens (both for technical and less technical users)
  • Accessibility enhancements, eg. enable users to add alt text to album artwork

If you use it, please let me know how it goes. Thank you for reading!

Learning Gatsby Themes (6 Part Series)

1) Introduction to “Learning Gatsby Themes” Series 2) [Pre-Stable Release] Using Gatsby Themes in a Non-Theme Starter 3 ... 4 3) [Pre-Stable Release] Getting Started with Our First Gatsby Theme 4) Using and customizing official Gatsby themes from scratch without starter sites 5) Make a landing page for your band in 30 minutes with gatsby-theme-musician 🎸 6) Gatsby theme shadowing for beginners: How I built a starter for LekoArts’ Minimal Blog theme

Posted on by:

ekafyi profile

Eka

@ekafyi

Web developer, late bloomer. Can center an element with grace and style (pun intended). Mostly sensible (citation needed).

Discussion

markdown guide
 

Great Work! I am new with Gatsby. How to connect the music theme with the starter theme? because I have no idea where to go for changing the blue color for LINK and add information in the footer section.

thanks

 

You can do that by shadowing the file colors.js github.com/ekafyi/gatsby-theme-mus...

  • In your site directory, create the file YOUR-SITE-DIR/src/gatsby-theme-musician/gatsby-plugin-theme-ui/colors.js and copy the content from the link above.
  • Change any value you want there.

If you're not familiar with the concept of "shadowing" in Gatsby, have a look here: gatsbyjs.org/docs/themes/shadowing/

 

Thanks! And for for editing the footer ?

Using the same principle as above, shadow the footer file: github.com/ekafyi/gatsby-theme-mus...

Shadow the footer if you want to (for example) change/remove the copyright/credit line.

IF you just want to change your social links, shadow the config file instead: github.com/ekafyi/gatsby-theme-mus...

for footer.js, where do i add it?

when I put my-site/src/gatsby-theme-musician/components/footer.js

I have a error

The footer component has relative imports, ie. it imports these other components from the theme.

import useSiteMetadata from "../use-site-metadata"
import Social from "./social"

If you don't change those, you get errors because there's no Social component file in your site's dir. So make sure you change the import paths. You can see the example of Applying new props in gatsbyjs.org/docs/themes/shadowing... to figure out the theme import path.

Thanks, but I have no idea how to solve the problem. What is the path to add?

I try to add but not working

import useSiteMetadata from "gatsby-theme-musician/theme/src/"
import { Social } from "gatsby-theme-musician/theme/src/components/"

export default props =>
export default props =>

Try removing the theme and including the filename like in the theme.

// in the theme
import useSiteMetadata from "../use-site-metadata"
import Social from "./social"

// in your site
import useSiteMetadata from "gatsby-theme-musician/src/use-site-metadata";
import { Social } from "gatsby-theme-musician/src/components/social";

Its not working, but its ok thanks

Do you know, how to change or add a favicon ?

 

I've found how to change the color in the banner go to the file colors.js and change the accent color then to to the file componentStyles.js to change the opacity. If there is a different way I sure would like to know. I'm a little new at this Gatsbyjs.

 

Yes, that’s correct. What you did is especially useful for making major customizations.

If you only want to change the colours, the Banner component comes with the props: bgOverlay (takes any CSS background property value) and color (text color).

Simply add any of these in content/artist-landing-page.mdx:

<Banner bgOverlay="red" />

<Banner bgOverlay="transparent" />

<Banner bgOverlay="linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)" />

<Banner bgOverlay="#fff" color="#000" />

Additionally, the Banner component also takes optional children props, which will replace the banner content (band name, tagline, social buttons) with the children.

<Banner bgOverlay="red">

Your own text here

</Banner>

This reminds me I’m way behind at updating the docs, thanks!

 

tanks I'm glad I was on the right path and takes for the other way on doing the same thing.

Second question to build a drop down menu I thought I would use

  • title: "Sample" subcategories:
    • subtitle: "Samp1" subhref: "#"
    • subtitle: "Samp2" subhref: "#"

This code is not working and errored out
ERROR IS = Module Error (from ./node_modules/yaml-loader/index.js):
bad indentation of a mapping entry at line 11, column 9:
subcategories:

 

I'd like to see a code example of how the Banner children prop works to replace the band name or tagline.

 

I've been looking for a way to add a drop down menu to this theme really clueless on this option? Any help would be great/direction would be great!

 

I love this template/starter! I'm already using it for a site for a musician friend of mine, thank you. I am running into a weird bug however, the dates for the shows are off by one. So far example, if I edit shows.yml with an event with a date of 2019-09-01, it shows up as Aug 31st.

thomashindsmedia.netlify.com

 

Yeah - it's because the locale strings default ALL date and time values to en-GB instead of the locale of the app. 🧐

I just filed this issue - github.com/ekafyi/gatsby-theme-mus...

 

Shadowing. Hmmm--similar to WordPress' child themes or OOP polymorphism. Nice. Thanks for sharing.

BTW, I visited the repo for this theme. It doesn't look like it's actively supported?

Good luck!

Ok. Cool.

BTW, I hope you don't mind. I noticed that in your implementation--the hero isn't responsive on mobile? The theme's example site is though.

Do you know why? Is it a limitation with the theme?

Non responsive hero

Thanks!

 

Yeah I filed this as an issue on the starter over 4 months ago.

github.com/ekafyi/starter-musician...

 

First off very nice theme I'm looking to change the overlay color on the header banner from "blue" to my theme color where would you find that?

 

Hey! I used you project for my singer/songwriter website, it came handy because I'm about to release my first album. I think I can help after releasing the album, I have a bug or two to report and also suggestions for improvement. GREAT JOB!!!! And thank you for this project! You can see the final result in yalungtang.com (I did not use the banner)

 

Is there a way to resize the logotype image? Or any of the images?

 
 

Bravo, Eka! Looking forward to see what’s coming up next from you.

 

How or what is the best way to add structured data schema to the site I would like to add the calendar to schema?

thanks

 

Would you know why you can not add a youtube "playlist" it seems you can only add one video?

 

Putting the Banner below the Container tag makes for an interesting effect.

 

Nice work ! I am new with Gatsby. How to have accesr to overlink color. because I see nothing

 

Quick question when I do a structured-data test using google the @type comes back with "MusicGroup" -- Is there any way of changing that since I not using the template for a "music group"