At some point in your life developing Ruby you’re going to have to build a microsite, whether static or dynamic. It may be for a client, a campaign, or your own business. Maybe you just want to learn. The point is, you’ll have to do it. Sinatra is the perfect framework for it. I recommend learning Sinatra before Rails anyways because Sinatra forces you to write more Ruby and rely on less magic. Not to mention RoR is overkill for the majority of the sites out there.
We’re going to use the following technologies:
- Sinatra – Light, lightening fast, and well documented Ruby app framework
- Sinatra Assetpack – Convenient asset handling with awesome features.
- PostgreSQL – Ya. You won’t even use it now, but we’re going to get you set up in case you decide to add more features than this tutorial.
- Rspec, Capybara – For the test suite this is pretty standard and makes life easy.
- slim – The most simple and Ruby like HTML markdown language out there. Makes HTML much more readable.
- Twitter Bootstrap – I can’t recommend this enough. These guys rock and save me so much time finding buttons, writing CSS, and JS.
- Capistrano – Capistrano is how we deploy at codelitt. You can write the perfect recipe to make every subsequent deployment a breeze, even over multiple servers.
- Thin in development and Passenger in production Thin is a great and light app server for development and production, but I use Passenger I have Nginx running the version compiled with Passenger already. DRY.
- Nginx – The most amazing piece of Russion engineering. It blows Apache out of the water in handling requests, speed, and static assets.
- Ubuntu Server 12.04 – All this technology is running on Ubuntu 12.04 Server Edition LTS. I know I’m usually a huge Arch Linux advocate, but frankly Ubuntu what I use on a server because of stability. Currently looking at Debian for my next server though.
Alright so Sinatra has no generators so you’ll need to create the files and directories. You’ll want an app directory for assets, db directory for migrations, and a views directory for the views. I’m calling my app codelitt so before anything get your app directory made and inside of it the other mentioned directories.
mkdir app db views
You’ll also need your basic files made. Make a file with the same name as your main app directory. This will be the name of your app. The majority of the model and controller logic will go in this file. It’s going to be a large piece of your application.
We’re using Bundler to handle our gems and dependencies so:
Rake file for Rake tasks:
In our Gemfile we’re going to put the basic gems which we’ll need to get things fired up.
And a settings file where you’ll enter information for your database connections.
You may have noticed that this is a bit more built out than a very simple, single-file Sinatra app. You could do the same things in a single file app, but this gets really messy. I prefer to build it in a more modulular approach.
For your environment you’ll want to setup a rvmrc file in the application directory. This ensures that RVM pairs your app with the right versions of your gems and Ruby.
We’re also going to want to create the gemset.
rvm gemset create codelitt
Now edit the .rvmrc file when you cd into your application directory it always uses the same version of gems and Ruby as are installed by bundle in your app.
Inside this file you’re going to enter this with the name of your gemset/ruby version instead of mine:
rvm use 2.0.0-p247@codelitt
Now we’ll initiate a git repo to handle the version control of our development process.
Create a new repo on Github. If you are lost, check out these directions for creating a new repo.
git add --all
git commit -am "First commit with basic files"
git remote add origin firstname.lastname@example.org:codelitt/codelitt.git
git push origin master
Now we’re going to get our basic gems setup so our app fires up for the first time.
We’ll create and setup a config.ru file to work with bundler so we can install and keep these gems updated easily.
Finally we’ll require the basic files needed and write our first route to our main app file so we can fire it up!
Now let’s install all the gems before trying it out locally.
Start your local server (which in development we have used Thin), by running
And then pointing your browser to http://localhost4567
Everytime you change your app file you’ll have to restart your server with ctrl + c and then running that command again, but for css and view file changes you can just reload the page in the browser.
For styling, I really can’t recommend Twitter Bootstrap enough. It makes life much easier, especially for those of us who like to focus on the backend.
Download Twitter Bootstrap here
Now create the css, image, and js directories in your app directory.
mkdir -p app/css
mkdir -p app/js
mkdir -p app/image
Unzip the bootstrap archive you just downloaded and copy the bootstrap files into these directories.
cp ~/bootstrap/css/bootstrap.min.css ~/code/codelitt/app/css/bootstrap.min.css
cp ~/bootstrap/css/bootstrap-theme.min.css ~/code/codelitt/app/css/bootstrap-theme.min.css
cp ~/bootstrap/js/bootstrap.min.js ~/code/codelitt/app/js/bootstrap.min.js
cp ~/bootstrap/fonts/glyphicons-halflings-regular.svg ~/code/codelitt/app/image/glyphicons-halflings-regular.svg
We’ll also create the theme.css file which we can use to edit parts of our site that aren’t taken care of by Bootstrap.
Now we’ll setup sinatra-asset pack to pick these up. You already have it in your Gemfile. You’ll just need to alter a few things in your main app file to make sure it works. You’ll add this to your main app file. Note that we also are now requiring the assetpack and slim gems in our main app file.
Now we are going to create our home page. We’re also going to create our basic layout file which will be consistent across the site.
The slim extension is what you’ll use if you went ahead and added slim to your Gemfile. It’s the templating engine we’ll use in this tutorial.
In the layout.slim we’re going to include all of the basic information of a normal page and then you’ll notice in the main diff that we pull in the specific page with yield.
Now we’ll add basic content to our index.slim file as a placeholder.
In your main app file you’re going to change your route to recognise this change. Going forward you’ll use this basic format to add any new pages/routes that you’d like.
Now I’m going to assume that you already have Ubuntu, Nginx, and Passenger already set up. If you don’t then follow this guide except don’t worry about installing the rails gem if you don’t want.
We’re going to deploy with Capistrano which is a sweet little diddy that I use for all of my deployments. It automates things. You just need the right recipe. First we’ll add the two gem’s we’ll need to our Gemfile
This will build the main files you need.
You’ll want to edit your config.ru file so it looks like this for my capistrano recipe.
Here is the Capistrano recipe for a near zero downtime deploy. Change the variables for your own app.
Now ssh into your deploy server and make a directory where you keep your websites called your app name.
Next you’ll need to add the site to your sites-available and then make a symlink to sites-enabled.
sudo ln -nfs /etc/nginx/sites-available/codelitt /etc/nginx/sites-enabled/codelitt
We’re pulling from the git repository so commit and push your final changes.
git add --all
git commit -am "final changes before deploy"
git push origin master
Now you can deploy your site. The script should automatically restart Nginx for you.
That’s it! You’re all done.