Introduction to Haml For HTML Layouts For Newbs – Part 1: Installing Stasis

Introduction to Haml For HTML Layouts For Newbs – Part 1: Installing Stasis

Part one of four

Learning something new is awesome, and writing about what I am learning helps me get it into my head a lot more. Yesterday I started learning how to use Haml, and once I started, I thought I would pass on this newly acquired knowledge on to you. This series is for NON programmers. You might know javascript/jQuery, but the people I am writing this for are not really going to have any real knowledge of programming. If you have just gotten into using Sass, then this is a perfect next step for you. Here are the topics in this four part series:

Haml logoSo what the hell is Haml anyway? Well, imagine taking out the syntax of an HTML document, and replacing it with a cleaner syntax. It also adds a ton of other functionality, but what I’m going to be talking about in this series is just basic HTML layout writing. Mainly because I just got started with it myself, so the other stuff will have to wait.

Let’s install Stasis

I have been wanting to use Haml (a Ruby gem) for a long time now, but I didn’t know how to go about doing it. If you are not familiar with the command line or Ruby, things like this are intimidating. Thanks to another Ruby gem, called Stasis, I was finally able to get a Haml file rendered into an HTML file and finally get started with seeing what it is all about. I love learning new things, so thank you to SmashingMagazine for tweeting about it yesterday. Who would have thought they would be the ones to let me know about this?

Stasis logo

First, we need to get a few things installed. Most importantly, Stasis, but even before that, we need to make sure we have a few things done. Open your command line and make sure your Ruby Gems are updated (it’s probably just a good idea to do so):

NOTE: the ‘$’ seems to be a universal thing when showing that you are writing a command line instruction. No idea why, but I’ll use it as well. Just note that you do NOT type the ‘$’ in the command line.

$ gem update --system

Then install Haml:

$ gem install haml

That was the easy part. Now onto the annoying crap. I had to install a bunch of gems to get stasis to work, and while I am not sure which ones are required, I recommend doing all of them at the same time. The one I know you need for certain, is the Ruby DevKit. Go there, download it, extract it (I did it straight to my C: drive), and then go to the command line, change directories until you are at the location of where you put the DevKit, and type:

$ ruby dk.rb init

After you get the confirmed initialized message, type this:

$ ruby dk.rb install

Now, it might just work after that, but mine was still having issues, so I went to the Stasis page on the Ruby Gems website and installed everything that was listed at the bottom:

$ gem install directory_watcher
$ gem install redis
$ gem install slop
$ gem install tilt
$ gem install yajl-ruby
$gem install rake
$gem install rspec

I’m guessing you don’t need all of that, but it didn’t hurt. Once you have all of THAT done, NOW you can install Stasis:

$ gem install stasis

Start a new project

Now that you have Stasis installed, go and create a folder to test all this crap in. Create a new file and save it as ‘index.html.haml’ using a text editor (Notepad++ for me!), within that folder. Next, go back to the command line and change directories until you are in that folder, then:

$ stasis

This should place a folder within the one you created, called ‘public’. In it, you will see a file called ‘index.html’.

Can I use Haml now? Please?

YES! Just not in this post. I’ve probably already went beyond your capacity to really pay attention to me anymore, so you shall have to wait until the next post! I’ll let you see a hint of what Haml is all about though.

What you might write in HTML

<div id="container">
    <p>This is typical crap.</p>
</div>

The same thing, but written in Haml:

#container
    %p This is typical crap.

So what will we be learning in the next post?

The fun stuff of course. Haml’s basic syntax as I walk you through how to write up a standard static web page. The third post will be on writing the content (what you read on the site) using Markdown syntax, and putting it within Haml. The final post in the series will be my thoughts on all of it combined.

If any pros have an easier way to just use Haml (and quickly), I’d love to hear it!

Coupon Code: webmachine

Tags: ,

One Response to “Introduction to Haml For HTML Layouts For Newbs – Part 1: Installing Stasis”

  1. Saiprasad N says:

    I want to use HAML & Mustache with PHP on UBUNTU & m not able to install haml. Please help.

Leave a Reply to Saiprasad N