Skip to content

Instantly share code, notes, and snippets.

@andrebautista
Created November 13, 2013 00:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrebautista/7441195 to your computer and use it in GitHub Desktop.
Save andrebautista/7441195 to your computer and use it in GitHub Desktop.
When I first started my journey into rails I had no practice with HTML or CSS, and was looking
to try out the skills I had gained from Team Treehouse and various books. I started the Michael
Hartl Rails tutorial and about 4 chapters in I got to a point where I could build my first website.
Despite the fact I wasn’t harnessing the power of Rails and it’s RESTful routes, which makes creating,
updating and destroying a record of the database a simple task, I was gaining valuable skills that will
now allow me to create nice, user friendly web apps. I then realized that until you start going through
the motions and actually apply the knowledge you’ve learned through books and online tutorials, it’s
hard to retain any of it. So I’m going to break down what I learned in the Hartl tutorial and walk you
through the steps to create a static website “sandbox” to test out HTML and CSS.
The first thing you’ll need to do is get Rails installed on your computer, refer to section 1.2.2 'Ruby,
RubyGems, Rails, and Git' of the Michael Hartl tutorial to get everything installed if you haven't already.
Once you're done create a new Rails Project by using the terminal command,
“rails new static_website --skip-test-unit”, what this will do is create a new rails project named ‘static_website’
and wont include the extra test files which are unnecessary for a sandbox. PIC 1 (there will be much more created
than pictured) Navigate to the project directory in terminal and open the project in your desired text editor,
I use Sublime Text 2 and there is a great tutorial produced by net tuts; watch the first 3 videos (up to ..opening
sublime from terminal) and you’ll be ready to enter the command "subl ."Next run the command "rails generate controller
webpages index about contact", this will create a controller named webpages, and the corresponding views index.html.erb,
about.html.erb, and contact.html.erb in their respective directory "Views", and configure the routes file, "routes.rb", to
access them via your local web server. If you navigate to the "app/assets/controllers/webpages_controller.rb" file you'll
notice that three methods were defined to allow us access to the pages generated. Right now it's okay they're empty because
Rails will by default render the matching view unless told otherwise.
You can now start your rails server through the command "rails s" PIC 2 and enter the URL http://localhost:3000
/webpages/about to see the default <p> tag telling you where the html for this page is located. PIC 3 edit this file with
your desired HTML and assign CSS via the webpages.css.scss file located in "app/assets/stylesheets/"
Now as you edit your HTML and CSS file you'll be able to refresh the browser and view your changes immediately! That's it,
you're on your way to creating a static website, if you want more information about changing the long URL to something more
friendly like "localhost:3000/about " refer to the rails guide on routing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment