This is a simple guide with one intention: help get something online that a person can play with and improve.

Phase 1: Getting Something Online

Install bundler

gem install bundler

Create new repo on Github with readme

Clone down to computer

git clone .....
cd directoryname

Add Gemfile

bundle init

Add Sinatra gem to Gemfile

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

Install gems

bundle install

Create hello.rb

# hello.rb
require 'sinatra'

get '/' do
  "Hello World!"
end

Test run it and open in browser with localhost and port number described

ruby hello.rb

Add config.ru for Heroku

# config.ru

require './hello'
run Sinatra::Application

Push to Github

git add .
git commit -m 'first working version'
git push origin master

Create Heroku server (will need to log in the first time)

heroku create newappname

Push to Heroku server

git push heroku

Phase 2: HTML

Create a views folder for html

mkdir views

Create views/index.erb

// views/index.erb

<html>
  <body>
    <h1>
      Index
    </h1>
    <p>
      Holy cow I'm a webpage!
    </p>
  </body>
</html>

Create views/contact.erb

// views/contact.erb

<html>
  <body>
    <h1>
      Contact
    </h1>
    <p>
      Leave me alone!
    </p>
  </body>
</html>

Create route to index and contact in hello.rb

# hello.rb

require 'sinatra'

get '/' do
  erb :index
end
get '/contact' do
  erb :contact
end

Restart server, push to GitHub and Heroku

ruby hello.rb
git add .
git commit -m 'We have pages now'
git push origin master
git push heroku

Phase 3: CSS

Create public/style.css

/* public/style.css */
h1 {
  color: green;
}

Add to erb files:

<link href="style.css" rel="stylesheet">

Make sure it works!

Phase 4: Add template

Add template file views/layout.erb

// views/layout.erb

<html>
  <body>
    <h1>
      I’m the Template Title!
    </h1>
      <%= yield %>
  </body>
</html>

Specify layout for each page in hello.rb

# hello.rb
require 'sinatra'

get '/' do
  erb :index, layout: :layout
end
get '/contact' do
  erb :contact, layout: :layout
end

Change each page

<p>
  Holy cow I'm a webpage!
</p>

<p>
  Leave me alone!
</p>

Phase 5: Add Variables

Add variable in hello.rb

# hello.rb

require 'sinatra'

get '/' do
@title = ‘INDEX’
  erb :index, layout: :layout
end

get '/contact' do
@title = ‘CONTACT’
  erb :contact, layout: :layout
end

Add in template

<html>
  <body>
    <h1>
      <%= @title %>
    </h1>
      <%= yield %>
  </body>
</html>

Phase 6: Add server reloader

Install shotgun

gem install shotgun

Restart server with shotgun

shotgun hello.rb

Phase 7: Would you like to know more?

Check out Jump Start Sinatra

Deploy a simple website on Heroku

2018-12-08

Phase 1: Getting Something Online

Phase 2: HTML

Phase 3: CSS

Phase 4: Add template

Phase 5: Add Variables

Phase 6: Add server reloader

Phase 7: Would you like to know more?

Related Posts

Markdown and Code Blocks with Redcarpet and Rouge

Backup your Heroku databases with a shell script

Add automated testing with Guard

Make a contact form with Mailgun

Deploy a Rails app with Dokku and Digital Ocean