How 5 years of reading Hacker News enabled me to build the website for my business

Update: Read the discussion on HN here http://news.ycombinator.com/item?id=4921024

5 years ago, I was 20 years old and talking with Sam Altman and his brother Max in my parents’ basement in St. Louis.  Sam was two years out from participating in the first YCombinator batch and was leading Loopt.  Sam’s brother Max and I were eager to build our own startup and we were working on a college dating website.  We were seeking advice from Sam, and he recommended we apply to YCombinator and he told us that we should contribute to a website called Hacker News because it would improve our chances of getting accepted into the program.

I wasn’t a programmer, I had never taken a CS class, and I had never written a single line of code.  I was naively building the prototype for our website using Dreamweaver.  Suffice it to say, I wasn’t quite the ideal candidate for a community like HN.

Eager to get accepted to YC, drop out of school, and be cool like Sam, I visited HN many times a day to attempt to find a post to which I could contribute.  Each time I went to the homepage I became more discouraged.  I could barely understand the titles of the posts, let alone the content.  How was I supposed to contribute anything of value to this community of genius hackers?

I got accepted to attend Startup School in 2008 and Sam was nice enough to show me around and introduce me to some folks.  I loved every minute of it, but I quickly realized that I wasn’t Sam, that YC wasn’t yet right for me, and that I should complete this business degree my parents were paying lots of money for.  So I withdrew my YC application and went back to doing college-kid stuff.

Even though I decided I didn’t quite have what it takes to build a successful startup, there was still something special about HN that kept me coming back.  I was hooked and I never let go.  I knew HN was teaching me about cool things, but I didn’t know that it would ultimately enable me to build cpustorage.com.

I started College Pick-Up Storage with my friend Brandon to help Chicago students by allowing them to store their stuff without having to leave home.  We knew we needed a website, and I bravely told Brandon that I’d build it myself!  Hell, I had read enough Hacker News to teach me everything I needed to know, right?

Well, about 11 weeks and 120 total hours later, cpustorage.com was ready for its first visitors.  Each primary tool, resource, service, and technique that I utilized to make the website were the result of something I had read on HN.  The journey to this point has been full of ups and downs.  But I didn’t give up when progress was slow, and it was all worth it when I was filled with that amazing sense of accomplishment and joy you get when you slowly watch those lines of HTML and CSS you’ve written in your text editor come to life perfectly in your web browser.

I’d like to share a bit about how HN enabled me to build cpustorage.com in the hopes that it will help someone else launch a side project or business.  My approach wasn’t the most efficient, but I was able to make it work due to the great community on HN and their awesome contributions to the site.

(Disclaimer: We’re bootstrapping College Pick-Up Storage; some links below are affiliate.  I hope you don’t mind.)

Getting Started – WordPress and WP Engine

I’ve known of WordPress as a blogging platform for many years.  However, it wasn’t until I saw Patrick McKennie’s comment on creating a simple WordPress site for his Appointment Reminder tool that I began to consider WordPress as a tool for creating a business website.  After some initial research into the features of WordPress and the available plugins, I decided that I’d give it a try.

Now I needed a host.  WP Engine immediately came to mind.  I’ve found value in Jason Cohen’s blog posts in the past and I’d seen WP Engine mentioned many times on HN.  So I went to their website and was impressed with their features and was comfortable with their price, so I signed up.

I just have a blog – and it’s ugly

After a few hours of experimenting with the WP Engine settings, breaking my DNS multiple times, and exchanging a few emails with the WP Engine support team, I was up and running with my very own website accessible through my own URL.  That felt pretty good – I was making progress!  But man, the site looked like shit and didn’t have any of the functionality I needed.

But wait, Patrick mentioned that he used a “theme” for his Appointment Reminder website.  And I also remembered reading about WooThemes, which I was fairly certain had templates for making websites.  I initially settled on the Canvas theme, but after many hours customizing it I wasn’t getting anywhere.  So I decided I needed a more styled theme, and I went with Whitelight.  If you compare my site to the Whitelight theme, you’ll see there’s almost nothing in common.  I added my own HTML and CSS to construct the site, but Whitelight was a necessary base.

Chrome Developer Tools: Will you marry me?

So now I had a Whitelight themed WordPress site up and running.  I was able to make some progress towards what I ultimately envisioned the site to look like with the provided tools.

But there was still a problem.  I had a very exact vision of what I wanted my site to look like, and the Whitelight theme was not getting me there.  Visitors to my site needed to be able to tell exactly what our service was about from the moment they landed on our homepage.  I needed our potential customers to realize how easy our storage solution is while gaining a sense of trust and respect for our company.   But I couldn’t do this using the theme administration tools, there just wasn’t enough flexibility.

However, in the WordPress admin menu I found a link titled “editor”.  In here the file “style.css” opened.  I immediately noticed this warning:

WARNING! DO NOT EDIT THIS FILE! To make it easy to update your theme, you should not edit the styles in this file. Instead use the custom.css file to add your styles. You can copy a style from this file and paste it in custom.css and it will override the style in this file. You have been warned!

Aha!  This must be what I need.  But how do I know what to change?  Well this style sheet has some comments in it, maybe I can figure it out through trial and error.  As you can imagine, using the built-in WP editor, copying styles into the custom.css file, and randomly changing values and refreshing my website to learn what each line of CSS did was an excruciating process.  There had to be a better way.

After speaking with my friend Ryan about my frustrations, he reminded me about the Chrome Developer tools.   The developer tools were a huge game changer.  I could now easily tell what CSS elements were affecting a certain part of the page and test changes in real-time.  I was in love.

So I was able to make changes to the CSS to get the desired look that I wanted, but using the editor within WordPress was turning out to be a real pain.  Each time I saved a change it would take me back to the top of the page, there are no line numbers, no global search, no find and replace.  It became perfectly clear that I needed to find a better way to edit this CSS file.

Sublime Text 2 – Starting to feel like a hacker

I set out to find a text editor that I could install to edit my stylesheets locally.  I wasn’t sure how I’d get the files from the server or upload them back up, but I knew there had to be a way.

I searched for “text editor” on Hacker News and found a poll asking HN what text editor they used.  Perfect.  The number one editor was Vim, so I installed it.  But it just opened up a blank, black box.  I had no idea how to use Vim, and with no desire or time to learn it, I thought I’d give the number two most-used editor a try.  Sublime Text 2.  Way better.  Tabbed files, cool color coding, a file-tree and a minimap.  This thing is starting to make me feel like a real hacker!

Git Push-to-Deploy – Really feeling like a hacker 

When I signed up for WP Engine, I received an email from the co-founder, Ben Metcalfe, announcing their Git-Push-To-Deploy feature.  At the time, I had no idea what that meant or if I’d need it.  But now that I had Sublime on my machine and the need to edit my CSS locally, I remembered this email and decided to see if it could solve my problem.  At first glance, it looked promising.  So I followed their instructions to download a copy of the site locally.  I opened up my custom.css file in Sublime Text 2 and it was glorious: color-coded, numbered lines, find and replace, auto-complete, this was going to be awesome.

But now I had to install Git and figure this whole push-to-deploy thing out.  I downloaded Git and opened Git Bash.  Great, a command prompt.  Git took a bit of reading and experimenting for me to get the hang of.  Eventually, I was able to figure out how to create a repository, track my changes, add them, commit them, and then push them to my site with WP Engine.

The Tipping Point

After at least 60 hours of painfully slow development on my website, I finally had a system configured that allowed me to actually focus on creating content and styling my website.  I could use the Developer Tools to inspect the CSS of parts of sites that I thought were nicely designed (mainly Stripe – John and Patrick, I hope you don’t mind I borrowed some of your homepage design!), use that as a template to style my own CSS, experiment with it in real-time on my site, then write it easily using Sublime, and upload it quickly through Git.

