Ben Franklin Blog

The blog of the band Ben Franklin from NY and NJ

HoT-MetaL

leave a comment »

[ Extremely nerdy tech post for my friends and their bands who may be starting their own websites. -Billy]

I’ve gotten a couple of queries from friends about wearebenfranklin.com as to what kind of software we’re using to design and host the site, so I figured I’d document it a bit for all those interested.

It’s an entirely static website. Nothing but good old HTML files, image files, stylesheets, and some javascript when we need moving parts on a page (e.g. the cycled images and quotes on the front page are the work of the jQuery cycle plugin). I think this is a pretty important key to the whole thing. Adam runs the Linux box hosting the site, Apache HTTPD serves up the files like it’s 1999 all over again. There’s no PHP, no Ruby, no goddamn web frameworks, no server-side processing what-so-ever, beyond fetching the files you requested. I need to inquire about caching, but the point is: it’s just a static website, you can host it anywhere, and it requires very little resource allocation or planning and configuration. If we need to move to another web host, it’s as simple as uploading the files. If Adam wants to switch the box over to a different web server altogether (I lurv NGINX), he won’t have to rebuild php or ruby or python modules and install gems and eggs and god knows what else. If we get a traffic spike, no database will have an existential crisis and give up serving our content (can you say Drupal? or Radiant?)

The reason you would consider using a scripting language like PHP for coding up your website is because you don’t want to repeat yourself. You want to make sure, for instance, that the same header and navigation code is on each page, and updated every time you need to change it, and you don’t want to have to re-do your work some 15 times. And some pages will need to display something extra for the page, perhaps you want the page title to match the page content! With basic HTML and a normal webserver, you don’t have a good way to achieve this without repeating yourself ad nauseum (server-side includes do not count, imho, and degrade performance), so you create a layout.php file, that handles the main page content, and you create subfiles for each page, etc, and you have some process like mod_php that runs in memory, runs the PHP code every time someone accesses the page, generates the HTML, and spits it back to the web browser.

Notice that “runs in memory,” part? Yeah, caching with PHP helps a lot, but it’s still a lot of processing that has to happen on every request for every page from every user hitting your site. If you get some major link action, any reasonable amount of traffic could easily crush your site under the load, even if you’re pretty good at configuring for this kind of crap, and have tweaked your memory allocation like woah. If you are using a framework, and store your page content in a database somewhere, you’re dead in the water in a high-traffic situation. Just pull the plug and say good bye to all that traffic.

What we do with the BF site is we just skip the processing step—rather, we only do it once. Why run a program to keep re-compiling the HTML output the user wants, when you could do it once and be done with it? I use a Ruby-based templating language called HAML to create my layout and page files. I use a program called staticmatic that acts as a webserver on my local computer to compile the files on request and show me what the website will look like when it’s rendered in my web browser. When I’m all done, I use staticmatic to build out the static HTML and CSS files that constitute what the user will see. Then I use Transmit to blast that shit up into /var/www/benfranklin on the linux box, and the site is updated. No re-starting Apache (or mongrel, or unicorn), no complex deploy process, nothing. (Side note: if you want to see some crazy Mac OS X programming, check out Transmit.)

The design step is just an easier version of old-school web programming. HAML is a breathtakingly simple way to build out HTML mark-up. I’ll never go back. I never have to remember to close a tag ever again. On top of that, SASS, or SCSS (a style-sheet nesting and templating language for use with HAML), makes styling up the site very, very easy. Seriously, if you write HTML and CSS code, start using HAML and SASS. Trust me, you’ll save a shit-ton of time. If you go back to writing out the HTML and CSS post-HAML, you’ll find yourself seriously annoyed at the syntax and missing all the style-nesting and nifty things you can do.

The major redesign I did recently, in which we ditched the whole red-and-black everywhere look for a brighter, grey-on-white design? Took just a few hours. Barely had to change any markup, I mostly just changed up the stylesheet code.

No expensive software, no Dreamweaver, no cutting and slicing page content from Photoshop. I use a bit of the Blueprint CSS framework to help layout the page with those .span-N elements, makes that part of things uber-simple. There are other grid layout frameworks out there, 960 is one, I believe. I use Textmate to edit the code, it’s just a really great and simple code editor of OS X. For image editing, I’ve been using Acorn and Pixelmator (both amazing programs for Mac OS X and a hell of a lot cheaper than Adobe software), because someone’s gotta make the logos. Neither software really compares to Illustrator, but we’re designing a website, not massive print media based on images.

All the javascript work I do is with the jQuery framework. Very easy to understand, and going it your own without this kind of help is like pissing in the wind. It’s cross-browser, and quite powerful. Prototype.js can suck it.

If you’re going to make a website, make it cheap and easy, and static. When the big traffic reaper comes calling, you can easily move your static content to a beefier setup or expand your allotted bandwidth/resource consumption with your hosting provider. You don’t want this to be you: “OMG have to build a new server with super framework and language version fuck-knows and I don’t know how many libraries, it’ll be four hours at least AAAAAAGH, why do I need mysql to run my website? I’m not a sysadmin, just a guitar player!”

Keep it simple.

Advertisements

Written by Ben Franklin

March 27, 2011 at 10:54 am

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: