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

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.

• Live site
• Source code
• Documentation

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!