March 24, 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.
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.
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.
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:
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.
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):