Create a Micro Chameleon Blog with Sinatra A different style with every article

Chameleon Shot by Olivier Lejade

What the hell is a Chameleon Blog anyway?

Some chameleon species are able to change their skin colors and some Blogs are able to change their design with different articles.

The Blog of Jason Santa Maria may be the best known example.

I thought it would be a "neat" comparison. In other words the Blog has a basic design and additional stylesheets (and javascripts) can be applied to each article resulting in a changing look.

When and why should you want such a Blog?

When: If you are a lazy blogger but an eager developer, just like me. I tried several times to keep on blogging without success. I just have too many ideas in my head I want to try out. But from time to time even I like to share some experiments and insights (over 140 characters).

Why: To spice things up. You write and create at the same time, see every article as it's own. Even if you don't blog regularly readers will be happy to come back and see your new work (instead of just new content).

Another good reason is the ability to turn your article into a live demo for CSS and JS experiments.

Low level content management

To keep this "micro" I've choosen not to use any database nor any backend at all. Articles are written in plain HTML wrapped by ERB and stored as files in matching directories.

Once a visitor arrives a /articles/* route the Sinatra app checks if a directory named like the requested article URL exist. If so the file article.erb in the article directory will be rendered, otherwise it raises a 404 Not Found error and render the 404 page.

Become a Chameleon

Since Ruby can be executed in the article itself we set some public variables. @title are just printed in the surrounding layout.erb's </title> tag. @stylesheets and @javascripts are arrays with filenames stored in the same article directory.

In the layout file we include any additional stylesheet and javascript file after the default ones.

Last thing to do is to serve the additional files properly. If a *.css is requested we tell the client we serve a text/css. In reality we first compile the matching *.less file with LESS. This is just a personal choice, we could serve pure CSS too. But with LESS you have even more fun altering the Blog's design!

JavaScript's are served as they are. jQuery is already included by the surrounding layout.erb and ready to roll.

Homepage == Latest Article

Just like on Mr. Santa Maria's Blog we serve the latest article as homepage.

You could get the latest article via the creation time of the directory. But I've choosen to maintain a array of articles by hand. We use this list later on when generating the RSS feed.

When a visitor requests the root URL / we get the first hash from the articles array and render the article file.

Provide a RSS feed, we are not in the 90s anymore

Nothing easier than that. We just use Builder to generate the RSS. We loop through every article from the ARTICLES array and create the feed items.

As seen in the Sinatra Book.

Complete Code

Check out the complete code working together at the Public GitHub Repository.

But wait... How do you publish content?

Right now you can write and develop articles locally. Start the Sinatra app with rackup config.ru and your Blog is available at http://localhost:9292.

To publish new articles you either want to upload them via FTP or pull the changes from a remote git repository and restart the Sinatra app.

I'm working on a much better method publishing new stuff online hacking with GitHub webhooks. Stay tuned!