Create a View Template

Modify the ArticlesController class, so that the index action only sets the instance variables, instead of returning the response.

class ArticlesController < ApplicationController
  def index
    @title = "Write Software, Well"
    @tagline = "Learn to program Ruby and build webapps with Rails"
  end
end

Next, create a new articles directory inside the views directory, and add a view template index.html.erb in it. Delete the old views/index.html file.

<html>
  <head>
    <title>Application</title>
    <link rel="stylesheet" href="/public/style.css">
    <meta charset="utf-8">
  </head>

  <body>
    <main>
      <header>
        <h1>
          <%= @title %>
        </h1>
        <p>
          <%= @tagline %>
        </p>
      </header>

      <hr>
    </main>
  </body>
</html>

Don't worry, we'll extract all the layout code in a separate template in a future post.

To make things pretty, I've updated the style.css as follows:

main {
  width: 600px;
  margin: 1em auto;
  font-family: sans-serif;
}

header {
  text-align: center;
  margin-bottom: 2em;
}

article {
  padding-top: 1em;
}

That's it, we're done. Now restart the application and visit localhost:9292/articles/index in the browser. You should see the following page:

Any new instance variables you set in the controller's action method will be available to use in the view.