Static Websites, the Ruby Way
Published: October 22nd, 2007If you’ve ever wondered the best way to create static websites with Ruby, I have your answer! The best part about the answer, is that it involves HAML and Sass. Here’s a brief tutorial on how to use StaticMatic…
No need to fluff this, let’s get right into the nitty-gritty and download the beast that powers this all “StaticMatic”.
Load up your favorite terminal, and type the following1 to get the gem:
sudo gem install staticmatic
Getting started
Awesome, you still with me? Good! Now do the following to setup your initial project in a directory of your choosing:
staticmatic setup my_portfolio created my_portfolio/site/ created my_portfolio/site/stylesheets created my_portfolio/site/images created my_portfolio/site/javascripts created my_portfolio/src/ created my_portfolio/src/pages/ created my_portfolio/src/layouts created my_portfolio/src/stylesheets created my_portfolio/src/partials created my_portfolio/src/helpers Done
Starting the server
Great, now we have our skeleton directory structure for our amazing static site. Let’s start the server up!
cd my_portfolio staticmatic preview . StaticMatic Preview Server Starting... Running Preview of . on localhost:3000
Now if you run your browser over to http://localhost:3000 you should see “StaticMatic!” nestled in a h1 tag. We’re doing great so far, but this isn’t enough content for a static site, let’s change the title to reflect our portfolio, then maybe explain why our portfolio is so amazing.
Open up the directory in your favorite editor. In my example, I am using Textmate2 :
mate .
application.haml
This image is an example of how the directory structure should look, and how I am going to be navigating through the files. Let’s open up ‘application.haml’ in my_portfolio/src/layouts.
If you have ever used HAML3 before this should already make you feel right at home, and poised to pop off a cork of champagne. Let’s continue with changing the title and then using some of the helpers that StaticMatic provides to make static-development even easier.
!!! %html %head %title StaticMatic! = stylesheets %body = yield
This file is very similar to a layout4 in a Rails application, to actually change the content of the home page we need to open up that specific page. That is what yield is doing under the %body tag. Go ahead and open up my_portfolio/src/pages/index.haml. You should see this simple line of code:
%h1 StaticMatic!Making the changes
Go ahead and change it to this:
%h1 My Portfolio! %p I'm glad you found my portfolio, did you know that I am the best paper folder in the world? Yep, take a look at these pictures for proof! = img "picture1.gif" = img "picture2.gif" %p Weren't those pictures amazing? I know they were! = link 'click here to see my gallery!', 'gallery.html'
Wow, isn’t that beautiful?! Do you already see the amazing potential? Go to http://localhost:3000 on your browser and you should immediately see the changes reflected. Static development couldn’t be any easier!
That’s it for part one, in part two I will touch on how to use partials, even more helpers, and even give a brief tutorial on taking advantage of Sass5.
Extra tidbit: typing staticmatic over and over again got annoying to me, so what I did was make a quick shortcut in my ~/.bash_login to execute it with ’sm’. Here’s how to do that:
Load up your terminal, then open up ~/.bash_login using your favorite text-editor:
mate ~/.bash_loginThen add this line in there:
alias sm=staticmatic
Bam, as simple as can be. Make sure you restart your terminal or execute6 your bash_login file to make sure the changes are reflected.
edit: part 2 is now available to read
- You can also check out the source via subversion and using it as a vendor, much like Ruby on Rails. svn checkout svn://rubyforge.org/var/svn/staticmatic/trunk staticmatic [↩]
- http://macromates.com/ [↩]
- http://haml.hamptoncatlin.com/ [↩]
- The layout file is basically the look and feel of the application, and then sections of the site are yielded in different parts, e.g footer, header, content. [↩]
- http://haml.hamptoncatlin.com/docs/sass [↩]
- In your bash prompt type “. ~/.bash_login” without the quotes and your changes should be instantaneous [↩]
Hello, this looks like a great article! I tried runing staticmatic setup my_portfolio ad ruby staticmatic setup my_portfolio
on windows xp but it gave error message command not found. Is this linux only?
Are you positive you installed the gem? “gem install staticmatic”.
Wow Dan, this is very cool, and a lot less trouble than an extensive caching system like Mephisto uses. Good find!
Thanks for this article Daniel. I was unaware of this technology before, and of how much time I can save. I normally create my static sites using by editing a bunch of pre-written code templates I created over time, and it’s a slow, tedious and error prone process. StaticMatic, Ruby and HAML really look like a time saver. Thanks for the intro! Looking forward to more of your articles.
@Jenn
If you’re using Instant Rails you should use the IR command line, not the default Win has.
[...] While reading different takes on Haml which really got people excited quite a bit, I found interesting take on using ruby and haml and sass for development of static websites. This is not something I would do in this age of web2.0 but I bet some people can find this usefull. Here is the link. [...]
[...] Static Websites, the Ruby WayRunning Ruby tests in multiple proccesses via deepTestGod, an amazing Ruby monitoring [...]
[...] Static websites with Ruby [...]
[...] Static websites with Ruby<br/> [...]
Ready. Set. Go.
In terms of the formatting, you're allowed to use markdown, textile, or basic html; it's truly up to you -- what strikes your fancy?
You don't have to worry about your e-mail address being sold to a russian-spam-mafia. I'm only going to use it for my own weird needs; like asking you out for a date on a lonely night of coding.