Building static pages in Rails 6

Posted by : at

Category : guides   tutorials


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!

Assumptions & Goals

  • You are on a system that has Ruby on Rails 6 setup and available to you
  • We want to have our application start on a “static” page

Getting Started

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

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 generate

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

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 app/views/pages folder was created during the generate. To match the view with our controller action, create a file app/views/pages/landing.html.erb.

You can put anything in there…right now we just need to verify that the view we want is what we see.

<h1>Landing Page</h1>

creating the route

With the controller and view setup, let’s update Rails so that it can find it. Open up the config/routes.rb:

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!

start the server

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:

rails s

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 config/routes.rb:

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 /marketing.

Assuming your Rails server is still running, try out both http://localhost:3000/landing and http://localhost:3000/marketing to see what happens.

adding a root Route

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 http://localhost:3000.

Let’s go back into config/routes.rb and add an entry for root:

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 pages#landing.

Mission Accomplished!

Where to next?

About Erik Yuzwa

My name is Erik Yuzwa. I'm a full stack web developer and software engineer from Calgary, Alberta.

Categories