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.
Ruby on Rails, 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
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.
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
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:
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.
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.
<!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 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:
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:
Then create your website on Heroku by typing this:
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.
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!