

Here's a quick and easy HTML and Ruby tutorial. You'll create a website using Sinatra, and it will be hosted on



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. 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:





Text editor - Sublime Text is a good one.





- Sublime Text is a good one. Ruby on Rails , and other programs. Use the Rails Installer.





, and other programs. Use the Rails Installer. Create a Heroku account and follow this guide to get set up.



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





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 You've now create a folder called demo in your computer, and it's now time to run, choose File > Open and open the folder called demo (usually that would be in your home folder!). You should see something like:



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

is a programming language. We use Ruby to write code.





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!





Open up your browser, and go to localhost:4567, you should see the "I'm alive!" message.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: You need to update this file because Sinatra needs to know the file (in our case is) you want to show.The result is the masterpiece shown in the following image: Ruby + HTML = Happy cat!





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: 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 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 emptyrepository 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!



