Meljoann · hyperjack arthole

Faircamp

Logo for faircamp: an F shape in triangle brackets.

So, Bandcamp's new bosses are caught union-busting, and the corporate web just gets more enshittified. Some of the naughtier musicians are going back to self-hosting our own music.

This is a tutorial for setting up your own Faircamp, Simon Repp's beautiful music site design. I'm aiming to fill in the gaps, providing extra instructions for musicians who may be new to the indie web, or coming back to it to find it's all changed.

If you take a look at the longgg instructions below, then think "nah", there are community initiatives offering to host Faircamp site for musicians, at time of writing.

Static site generator

As the Faircamp website says, Faircamp is a static site generator. This just means you run a command in your shell, instead of coding your whole website by hand. You'll build the website on your own (local) computer, then tweak and personalise it. When it's all done, you will upload the built website to your own webspace.

The glorious shell

If you're on Windows or Mac, you mightn't have used shell commands before, or you might be a bit rusty. Now is your chance to feel like a feckin' hacker!

Windows

Note: since I first wrote this tutorial, there's now a Windows Installer. Most of the commands here will still work using the Terminal or PowerShell program.

Another way to do it: you'll be installing Linux on Windows (WSL). This might seem like a lot, but it's easier than it sounds and will save you a whole load of hassle compared to building from source. You can re-use these skills for other web development (like Hugo websites) or even server sysadmin stuff later.

Mac

You'll be using the Terminal program. You'll first need to install brew, there are good installation instructions here. You can then type brew install faircamp to install faircamp.

If this doesn't work for you, another option is to use Linux in your terminal, using 'Lima'. This blog post describes how to set up Lima (Linux Virtual Machine) on your Terminal.

On both WSL and Lima, you'll have an option to choose from a list of different 'flavours' of Linux: I recommend choosing Ubuntu.

Download Faircamp

