Created
November 13, 2013 00:14
-
-
Save andrebautista/7441195 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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