After I have read the chapter 3 of Michael Hartl's book to generate static pages using Ruby on Rails static pages generator. I wanted to try to find some CSS templates, downloaded the CSS templates to my hard drive and hosted them on my Ruby on Rails server.
* First, I searched Google: "free css templates"
* Let's say, I liked the style of this CSS templates
http://www.templatemo.com/live/templatemo_495_metro_fit and downloaded it to my hard drive.
* I unzipped the CSS templates in my ~/html folder
* I tried the CSS template by opening the index.html file on my local drive using Firefox:
file:///home/jimmyc/html/templatemo_495_metro_fit/index.html
* To host a CSS template on my Ruby on Rails server, I created a new Rails project called "
static1":
$ cd ~
$ rails new static1
$ cd static1
$ bundle install
* I initialized the Git repository:
$ git init
$ git add -A
$ git commit -m "Init"
* I updated the README.md file
# Hosting a CSS template using Rails static page feature
This is the CSS template from http://www.templatemo.com/live/templatemo_495_metro_fit
## Getting started
To get started, clone this repository and then install the needed gems:
```
$ git clone
```
Next, run bundle install:
```
$ bundle install
```
Migrate the database:
```
$ rails db:migrate
```
Start the server:
```
$ rails s -b 0.0.0.0 -p 3000
```
Navigate the website, in a browser:
```
http://localhost:3000/
```
* I committed the changes:
$ git commit -am "Updated README"
* I created a new Github repository called
static1 and I pushed it onto Github:
$ git remote add origin https://github.com/jimmy2046/static1.git
$ git push -u origin master
* I created a branch
static-pages:
git checkout -b static-pages
*
Now, this is important: I created static pages controller for pages
Home and
About:
$ rails generate controller StaticPages home about
* I pushed the static pages controller to Github:
$ git add -A
$ git commit -m "Add a Static Pages controller"
$ git push -u origin static-pages
* I set the root location for
config/routes.rb:
Rails.application.routes.draw do
get 'static_pages/home'
get 'static_pages/about'
root 'static_pages#home'
end
* I started the Rails server:
$ rails s -b 0.0.0.0 -p 3000
* I tested to navigate to the homepage:
* I checked the
test/controllers/static_pages_controller_test.rb file:
require 'test_helper'
class StaticPagesControllerTest < ActionDispatch::IntegrationTest
test "should get home" do
get static_pages_home_url
assert_response :success
end
test "should get about" do
get static_pages_about_url
assert_response :success
end
end
* I ran the test:
$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips
*
The second important procedure is to copy the CSS files, images file to the Rails project.
* I copied all CSS files from the template to path:
app/assets/stylesheets/ of my rails project
static1:
$ cp ~/html/templatemo_495_metro_fit/css/* ~/static1/app/assets/stylesheets/
* I copied all images files from the template to my rails project:
$ cp ~/html/templatemo_495_metro_fit/img/* ~/static1/app/assets/images/
* I copied all Javascript files:
$ cp ~/html/templatemo_495_metro_fit/js/* ~/static1/app/assets/javascripts/
* I renamed the original home.html.erb file and copy the index.html file from the template to my Rails project:
$ mv ~/static1/app/views/static_pages/home.html.erb home_original.html.erb
$ cp ~/html/templatemo_495_metro_fit/index.html ~/static1/app/views/static_pages/home.html.erb
* I renamed the original about.html.erb file and copy the about.html file:
$ mv ~/static1/app/views/static_pages/about.html.erb about_original.html.erb
$ cp ~/html/templatemo_495_metro_fit/about.html ~/static1/app/views/static_pages/about.html.erb
* After I had copied the theme files from the template, I ran the test again:
$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips
* Using Brackets, I edited the
~/static1/app/views/static_pages/home.html.erb file
* In home.html.erb file:
- Replace all href="css/ to href="/assets/css/ in the file.
* I did in the same with
about.html.erb file:
Replace all href="css/ to href="/assets/css/ in the file.
* There is no "
replace all" method to display all the image files (such as JPG, PNG and GIF files). My way for displaying all image in Ruby Embedded HTML html.erb is to replace all <img> tags with <%= image_tag %>:
- For example, I changed these <img> tags from html:
<a href="img/img-21-01.jpg">
<img src="img/img-21-01.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
- To this codes to fit html.erb:
<%= image_tag("img-21-01.jpg", :alt => "Image", :class => "img-fluid tm-header-img") %>
* For the icons those contain "bicycle", "camera", and "street view", I did not understand what does the HTML i tag and class="fa fa-4x fa-bicycle tm-content-icon" mean. Perhaps the special fonts in Font Awesome. I just capture the screen (alt + PrtScn), saved it as a JPG file (bicycle.jpg) and use the Ruby image_tag function to show it on the screen. This is a simple "short cut" to make it works.
- For the bicycle icon, I re-wrote:
<i class="fa fa-4x fa-bicycle tm-content-icon"></i>
<div class="fa fa-4x fa-bicycle tm-content-icon">
<%= image_tag("bicycle.jpg") %>
</div>
* For the Font Awesome on the bottom such as Facebook, Twitter fonts:
- For example, for the Linkedin Font Awesome, I re-wrote:
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
<%= image_tag("linkedin_icon.jpg") %>
* I had re-written all image_tag on the home.html.erb page. At this milestone, I added all untracked files, I committed the changes and pushed it onto Github:
$ git add -A
$ git commit -m "Re-written image_tag 2"
$ git checkout master
$ git merge static-pages
$ git push
* I checked my changes by viewing:
https://github.com/jimmy2046/static1/blob/master/app/views/static_pages/home.html.erb
* After I had re-written all the image tags, I was going to re-write the link_to tag.
* In the routing file: config/rotues.rb
get 'static_pages/about'
get '/about', to: 'static_pages#about'
*
It is optional to re-write <a href> tag to <%= link_to %> tag. To re-write the links, I re-wrote <a href> tag in the Home file:
app/views/static_pages/home.html.erb
- For example, for the About page link, I changed:
<a class="nav-link" href="about.html">About</a>
<div class="nav-link">
<%= link_to "About", about_path %>
</div>
* Similarly, I edited the routing path for home.html.erb
config/routes.rb
get '/home', to: 'static_pages#home'
* And I changed the link_to tags in home.html.erb and about.html.erb
For example, in
app/views/static_pages/home.html.erb
<a class="nav-link" href="#">Home</a>
<div class="nav-link"><% link_to "Home", home_path %></div>
* I changed the link_to tags in about.html.erb as well.
* After I have made the changes of image_tag and link_to tags for home.html.erb and about.html.erb and I have changed the routes.rb file. I needed to prepare the the test suite for the web site.
* It is because I had changed the routes.rb file, I have to change the path in the test cases for static pages controller:
For example in test/controllers/static_pages_controller_test.r
get static_pages_home_url
get home_path
* Then, I ran the test to ensure the Home and About page can be routed:
$ rails test
2 runs, 2 assertions, 0 failures, 0 errors, 0 skips
* I wrote 2 test cases for checking the title is display correctly in Home and About pages.
require 'test_helper'
class StaticPagesControllerTest < ActionDispatch::IntegrationTest
test "should get home" do
get home_path
assert_response :success
assert_select "title", "Home"
end
test "should get about" do
get about_path
assert_response :success
assert_select "title", "About"
end
end
* It is because the default title is the name of the project "
static1", the test would fail for incorrect title.
$ rails test
Failure:
StaticPagesControllerTest#test_should_get_about [/home/jimmyc/static1/test/controllers/static_pages_controller_test.rb:13]:
<About> expected but was
<Static1>..
Expected 0 to be >= 1.
* To change the title of the pages, the the Application Layout file:
Located:
app/views/layouts/application.html.erb
<title>Static1</title>
<title><%= yield(:title) %></title>
* Afterwards,
in
app/views/static_pages/home.html.erb
I added 2 lines in home.html.erb.
<% provide(:title, "Home") %>
- and I changed the <title> tag:
<title><%= yield(:title) %></title>
* Similarly, for
app/views/static_pages/about.html.erb
<% provide(:title, "About") %>
...
<title><%= yield(:title) %></title>
* After I had corrected the title, the test passes:
$ rails test
2 runs, 4 assertions, 0 failures, 0 errors, 0 skips
* After the completion of Home and About, I wanted to add a Services page.
* I copied the services.html file from the template to app/views/static_pages and renamed it as services.html.erb
* I wrote a test case for Service page.
test/controllers/static_pages_controller_test.rb
test "should get services" do
get services_path
assert_response :success
assert_select "title", "Services"
end
* I updated the routes.rb file for Services page:
config/routes.rb
Rails.application.routes.draw do
# home_path
get '/home', to: 'static_pages#home'
# about_path
get '/about', to: 'static_pages#about'
# services_path
get '/services', to: 'static_pages#services'
root 'static_pages#home'
end
* I added services method in the static pages controller:
app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
def home
end
def about
end
def services
end
end
* I changed the <title> of Services page:
app/views/static_pages/services.html.erb
<% provide(:title, "Services") %>
...
<title><%= yield(:title) %></title>
* After the above steps, the test is supposed to pass:
$ rails test
3 runs, 6 assertions, 0 failures, 0 errors, 0 skips
* And then, in the services.html.erb, I did the similar things for changing the image_tag and link_to methods in the file.
* Afterwards, I did above steps recursively to add 'Blog' page and 'Contact' page.
* After I had re-written all <%= image_tag %> tags in all pages. I ran the sanitary test to ensure all path and page <title> are correct.
test/controllers/static_pages_controller_test.rb
require 'test_helper'
class StaticPagesControllerTest < ActionDispatch::IntegrationTest
test "should get home" do
get home_path
assert_response :success
assert_select "title", "Home"
end
test "should get about" do
get about_path
assert_response :success
assert_select "title", "About"
end
test "should get services" do
get services_path
assert_response :success
assert_select "title", "Services"
end
test "should get blog" do
get blog_path
assert_response :success
assert_select "title", "Blog"
end
test "should get contact" do
get contact_path
assert_response :success
assert_select "title", "Contact"
end
end
* The command line to run the test:
$ rails test
Finished in 0.580862s, 8.6079 runs/s, 17.2158 assertions/s.
5 runs, 10 assertions, 0 failures, 0 errors, 0 skips
* Finally, I added all untracked files, committed it and pushed it onto Github:
$ git add -A
$ git commit -am "all pages"
$ git push
* You can view my result pages on:
https://github.com/jimmy2046/static1
* You can clone (download) to your local hard drive by:
$ git clone https://github.com/jimmy2046/static1.git
