Add a new homepage
In this guide we’ll add another page. This will be our new homepage: the first page that will be shown when you open your app when you visit http://localhost:3000. Feel free to skip this guide if you know how Rails controllers, views and routes work.
In the previous guide a “pages” controller was already generated, we do not need to do this again. Rails will stop us if we do try to. Instead, we’ll need to add the page manually ourselves.
Add a new view
Instead we’ll add another page on our own. Run the following command in the Terminal app to add another “view” file used to display page content.
Then open the newly created file in your Text editor:
Add some content to it, like the following, and save the file:
Configuring the route
To tell Rails when to show this page, open the
config/routes.rb file in your Text Editor. Change the following line:
to this instead and save the file:
When you now visit the root path of the app, http://localhost:3000, you should see your new homepage!
Updating the navigation bar
Lastly, to make the new root page accessible through the navigation bar, open the
app/views/layouts/application.html.erb file in your Text Editor. Above the following lines:
add a new link with the lines below, and save the file:
When you refresh the page in the browser, and click the “The ideas app” link, it will open the new homepage. Try out all the links in the navigation bar. Do they take you to the page you expected?
If you’re ever stuck during a guide, please ask your coach for help and also consult this handy cheatsheet for Ruby, Rails, the console, the Text Editor etc.
- Guide 1: Start of the guide
- Guide 2: Get to know the tools
- Guide 3: Guide to install Rails
- Guide 4: Build Your First App
- Guide 5: Style your app using HTML and CSS
- Guide 6: Add a new page to your app
- Guide 7: Add a new homepage to your app (Current page!)
- Guide 8: Add picture uploads
- Guide 9: Push Your App to GitHub
- Guide 10: Put your app online with one of these services:
- Guide 11: Style the idea pages using HTML and CSS
- Guide 12: Add comments to your app
- Guide 13: Create picture thumbnails
- Guide 14: Test your app with RSpec
View all guides