01 March 2020
One of the most common starting points of a website or web application are pages that either provide “static” or unchanging content. There are two main reasons for this; one, most web applications or sites are trying to build a connection with the visitor, and I’m not talking about the technical network connection. From the second you arrive at a website, the company or people behind it are trying to create a human connection with you. Secondly, most web applications / sites rely on communication with a database. While this communication is speedier than ever, Google has shown statistics in the past that the bounce rate (eg. visitors leaving your site) is proportional to the time it takes to load the starting home page. In other words, the longer it takes to load your website, the faster people are leaving it.
With that in mind, the focus of this tutorial is to go through the process of putting some static pages together in Rails 6.
I’m super excited to help you make this happen!
Let’s begin at the beginning and take each goal little by little.
Open your shell and head to your favorite project directory. Then let’s
rails new the project!
rails new static-pages cd static-pages
Easy peasy. As you may know, rails by default already sets up the project with
git add . git commit -m "initial commit"
Ok, now let’s get a static welcome page going. Usually, you’re explaining your product, or your personal / company goals.
Let’s use the handy
rails generate to help us out.
remember you can use
rails g as a shortcut for
rails g controller pages
Once the generation is finished, find
app/controllers/pages_controller.rb. By default, it’s an empty controller, so
let’s add a new action to represent our static page, called
class PagesController < ApplicationController def landing end end
With an action in our controller defined, let’s create a view to match. You’ll notice that an
was created during the generate. To match the view with our controller action, create a file
You can put anything in there…right now we just need to verify that the view we want is what we see.
With the controller and view setup, let’s update Rails so that it can find it. Open up the
Rails.application.routes.draw do get "/landing" => "pages#landing end
You’re adding a url mapping here. This new mapping means that whenever your browser uses
/landing, then Rails
can find the controller / view template you are trying to get to.
Let’s test it out!
Since we have a controller / view template configured, let’s see how it looks right now in the browser. From the root of your project folder:
Open your browser to
http://localhost:3000/landing. You should see the words Landing Page!
To help drive home this concept between our router, controller and view. Let’s update
Rails.application.routes.draw do get "/marketing" => "pages#landing end
We changed the mapping so that Rails will use the same
pages controller when it receives a request for
Assuming your Rails server is still running, try out both
see what happens.
With our static pages configured, there’s the question of what Rails refers to as the
root Route. This is usually
the default index page of your application or website that is displayed when you visit the website - in our specific
case, this would be the page that is shown by our server when we
Let’s go back into
config/routes.rb and add an entry for
Rails.application.routes.draw do get "/marketing" => "pages#landing root "pages#landing" end
In other words, we’re creating another
url mapping for the default / root Route.
Now open your browser, and head to
http://localhost:3000. Instead of the familiar “Yay! You’re on Rails!” page,
Rails will take us to
Where to next?