text: 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
  srcfolder 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  # 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  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
  basePaththeme 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 
  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:  - name: Twitter url:  - name: Youtube url:  - name: Bandcamp url:  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
  datein 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:  map_url: 
  The
  releases item contains the following fields:
  title
  datein 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:  - name: Apple url: 
  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](
  - 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
  classNameinstead of
  classattribute.
  - 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=" /> <!-- Embed Spotify track --> 
  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!
  Discussion (35)
  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.jsgithub.com/ekafyi/gatsby-theme-mus...
  YOUR-SITE-DIR/src/gatsby-theme-musician/gatsby-plugin-theme-ui/colors.jsand 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
  Socialcomponent 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
  themeand 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
  Bannercomponent comes with the props:
  bgOverlay(takes any CSS
  backgroundproperty value) and
  color(text color).
  Simply add any of these in
  content/artist-landing-page.mdx:
  Additionally, the
  Bannercomponent also takes optional
  childrenprops, which will replace the banner content (band name, tagline, social buttons) with the
  children.
  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-GBinstead 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)
  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?
  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
  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
  Would you know why you can not add a youtube "playlist" it seems you can only add one video?
  Hello! I know it's been a while but I can't deploy the project anymore, I still have an error when clicking on the deploy button.
  thanks
  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"