How to Create Static Pages in a Ruby on Rails application
By: Lukasz Muzyka, On:
Alright, we have created our first application in Ruby on Rails. The problem with this is that it only presents a default landing page which is auto generated by Rails itself. This is not very useful. We want our application to start serving some content that is meaningful to the users of our app.
Our first step in building some functionality into our application will be giving an ability to present some static pages to the user, for example, the home page or the contact page. Of course, "static" doesn't mean that those pages won't be able to do some cool stuff.
Step 1: Generate a Controller
We will start by creating a 'Controller'. A controller is one of three main types of files we will be creating along the way. The other two are "Model" and "View". All three together form the MVC (Model, View, Controller) architecture that is used to organize the code inside of an application. Each element of MVC has a different role and as we go along, you will learn how we utilize their abilities.
Let's go ahead and use rails generator. Navigate to the folder from your Terminal
$ cd Documents/projects #depending where you put your application
As a reminder: use
$ ls to see the contents of folder you're currently inside. Once you're inside the app you can generate new controller:
$ rails generate controller static_pages
This will generate several files:
- app/controllers/static_pages_controller.rb - actual controller
- app/views/static_pages - folder that will hold our HTML templates
- test/controllers/static_pages_controller_test.rb - test file for the controller
- app/helpers/static_pages_helper.rb - helper file
- test/helpers/static_pages_helper_test.rb - test file for the helper
- app/assets/stylesheets/static_pages.css.scss - CSS file
In this tutorial we will only use controller and folder for views. Our goal here is not to do proper TDD (Test Driven Development). If you're interested in writing tests with RSpec, I highly recommend going to Michael Hartl's tutorial.
Step 2: Modify the Static Pages
Let's have a look at the controller:
class StaticPagesController < ApplicationController end
Controller is now empty. You can see two lines were automatically created when we ran the generator. We will put all our new code between the opening line and the "end". Let's go and create the first custom "action" for the home page:
class StaticPagesController < ApplicationController def home end end
Step 3: Create a Home File
We have defined a custom action and called it "home." The Rails framework is smart enough and will try to send to the user an HTML template that matches name of the controller action, so we need to create one. Inside the folder
app/views/static_pages create a new file and call it home.html.erb
<h1>This is the home page</h1>
Step 4: Create a Route
We're almost done. All that's left is to tell the app at what URL this action can be reached. We need to create a "route". All routes are defined in the file inside the
Rails.application.routes.draw do # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # Example of regular route: # get 'products/:id' => 'catalog#view' # Example of named route that can be invoked with purchase_url(id: product.id) # get 'products/:id/purchase' => 'catalog#purchase', as: :purchase # Example resource route (maps HTTP verbs to controller actions automatically): # resources :products # Example resource route with options: # resources :products do # member do # get 'short' # post 'toggle' # end # # collection do # get 'sold' # end # end # Example resource route with sub-resources: # resources :products do # resources :comments, :sales # resource :seller # end # Example resource route with more complex sub-resources: # resources :products do # resources :comments # resources :sales do # get 'recent', on: :collection # end # end # Example resource route with concerns: # concern :toggleable do # post 'toggle' # end # resources :posts, concerns: :toggleable # resources :photos, concerns: :toggleable # Example resource route within a namespace: # namespace :admin do # # Directs /admin/products/* to Admin::ProductsController # # (app/controllers/admin/products_controller.rb) # resources :products # end end
All lines starting with
# are ignored by our application.
I recommend you read the commented out lines. We will eventually use most of them. For now however, let's define the "root" of our application. This will be the "landing" page of our application. The one that people will see when they come to the root of the website, when the URL will contain only the basic address e.g.: www.peoplecancode.com
To do that, let's uncomment (by removing
# symbol) the line with root and modify it so that it points to our new controller and action that we created:
This can be read like: When the user types the URL of the website, take him to controller called "static_pages" and the action inside this controller will be called "home".
Step 5: Run Rails Server
You can now save all the files we have created and start the server if you are not running it yet.Finally, type in your terminal:
$ rails server
Open your browser and go to URL: localhost:3000
You should now see "This is the home page"
You can login to comment