Introduction to Haml For HTML Layouts For Newbs – Part 1: Installing Stasis
Part one of four
- Introduction to Haml For HTML Layouts for Newbs – Part 1: Installing Stasis
- Introduction to Haml For HTML Layouts for Newbs – Part 2: Writing Haml
- Introduction to Haml For HTML Layouts for Newbs – Part 3: Markdown Syntax For Content
- Introduction to Haml For HTML Layouts for Newbs – Part 4: Final thoughts
So 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?
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:
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!