Will Stamper’s Blog

Setting up my Website

March 25, 2013

This was my first time setting up an honest-to-god website, and I feel like I learned a lot of lessons in the process. I tried out some new things, some that worked out well, and some that didn’t. I figured I need a blog post to get this thing going, and it’ll be nice to get a record of the whole process written down. So here goes nothing.

Finding a Host

I considered a few different domain names before I settled on this one. I looked at willstamp.er, but it turns out they don’t sell many domain names in Eritrea. I looked into wi.ll, but it turns out that .ll isn’t a real TLD. I also looked at willi.am, but an employee from Microsoft named Will had already jumped on it. I finally settled on willstamper.name for two reasons. First, another Will Stamper had already take willstamper.com. And second, it makes sense. It’s my name, and a .name domain.

I poked around a bit before I settled on my host, mostly looking for the cheapest option that provided .name domains. I looked at Namecheap for a bit, but finally settled on NearlyFreeSpeech. They’re about as cheap as I could find (especially for a low traffic site like mine), and they seem to have a pretty good corporate image as a bonus. So, I plunked down $25, and off I went.

Getting Started (Sort of)

Looking around the web, it’s pretty obvious that Bootstrap is the new hotness. It seems like everyone is using it, and for good reason. It just works. I actually ended up basing my initial version on HTML5 Boilerplate, mildly customized using Initializr. It pulled in Modernizr, JQuery, and a few other nifty libraries, which was just what I wanted. I snipped out a few pieces, uploaded some photos and swapped out text, and bam, I had a website.

Really Getting Started

So, now I had a website up and running. Good enough. A few months passed where I forgot about it. Eventually, I got a bit more free time on my hands and decided to try to get my site going for real. I had a few goals going in to the build:

  • Track my changes and issues on GitHub
  • Update the libraries I used to the newest versions
  • Have the website look and perform decently in modern browsers
  • Try not to break mobile or legacy support
  • Make it easy to deploy and maintain
  • Get some sort of blog started

Twitter and Me

The first change I decided to make was to embed my Twitter timeline. “Excellent, generated code. This should be easy!” I thought naively. And yes, it is in fact easy to copy and paste their code and get a timeline that looks exactly like the one they want you to have. Unfortunately, they really really don’t want you to modify their widget. I assume the purpose behind that is security based, but it drove me nuts. The iframe kept me from modifying elements inside of the widget, and despite my best efforts, I found it impossible to adjust the height of the widget after it was adjusted by an external script pulling values set in Twitter. I ended up settling for a reasonably sized static height, but I’m still a bit upset that I couldn’t just enter “100%” instead of “800px” in their form and have it work. Anyways, after getting it to basically work, I pushed my first commit.

Make, Build, Upload

The next major phase of my project was to create a system that would allow me to easily and quickly package changes for upload. I ended up picking good old-fashioned make because all of my tools were command-line based and it was easy. I replaced the javascript and css files that I’d gotten with HTML5BP with new versions from the various authors and set out to write a makefile to bundle it all up. I found uglify-js and clean-css to be very useful for my purposes. Pretty quickly, I had a Makefile that would package up my javascript and css and create a folder structure that mirrored my website. I fired up Cyberduck and pushed it out. I was now fully up and running.

Neat things in Part 2 (Electric Boogaloo):

  • Optimization and profiling
  • Switching over to Sass

Will Stamper
Senior Front-End Developer for iCloud