Set Up Rails Environment For Static Page

Ruby on Rails is by far my favorite framework to develop web applications. It is simple and complex enough to develop, pretty much all your needs. Whether you are a startup or a developer in the making, it’s a great tool to use to accomplish great things.

With the goal of building dynamic web applications, we will start by developing a static landing page.

Rules

Install Ruby

$ ruby --version

// 2.6.4

If your ruby version is not 2.6.4, then you need to install RVM and download the right version of Ruby from your terminal.

Install Homebrew

$ brew --version

If you don’t see anything, then you need to download Homebrew, with the command below:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install RVM (Ruby version Manager)

$ rvm --version

If you don’t get a version, then it means you don’t have it. So you need to install it by following the commands below:

$ \curl -sSL https://get.rvm.io | bash$ source ~/.bash_profile $ rvm install ruby 2.6.4$ rvm use 2.6.4

Install Yarn

First, check if you have it by doing:

$ yarn --version

If you don’t see anything, then download it with the command below.

$ brew install yarn

Install Rails

$ sudo gem install rails

Create your rails app:

$ cd Desktop$ rails new sample_app$ cd sample_app

Add your html and css files:

$ rails generate controller Home index

We will touch three files:

index.html.erb // this file should be in your app/views/home folder.
application.css . // this file should be in your app/assets/stylesheets folder.
routes.rb this file should be in app root directory.

In your routes.rb file (this file can be found in your /config folder, insert:

Rails.application.routes.draw do# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html  root 'home#index'end

Start your rails server:

$ rails server

localhost:3000

You should see something like this below:

Challenge

For you to center the content, you have to change your application.css file.

body {

text-align: center;
}

Conclusion

Keep adding more stuff and be CREATIVE!

--

--

I write about holistic growth

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store