This flow allowed me to feel productive and gain tons of satisfaction and enjoyment from my work.  I would focus on an area of a page that I didn’t like, think about the best way to design it to get my message across, get inspiration from other sites, hand-draw a new design complete with CSS class and id names, write it locally with Sublime, push it to my site with Git, and then just continually tweak it using the developer tools.

It’s an amazing feeling to sit down with an idea in your head about how a certain part of your website should like, design and implement an initial version, and then tweak it until finally that idea you had shows up perfectly on a web page that is viewable by anyone in the world with access to the internet.  I was hooked and loving it.

Stripe – I knew I had to use it

Brandon and I wanted our customers to be able to sign up online and pay us a deposit.  Therefore, we needed a way to process credit cards.  As an avid HN reader, it should come to no one’s surprise that Stripe (a YC alum) is the only payment processor I considered.

But I needed more than just a payment processor, I needed an easy way to create a sign-up form and collect information from my customers.  I needed a web form.  I had heard about WuFoo on HN before (another YC alum), but they didn’t have integration with Stripe.  Well, I just had to use Stripe.  So with one Google search I learned about FormStack and their integration with Stripe.  Done deal.  I made my form with FormStack and found that it had everything I had hoped for and even more.

The remaining pieces of the puzzle

Images are important, and hard to get right.  Luckily, I had some friends  to help.  My awesome friend and amazing designer Rachael designed our sweet logo and my equally talented friend Courtney designed the three main illustrations depicting how our storage solution works.  The rest of the images are a combination of things Courtney created or that I found on Veer.com, istockphoto.com, or thenounproject.com.  I also learned Gimp and used it to get the media on the site to look the way I wanted.

For accounting, we’re using FreshBooks, mainly because it’s easily integrated with FormStack.

For our mobile version of the site we use duda mobile.  While the Whitelight theme was originally responsive, all the custom CSS and HTML I added broke it.  I didn’t have the time or skill required to make a mobile version of our site, so I gave duda mobile a try and was impressed.

I love Spotify, and I can’t write about building this website without mentioning my favorite playlist of electronic music that helped me power through and enjoy those intense coding sessions.  Feel free to subscribe: Zotos’s Big Hits

This website is not cheap

While I was able to create a website that I think is pretty solid given my experience level, it’s not cheap.  Here are our monthly costs:

  • $99 – Hosting.  In order to get SLL on my sign up page, I needed the professional plan from WP Engine
  • $14 – FormStack
  • $9 – Duda Mobile

So that’s $122 in monthly costs to keep this site running – more than we’d like to be paying.

And our startup costs were:

  • $42 – WooThemes (on sale)
  • $200 – Custom Illustrations
  • ~$40 – Stock Illustrations

What’s next?

The website is up, but unsurprisingly, people have not come (well, except for a few hundred of our Facebook friends).  Our business is cyclical, and our first major boom could come in the spring when students move out for the summer.  So we have a few months to make ourselves known to the students in Chicago and communicate to them that our service is helpful and worth their money.

Once we get some customers, then we’ll do everything we can to exceed their expectations and provide them with an amazing experience.  We want to make these students’ lives easier and ensure that they’re happy they worked with us; that’s what it’s all about.

Thank you, Hacker News.

To conclude, I would just like to say thanks to everyone who has contributed their time and effort to shaping Hacker News into the great community and resource that it is.  Without Hacker News, I would have never had the confidence or the resources required to create cpustorage.com.  And I had so much fun along the way that I know this is just the beginning of my hacking career.  I already have so many new ideas for cool things that I’d like to build and I can’t wait to build them.  Ultimately, Hacker News has helped shape my career and personal life in many ways, and for the most part I believe I’m a more curious, happier person because of it.

 

Thanks to Jack Altman, Max Altman, Ryan Hoch, Anne Strong and Bud Strong for reading drafts of this post.

No comments yet.

Leave a Reply