Build a static music website with Pushtape Cassette + Github Pages

Here's a quick way to build a static music site for free using Pushtape Cassette as the frontend, hosted on Github Pages, with MP3s served via Dropbox.

You'll need:

• A Github account
• A Dropbox Account (or similar, you'll need a way to direct link to mp3 files)
• familiarity working with git, html, css, and json files

Overview

1. Fork pushtape-cassette
2. Switch branches, open index.html and check base path
3. Add/modify page
4. Add/modify release
5. Update cassette.json
6. Optional: Tweak theme
7. Advanced: optimization & custom build tools

Step 1 :: Fork the Pushtape Cassette Repo

Login to your Github account, navigate to the Pushtape Cassette Repository and click "Fork" to copy the project to your account.

If all went well, you should see your copy of pushtape-cassette under your repositories.

Step 2 :: Switch branches, open index.html and check base path

Github Pages generates your website based on the gh-pages branch. Switch to the gh-pages branch of your pushtape-cassette fork (if there isn't one, create a new gh-pages branch).

Using Github's built in editor, open up index.html.

Inside your index.html, make sure the base path matches your repository name:

    <base href="/pushtape-cassette/"/>

While we are in index.html let's change a few more things:

• Title and metatag description inside the head tag
• Page title inside the body

When you are finished scroll down and click "Commit Changes".

After commiting your changes you should now be able to view your published site at:

http://<your-user-name>.github.io/<repository-name>

For example if your user name is johnnycakerulez and you forked pushtape-cassette, the url would be:

http://johnnycakerulez.github.io/pushtape-cassette

Note: if for some reason your site is missing styles or won't load, double check your base path directory. After committing changes to your gh-pages branch, Github may take a few minutes to generate your site.

Step 3 :: Add/modify a page

Navigate to the /pages folder. Edit the about.md markdown file in the Github editor. Write a short paragraph about your music group, optionally preview and then commit changes.

Just three humble guys from Rhode Island who live and die by the cornmeal code.

 "Johnny Cake is traditional and controversial..."  - [Brian Miller, NY Times](http://nyti.ms/2dJDsET)
"Better than a Yorkshire muffin.'"  - Benjamin Franklin

Booking*: Flint Corn Management, LLC tel. 555-674-4256**

* Breakfast only. We do not play brunch.
** Please do not contact us. We'll contact you.

Step 4 :: Add/modify a release

Navigate to the /releases/example-release folder on Github.

Open up notes.md, edit the liner notes for your release, and commit changes.

Click "Upload files" and upload a new 400x400 artwork.jpg file for your release.

In Dropbox upload your MP3 files and create direct share links to the files (bypassing the web viewer). Check out this tutorial if you have difficulty creating direct links. (Dropbox is easier to get direct links than OneDrive/GoogleDrive.)

In Dropbox, a direct link should have ?dl=1 appended to the URL:

https://www.dropbox.com/s/FILE_ID/filename.mp3?dl=1

Next open up tracklist.jspf. Being careful to maintain proper JSON formatting, change the title, creator and track names for your playlist. Use the direct mp3 links you created for each track. You can optionally copy and paste from a JSON editor for this part.

Note: Here we are just modifying the example-release release directory. If you want to instead create a new directory through the Github editor, see this stackoverflow thread.

Step 5 :: Edit cassette.json

Now let's modify the cassette.json which acts as a configuration file for your entire site.

Open up cassette.json. Being careful to maintain proper JSON formatting, change the homepage and album title for your new release. You can optionally copy and paste from a JSON editor for this part.

• Change the title for your album to match what you wrote in your tracklist.jspf file.
• Change the homepage to be release/example-release so your new album loads as the homepage.

Now go check out your site! It should load your new album as the homepage.

Step 6 :: Optional - Tweak the theme

• Change the logo: Replace /assets/images/logo.png with your own logo
• Change the font: Edit /assets/css/base/typography.css to set the default font
• Add a full scale background image: Edit /assets/css/theme/theme.css and scroll down to where it says /* Uncomment for full page background style */ and uncomment the subsequent lines to show a full scale background image

Step 7 :: Advanced - Connect a backend and/or add build scripts

This tutorial shows you just the basics of how you can use Pushtape Cassette and Github Pages to quickly make a static music site.

Here are some other ideas you can try:

• Add a task runner to concatenate CSS and JS for faster page loads
• Connect to a backend for easier management of pages, releases, and playlists
• Dynamically generate cassette.json with a custom server script that scans a release folder
• Set cassettePath in index.html to point to a a remote server or app that returns cassette.json (make sure the server can handle jsonp or use cors.io as a proxy)

In a future post, I'll demonstrate how to use Drupal as a decoupled backend, with Pushtape Cassette as the frontend.