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
- Create new Gatsby site
- Add theme to site
- Start site
- Configure basic data
- Add content - Images
- Add content - Releases and Shows
- Edit landing page
- 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 usingclassName
instead ofclass
attribute.
- It does differ from vanilla HTML in some ways, among others using object for inlined CSS style, eg.
- 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!
Top comments (36)
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...YOUR-SITE-DIR/src/gatsby-theme-musician/gatsby-plugin-theme-ui/colors.js
and copy the content from the link above.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.
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.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 CSSbackground
property value) andcolor
(text color).Simply add any of these in
content/artist-landing-page.mdx
:Additionally, the
Banner
component also takes optionalchildren
props, which will replace the banner content (band name, tagline, social buttons) with thechildren
.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
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'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'd like to see a code example of how the Banner children prop works to replace the band name or tagline.
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...
Could this be worked around with shadowing?
gatsbyjs.org/docs/themes/shadowing/
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!
Thereâs a fork thatâs much more active:
github.com/TheRobBrennan/woatw
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?
Thanks!
Yeah I filed this as an issue on the starter over 4 months ago.
github.com/ekafyi/starter-musician...
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)
Hi @ekafyi, thank you for this theme. It will help a lot. I'm finally installing the theme, but nowadays it becomes a little outdated. So I make two steps to get things work:
rm yarn.lock
NODE_OPTIONS=--openssl-legacy-provider gatsby develop
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?
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
Bravo, Eka! Looking forward to see whatâs coming up next from you.
Is there a way to resize the logotype image? Or any of the images?
Would you know why you can not add a youtube "playlist" it seems you can only add one video?