Go to this page and download the the package for the Linux distro you installed on WSL or Lima (for Ubuntu, you'll want "Debian 12, Ubuntu 23.04" or similar).

Windows WSL

Your Windows Explorer will have a new drive on the left (under Quick Access, This PC, your hard drives, etc.) called "Linux". This may even feature a cute penguin icon, if you're lucky. You can drag and drop files to this.

Mac

Skip this bit if you've installed using brew.

On Mac, your new Linux will be installed in your Home folder, in a hidden folder called .lima. If you can't see it, you can show hidden folders in Finder: Go > Computer > select Macintosh HD and press Shift + Command + . (period).

Linux, so fancy

Open your new Linux home folder in Windows Explorer or Mac Finder:

Ubuntu > home > and your new Linux user's home folder will be called whatever name you chose during installation.

Prepare for Faircamp install

Make a new folder called "faircamp", and drag and drop your Faircamp install file you just downloaded.

Windows WSL

Open Ubuntu program on Windows (you can search for it in the Start menu). When the window opens, you'll see a "prompt", like: yourName@ComputerName:~$

Mac

Lima: You're just using Terminal to interact with Linux, and can follow these instructions to jump into your Linux shell. After that, all commands below should be the same.

Linux, the slinky minx

Now, you can type the "change directory" command cd to go to your new Faircamp folder (it's case-sensitive).

cd faircamp

To see the contents of this folder, type:

ls

This "lists" everything in the current directory, so you should see the name of your the Faircamp install file. Something like faircamp_0.8.0-1+deb12_amd64.deb.

Install Faircamp

On Windows, you can just double-click the Faircamp installer download, to unzip and run it.

If you've run brew install faircamp, it's already installed!

To install Faircamp, type the below -- substituting the name of your install file if it's slightly different.

sudo dpkg -i faircamp_0.8.0-1+deb12_amd64.deb

The "sudo" bit gives you Linux superpowers to do whatever you want. Sometimes if you don't use "sudo" before a naughty little command, it gives you some random bullshit error. So try this if something doesn't work.

Copy & paste in the shell

Windows

If you need to copy/paste the exact name of the .deb file, you can use copy/paste keyboard shortcuts in your Ubuntu. To enable this, right-click on the Ubuntu menu bar > Properties > and make sure there's a checkmark on "Enable Ctrl key shortcuts" and "Use Ctrl+Shift+C/V as Copy/Paste".

Mac

On Mac Terminal, you can use Command-C/V for copy/paste, as normal.

Your gorgeous music

Make sure your albums are tagged first (track numbers, embedded album art and all). You can tag your WAVs (or AIFs, or whatever else) with these free programs:

This is how Faircamp sees your track order, in each release.

You're going to set up a file system that Faircamp understands, like this. Basically, it's:

faircamp > Artist > Release > your WAVs & album art.

New folders

Go back to good old Windows Explorer or Mac Finder, open Linux and open your "faircamp" folder again.

  1. Create a new folder and give it your artist name (e.g., "Meljoann", if you are the great artiste known as Meljoann).
  2. Inside your Artist folder, create a folder for each release you want on your Faircamp, and name them the same as your release.
  3. Drag and drop the corresponding WAV files into each Release folder.

All set up!

Tweaking and personalising

Faircamp uses ENO files to put all your website's configuration (bits of text, images, download options, etc.). You can edit ENO files in any text editor.

You can use your default text editor (making sure the file is saved with .eno on the end, not .txt or whatever). You can also use text editors in the shell (e.g., nano, emacs, vim), but in the long run it might be easier to install VS Code for your WSL (Windows), or XCode on Mac. It's been a while since I used XCode, but you should be able to open your Linux files in it from your Finder.

Otherwise, the easiest option is to use nano. However it's a little fiddly, as there's no default way to select text using the mouse. But I'll include some nano instructions below.

Windows: VS Code on WSL

If you want to install VS Code, follow these instructions for Ubuntu. OK, the instructions are a bit crap for beginners. But basically, you will download a .deb installation file as before, and use a command called apt to install it and some other dependencies.

First, cd into your home folder by typing this:

cd ~

Then you can run this command:

code .

This opens VS Code, letting you create and write in some files we're gonna need to tweak.

In VS Code, you'll see a pane on the left with your Artist and Release folders. Right-click on your Artist folder and select "New file". You're going to create two files. Call them:

catalog.eno

and

artist.eno

The manual has examples for both Catalog and Artist eno files.

Your albums, or whatever the kids are making these days

Now, you're going to do the same thing for your "Releases".

In each release folder, create an ENO file called:

release.eno

The manual has an example Release eno file here.

To change the order your releases are displayed in, use the "date" field in your release ENO.

Drag and drop each album cover art JPG into its corresponding Release folder in Windows Explorer or Mac Finder, and make sure it has the same name in the ENO file.

nano

If you'd prefer to use nano as your text editor, you can create a file in your "faircamp" directory by typing:

cd faircamp

then:

nano catalog.eno to start editing the catalog eno file.

All the nano keyboard shortcuts are written along the bottom of the screen. For example, to save the file, it's Ctrl + O. To wrap text along the screen, it's Ctrl + J.

Going ENO

The Faircamp manual provides a sample 'Catalog' ENO file, to get started. Copy and paste that into your VS Code catalog.eno and tweak away.

It also provides an example Artist ENO file, as a good starting point for your artist.eno

Go to town. ENO town.

If it's not obvious, in the example file the red and green text bits you keep, and the black text you personalise. It probably won't be colour coded in your text editor, but it's easier to get the idea when you see it in the manual.

I have many sexy press shots of my incredible face

As you can see, there is a line where you can specify the name of an JPG file for your artist. This displays a gorgeous picture of you on your main Faircamp page. If you want to do this, you can drag and drop your JPG into the Faircamp folder on Windows Explorer.

Are you kidding me. I want to remain anonymous

If you don't want an image, you can delete the whole "image:" section. Or, in case you change your mind later, you comment it out so Faircamp doesn't see it. To turn something into a comment, add this at the start of a line:

>

So the image section, commented out, looks like:

> home_image:
> description = All four bandmembers against a bright blue sky, wearing pink velvet top-hats
> file = heston_exchange.jpg

Begging for sweet cash

You can put a "soft pay curtain" in. Technically people can still download your stuff for free, which I like, because not everyone is hella-rich.

To do this, you will add a section to the bottom of each release.eno file. The manual gives a good example here:

-- payment_info
Most easily you can transfer the money for your purchase
via my [liberapay account](https://liberapay.com/somewhatsynthwave)

Another option is supporting me through my [ko-fi page](https://ko-fi.com/satanclaus92)

If you're in europe you can send the money via SEPA, contact me at
[lila@thatawesomeartist42.com](mailto:lila@thatawesomeartist42.com) and I'll
send you the account details.

On Dec 19th I'm playing a show at *Substage Indenhoven* - you can get the
digital album now and meet me at the merch stand in december in person to give
me the money yourself as well, make sure to make a note of it though! :)
-- payment_info

As you can see, the link is in square brackets first, then in round brackets. The square brackets is what is displayed as the link text -- you can put anything you want in there. The round brackets are your URL.

The </br> is just a bit of HTML code: a line break.

Physical releases & merch

You can also put links to buy your CDs or whatever. The release.eno files support putting in some HTML scripts, so you can put your Stripe or Paypal button embed in there.

You'll be putting it in the "more" field, like this:

-- more
Written, produced, & performed by Meljoann.

*Released on 31 October, 2050.*

<script async
  src="https://js.stripe.com/...">
</script>
<stripe-buy-button
  buy-button-id="buy_btn_..."
  publishable-key="pk_live_...">
</stripe-buy-button>
<script async
  src="https://js.stripe.com/...">
</script>
<stripe-buy-button
  buy-button-id="buy_btn_..."
  publishable-key="pk_live_...">
</stripe-buy-button>

-- more

Watch that Faircamp goooo

Going back to Ubuntu (Linux) or Terminal, make sure your "working directory" is the faircamp folder you made earlier. You may have to put the whole path in, like cd ~/faircamp, cd 'C:\Users\Meljoann\Music' on Windows, or something like cd /Music/faircamp on Mac.

One handy tip: to go back one folder, you can type cd ..

When you're "in" the faircamp folder in your Terminal, type:

faircamp --preview

Whoosh! It'll start transcoding all your music files, and building the site. You'll probably get some errors, but don't worry, we'll be fixing those later.

When it's finished, it will automatically open a preview of your Faircamp site in your web browser.

By the way, it's important you run faircamp --preview ONLY when you have cd-ed into your Faircamp folder, or it will try to build the site again in whatever random folder you are in.

Theme tweaks

If you want tweak your Faircamp site's colours and stuff, you can run:

faircamp --preview --theming-widget

In your catalog.eno, you can copy and paste the code it generates in there. Also you can add a background image with:

background_image: gorgeousBackgroundImage.jpg

And copy your gorgeous background image into your Faircamp folder.

When you've finished tweaking, remember to run faircamp --preview again, otherwise it might upload the "theming widget" version of your site, and chaos will reign.

Getting webspace

You'll need your own website for this a web host, with an FTP program (like Cyberduck) for uploading your files. If you don't have this already set up, you can get free webspace with Netlify (requires a free Netlify account).

Another option for free webspace is GItHub Pages, but as far as I know that requires learning about git and version management. Which is fun, but I've no space to put that here!

Deploying Faircamp, to the wild Interwebs

When in your Artist directory in Ubuntu, type

ls --all

This is the "list" command you typed earlier, but with an "--all" flag to show the hidden folders (that have a period in front of them). You'll see a folder called:

.faircamp_build

The contents of this folder is your new Faircamp website!

Go to Windows Explorer or Mac Finder:

Linux > home > yourName > faircamp > artistName

In Windows, if you can't see the hidden .faircamp_build folder, go to View > check "Hidden items".

In Mac, íf you haven't already, show hidden folders with: Go > Computer > select Macintosh HD and press Shift + Command + . (period).

Select all the items and drag them to your FTP program, Netlify Site, or similar.

FTP

You'll probably want to make a folder called "faircamp" in your website's home directory, so you can reach your Faircamp site with https://example.com/faircamp.

Netlify

If you're on Netlify, you go to:

It's alive!

Give yourself a treat today. You did great work.