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