Last week I recorded HNpod, my first podcast. A few people asked about how I got from idea to finished product so quickly. I’m writing two posts about the process. This is the first post about the website and distribution, the next will be about recording and the logistics of the show. The post was the #1 story on HN for quite a few hours, so there might be some interesting stuff about traffic.

The Stack

The site is built on Rails. Rails is perhaps a bit heavyweight for such a simple site, but I know my way around it, enjoy using it, and it will make any future features easy to add. I'm using Apache, mod_passenger and Ubuntu 11.04. Deploying my first rails app was a nightmare, but now I'm in the swing of it and have got to grips with capistrano. I'd recommend anyone getting started with Rails to battle through the initial deployment nightmares, rather than opt straight for Heroku (not that I've ever used it).

Hosting

Hosted on a linode 512mb VPS. $20 a month. I have a couple of other, largely dormant apps, on the same VPS. Even at peak traffic (#1 story on HN, ~ 130 concurrent visitors, 16 Mb/s traffic) the server barely went above 12% CPU usage. I'm just hosting the MP3 on my Linode for now - I have 200GB of transfer a month and the first episode has used 69 GB so far. I might move over to S3 at some point, but since I'm paying for that Linode bandwidth I might as well use it.

I can't recommend Linode highly enough. I've used them for about three years and the process goes like this. Order server. Pay money. Never hear from them again. Perfection. The Linode Library taught me most of what I've learned about sysadmin.

Features

There's nothing fancy in the features.

I added the applaud functionality as a way to receive feedback on guests. Later I might add a weekly email for guests themselves to receive some feedback - "You were applauded X times last week for your appearance on Z". The downside of applauding was that it prevented easy page caching of each episode page - where I anticipated most traffic. I launched with no caching and it wasn't a problem. My contingency if the server was overloaded would have been to either scale up the Linode, or remove applaud buttons and enable page caching. Lesson: Don't worry, it might never happen. The voting is simply based off of IP addresses now - maybe in future I'll take a hash of IP and User Agent.

I'm hoping that guests will come back in future shows, so I've linked them to each show so that it's all neatly tied together.

Distribution

What I did right

Getting onto iTunes was an early priority. To do that, I needed to create a namespaced RSS feed and submit it to Apple for approval. Rails has an RSS/XML Builder that made this a breeze. iTunes also recommended a mammoth 1200x1200 image as a show icon. I wasn't sure how long approval took - and I didn't want to submit with dummy content in case I was perma-rejected. I submitted as soon as the Podcast was ready and hoped I'd have approval in a couple of hours. I didn't, so I just launched anyway. Approval came about an hour after posting on HN - I like to think a reader from Apple pushed it along, but it was probably just the process. Sadly there's no way to see how many people are subscribed through iTunes.

For in-page playing, I opted for Mixcloud - and have had 1,349 listens on Mixcloud to date. I met the guys who founded this site back in 2007 at Minibar in London. I remember co-founder Nico Perez telling me they wanted to build the 'Youtube of extended audio content'. I was blown away by the guys but music startups seemed like a dead-end game - I wasn't overly enthusiastic. They've stuck to their vision like glue, and built a brilliant startup and community along the way. And to top it all, I think they may have bootstrapped virtually the whole journey living in a disused warehouse and eating pasta.

I'm also offering direct MP3 downloads. Bandwidth used on the site was 65GB over the first two days. This includes iTunes listens as iTunes podcasts are self-hosted. So far that's around 2,428 downloads, plus 1,349 listens on Mixcloud, plus Youtube.

I'd put a Mailchimp signup widget on the page when I first floated the idea. The mailing list now has almost 400 emails of people who have signed up in the last week.

What I missed

Youtube. I don't really understand yet why people listen to Podcasts on Youtube, but it seems that they do. It seems something to do with using the queuing. I totally missed this channel. It's a bit of a pain as I have to encode a video with the show logo as one long still using iMovie. I also seemed to get caught by a 15 minute cap on uploads. I will succeed next week.

Rumours of RSS death are greatly exaggerated. I didn't make the RSS feed prominent with a link on the page and people complained. There are lots of Podcast clients other than iTunes and I completely missed this.

Other Podcast networks. There's a Zune marketplace. I have yet to actually get into it, because I couldn't create a Live account. I overlooked these - if it's easy to submit I'll do it, but hopefully the RSS feed will suffice for everyone else.

Design

I used Twitter Bootstrap for design, but avoided the more obvious components (the top navbar) and changed the colour scheme using three LESS variables.

There's growing criticism of sites using Bootstrap and in a lot of cases this is fair - but the base structure and components of Bootstrap are invaluable (things such as the grid, typography, forms and tables). There's no excuse for launching a site that looks exactly the same as every other - it's really easy to change the defaults, and just a couple of changes make a world of difference. You seem to get a lot of bang for your time by doing the following:

  • Change the link color. This also changes the colour of primary buttons. (20 seconds)

@linkColor: #fd7416; a:hover { text-decoration: none; }

  • Either don’t use the topbar, or at least use a different background to the default black. (30 seconds)

@navbarBackground: #F3F3F3; @navbarBackgroundHighlight: #fefefe; @navbarText: @grayDarker; @navbarLinkColor: @grayDarker; @navbarLinkColorHover: @black; .navbar .brand { color: black; }

The Fontawesome icons look great (they may swiftly become overused), and I have a simple helper that I use in all my apps:

# the HTML markup for an icon def icon_tag(icon_name) content_tag 'i', '', class: "icon-#{icon_name}" end

I've used Markdown throughout because I just LOVE its simplicity compared with HTML or, god forbid, TinyMCE or similar.

Still to do

  • There's no mobile layout, and I haven't quite got my head around responsive design yet.
  • Comments. I tried to save effort by leaving comments in a HN thread. This didn't seem to work - the comments were all about the Podcast and not the content. But it may be that this was just because it was the first show. I'll leave this for the next one and then assess whether I should put comments on the actual show page.

I'd like to finish by thanking my three guests, Matt Brace, Chad Etzel, and Mike Mahemoff. The guests made the first show, and they will continue to do so.