Deploy a simple website on Heroku

Created: December 08, 2018 14:47 | Updated: December 15, 2018 13:56
Tags: Sinatra, Heroku

This is a simple guide with one intention: help get something online that a person can play with and improve. Feel free to email me with any questions, I will update this as needed!

Phase 1: Getting Something Online

Sign up for Heroku

Install command line heroku

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

Written by Alan Vardy. Let me know how I can make this better!