For starters, if you don’t have Rails yet, I suggest either installing Rails the hardcore way, or take the easy way out like I did: just download InstantRails. Okay, after you’re done with that part(I’ll be assuming you also took the easy way out) just unzip that into your root directory(I’m using Windows *gasp* so mine is located at C:/Instantrails/)

Now, all you have to do is bring up a command line(windows key + r, then type cmd), go to your Instantrails folder(type ‘C:/Instantrails/’) then type ‘use_ruby’. You’ll know you did the right thing when the directory changes to C:/Instantrails/rails_apps(just realized it’ll be better with screenshots…but I’ll do that later)

OKay, next in line is installing haml. Ready? Just type:

gem install haml

That’s it! Haml should be automatically downloading now. As you wait for that one, you can open up a new command line, go to your IR(due to laziness I’ll be calling Instantrails IR from now on) folder again, type use_ruby again and then type

rails myhamlizedportfolio

Actually you can name it anything you want. Doesn’t really matter(I sugest you pick a short name though). This will effectively create a blank rails app for you. And by that I mean it will create a folder named myhamlizedportfolio in your rails_app folder, complete with all the folders needed for a blank rails app. Next would be to install haml as a plugin for your portfolio app(you should still be in C:/Instantrails/rails_app when you do this):

haml --rails myhamlizedportfolio

Easy, right? Next, you just have to tell rails that you won’t be needing any database of sorts. So goand open the myhamlizedportfolio/config folder. Open environment.rb(with your favorite text editor – notepad) and look for the following lines

# Skip frameworks you're not going to use. To use Rails without a database  
# you must remove the Active Record framework.
# config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

Just take out the ‘#’ of the third line like so:

# Skip frameworks you're not going to use. To use Rails without a database
# you must remove the Active Record framework.
config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

Save this and close the file. Delete database.yml in that same folder by the way – you won’t be needing that. Next up is to fix your routes(if you want to understand what you’re actually doing, I suggest learning basic rails first like a good citizen, but if you can’t be bothered, then just follow these steps and believe it will work ). Open up routes.rb with notepad(it’s still in the config folder) and add this line right after the first line like so:

ActionController::Routing::Routes.draw do |map|
map.connect 'projects/:id', :controller => 'projects', :action => 'index'
 

That just basically means that to access your projects all you have to do is go to http://localhost:3000/projects/projectnamehere. More on that later. For now, save and exit again and you’re done with the config folder. We’re almost there! 

Now go back to your command line and while in your project directory(in our case, myhamlizedportfolio) and type

ruby script/generate controller projects

This will generate some files but what we really want to focus on is the newly generated projects_controller.rb located in myhamlizedportfolio/app/controllers. Open this file up with notepad, as usual, and well, just replace all the code there with this:

class ProjectsController < ApplicationController
def index
render :action => "#{params[:id]}/index"
end
end

Don’t worry if you don’t understand. That’s just a ‘continuation’ of what we did with routes.rb, basically telling our app that going to http://localhost:3000/projects/projectnamehere means it should render the page with the same name located in your views(again, more on that soon).

Actually you’re done setting up. You can now start coding with Haml. To start, let’s make a design project named RedHelloWorld. Go to your views folder(myhamlizedportfolio/app/views) and make a new directory named RedHelloWorld. Open up notepad again and type these:

!!!

%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
  = yield :layout

If you have reviewed Haml, that just basically creates the basic headers for your html page. Save that as application.haml and save it in the views/layouts folder(also delete application.html there if it exists). Create a new document yet again and type the following:

%head
  %meta{"http-equiv" => "content-type", :content => "text/html;charset=UTF-8"}
  %title hamlicious home!
  = stylesheet_link_tag 'demo'

  %body
    %h1.red HELLO WORLD!

Just by looking at the code, you’ll already know that Haml really makes things easier for you. A lot of time is saved since you won’t be needing to type the appropriate closing tags for each div, or other html tag out there. Save that file as index.haml and save it in views/RedHelloWorld (yup, create a folder with that name).

Next up, is your sass(css) file. Open up a new text file again and type:

.red
  :color #ff0000

Save that as demo.sass and save it in myhamlizedportfolio/public/stylesheets/sass/(you’ll have to create a sass folder). While you’re at it, also delete the index.html in your public/ folder. And now all you have to do is run and test your app! Go to your command line(yet again) and after use_ruby and going to your project directory, just type

ruby script/server

Wait til ou see the lines:

** Mongrel available at 0.0.0.0:3000
** Use CTRL-C to stop.

And that’s it. You can now access your demo by opening up your browser and going to http://localhost:3000/projects/RedHelloWorld

Hopefully that’ll work. Any problems, leave a comment Oh and before I forget, if you need the html and css files(like I do – I just like coding in Haml/Sass) just view the page, view the source and copy paste it in a blank document and save it as .html(in another directory of course). Get the .css file that will be generated in myhamlizedportfolio/public/stylesheets/ and use that for the css file of your project. Enjoy!

More on customizing this app sometime in the future. (namely how to make a “homepage” where you have a list of all your hamlized projects.