This is a guest blog post by Rosario Rascuna, a freelance web developer and Clojure consultant in London. Rosario has worked with several startups in Brighton and London, he's the developer of the London Startup Map - Roundabout.io . You can follow him on Twitter @_sarhus.


Here's a quick and easy HTML and Ruby tutorial. You'll create a website using Sinatra, and it will be hosted on Heroku. Even if you are a complete beginner, it should take less than a day!

You won't understand everything we'll do in this tutorial, but the idea is to introduce you to some of the things that go into coding a simple website and putting it online.

Before getting started there are few things you need to install on your laptop:


Tools of the trade: Terminal and Text Editor

The Terminal (Linux and Mac OSX) or Command Prompt (on Windows) is an easy way to run programs on our computer. Find it in your computer (using "Finder" or "Find a Program") and run it.

Create a folder

Let's start by creating a folder (or directory): On Linux and Mac OSX machines you have to type mkdir demo. If you're using Windows you have to type md demo. Remember you also need to hit the Enter key to execute the command. After that, change the working directory, (the current folder where you'll be typing the commands) with cd demo and hit Enter.

Open a Project

You've now create a folder called demo in your computer, and it's now time to run Sublime Text, choose File > Open and open the folder called demo (usually that would be in your home folder!). You should see something like:
Sublime Text Editor

Setting up Heroku

Heroku will take care of hosting your website. You'd need to create an account: Inside the folder demo you'd have to type the command: heroku login.

The command heroku will then be executed. It might be possible you'd see something about generating public keys. If that's the case, just type yes and press Enter. Heroku won't work otherwise.

Ruby and Sinatra

Ruby
 is a programming language. We use Ruby to write code. Sinatra is a micro framework written in Ruby and we use it to create our website.


Backend
 is the code written to handle database connections, email confirmations, and routing of URLs. Frontend refers to HTML pages, images, CSS styles and Javascript.


Gemfile
 and site.rb files

Create a new file using Sublime Text. You can right right on the demo folder and click on New File. Save the file with the name Gemfile.


Note
: the name of the file is capitalised, it's important!


Edit your Gemfile, and write these two lines of code:

source 'https://rubygems.org'
gem 'sinatra'

The Gemfile is a special file. It specifies how to download and install Sinatra on your computer.

Create another file (under the demo folder) and save it with the name site.rb. It will have to contain the following code:

require 'sinatra'
get '/' do
  "I'm alive!"
end

The site.rb file is a working program and it displays the string "I'm alive!". It's written in Ruby and it uses Sinatra to handle the web requests.


Note
 - Remember to save the files after you've changed their content!


Start the server

You still need to install Sinatra (and few other packages). In the Terminal (or Command Prompt) type the command

bundle install

You'll see a list of packages (gems) being installed in your computer. After the installation is complete, you can start the server. You'll do it by typing the command:

ruby site.rb

If everything is setup correctly you'll see something similar to the following message:

Sinatra/1.4.7 has taken the stage on 4567 for development with backup from Thin
Thin web server (v1.5.1 codename Straight Razor)
Maximum connections set to 1024
Listening on localhost:4567, CTRL+C to stop

Open up your browser, and go to localhost:4567, you should see the "I'm alive!" message. 
Type localhost:4567 in the website address bar of your browser
Congratulations! That's a very simple web server, running on your local machine!



Note
: If you change the content of site.rb you need to stop the server, pressing Control+C. You will have to re-run the command ruby site.rb.


HTML and CSS

Showing a simple message isn't really useful. It would be better to show and actual HTML page. Sinatra makes it easy, just create a views folder inside demo and you're ready to go.


Note, you can create a folder inside Sublime Text by right clicking on the demo folder.

Inside the views folder, you need to create a filed called index.erb. The content of the index.erb file can be something like this:

<!doctype html>
<html>
  <body>
    <h1> This is a title </h1>
    <p> 
        This is a paragraph. And the following is a link at 
        <a href="http://coderwave.com"> Coderwave </a>
    </p>
    <p> You can also show images, like the following one </p>
    <img src="http://placekitten.com/g/200/200" />
  </body>
</html>

Update site.rb

Update now site.rb with the following code:

require 'sinatra'
get '/' do
  erb :index
end

You need to update this file because Sinatra needs to know the file (in our case is index.erb) you want to show.

The result is the masterpiece shown in the following image:Ruby + HTML = Happy cat!
Obviously that's just the beginning. If you'd like to learn more about HTML (and CSS for styling) you can read a Beginner's Guide to HTML and CSS.

Deploy

If you'd like to publish your website online (in technical terms: deploy), you only need to run few commands from the Terminal (or Command Prompt).

First, initialize an empty git repository by typing this in the Terminal:

git init

Then create your website on Heroku by typing this:

heroku create

After you've created the website (another term is application), you should see the url in the Terminal. It will be something like http://cloudless-forms-1234.herokuapp.com. This url will be automatically generated for you by Heroku.

Setup config.ru

Heroku needs a configuration file in order to publish your website. This file is called config.ru:

require './site'
run Sinatra::Application

Save the file config.ru inside the demo folder. The first line tells Heroku where's your application file (in our case we've called it site.rb). The second line will tell Heroku that it's a Sinatra Application.

Publish the changes

You now have a name of a website on Heroku, but you still need to publish your website. That's also easy. Again in the Terminal, you need to run these commands:

git add .
git commit -am "first commit"
git push heroku master

Hopefully everything went according to the plan, and you should see a message in your Terminal that looks similar to this:

remote: -----> Compressing...
remote:        Done: 17M
remote: -----> Launching...
remote:        Released v4
remote:        https://nameless-spire-13709.herokuapp.com/ deployed to Heroku

Point your browser to the url created for you by Heroku. In the example above, that's https://nameless-spire-13709.herokuapp.com/. But it will be something different for you.

Well done, the website should now be online!