Published on Dec 08,2015
1.3K Views
Email Post

In this post we will create a personal website using rails and deploy it to Heroku. Heroku is a cloud application platform – a new way of building and deploying web apps. Best thing about Heroku is that you don’t have to pay for hosting basic web apps as Heroku has categorized them as free. We will build a single page rails application and it will be a static website that can be used as a portfolio.

Below is the snapshot of the rails application (deployed on Heroku here )

live

Let’s get started on creating this Rails application. I assume you already have installed Ruby and Rails. Make sure you have Ruby 2.0 and Rails 4.2.2. You can check the version from command prompt.

version_check

Note : We will use Ruby 2.0 and Rails 4.2.2. If you have some different versions of Ruby and Rails some of the steps shown in this post might not work for you.

Creating the Project :

We will name our project as website. To create the project use command Rails new website

new_project

Rails will automatically generate all the files and it will also install all the required gems by executing the run bundle installed automatically as shown below

bundle_install

Now you will see a website folder under your C: drive (the location from where we executed Rails new website command). Let’s open the website folder in some IDE. I have Brackets IDE from Adobe. You can use any other as it does not matter.

Project Structure :

The generated project structure will look as below

project_structure

Even though we haven’t written any code you can run the website application right now. To run the website application, execute Rails s command from website folder as shown below

run_at_start

As you can see in the above snapshot that our website app have been deployed at http://localhost:3000

You will be able to see the screen below on accessing the URL http://localhost:3000

first_page

But we want to show our application main page on accessing the URL http://localhost:3000/ . For that let’s create an index.html page under the public folder of our website project.

Note : Rails will automatically serve the index.html page on accessing the root URL http://localhost:3000

For the time being we just have one line in index.html page.

index_page

Let’s access the root URL http://localhost:3000

main_page_output

Now, let’s put some life in our index.html page by adding some images – JS and cool CSS. We will use grayscale theme from start bootstrap.

Grayscale Start Bootstrap Theme

Below is the snapshot of the grayscale start bootstrap theme that we will use. We will customize this theme to meet our requirement.

start_bootstrap_theme

You can download this theme from http://startbootstrap.com/template-overviews/grayscale/

Download grayscale theme and copy the CSS, font-awesome, fonts, img, JS and index.html to the public directory of the website project. Below is the project snapshot after adding CSS, JS, fonts, images folder and index.html page under public directory of the website project.

project_structure_2

Let’s run our website project now:

second rails s

On running the project you will be presented with good looking grayscale theme page.

first_run

We will modify the index.html page (under public directory of website project) to give it a professional look.

Below is the snapshot of the website project after making the changes in the index.html page. We have just changed the images and edited some of the text to make it specific to an individual.

all-changes

You can modify the index.html and grayscale.CSS as you like. Now, we are ready to deploy our website application to Heroku.

Pushing the code to Github :

Before deploying the application to Heroku, we need to push our code to a remote Github repository. For that you need a Github account . If you don’t have a Github account, go and create one at www.github.com.

You also need to install Github on your Windows. Download the Github for windows from https://windows.github.com/ .

Once you have downloaded and installed the Github on your machine, open up the Github application and configure your Github credentials and choose Git Bash shell as your default shell (you can choose any other option also as you like) and then save the changes.

You need to create a repository on Github, where we will save our website project remotely. To create a repository, log in to Github and click on new repository option shown in the green button.

Name your repository (in this case we have named it railtoheroku) and click on create repository link as shown below.

rep1

Github will provide the remote URL (https://github.com/eMahtab/railtoheroku.git  in this case) for the railtoheroku repository which will be needed while pushing the code from local machine to Github.

Now, we are ready to push our website project code to Github. Follow the steps below to push the code to Github.

Open up Git shell and use Git init command to initialize the website directory as shown below:

git init

Now, add all the files in the website directory under version control by executing Git add.

git add

Commit all the files by executing Git commit –m “Final Commit”

git commit

Add the remote repository as shown below:

git remote

Now the last step which will actually push the code to Github repository:

git push master

We are done with Github. The next part is the actual deployment of the application to Heroku.

Deploying the application to Heroku :

Create a Heroku account at https://www.heroku.com/

Note : We have to make some changes for deployment of the application to Heroku. Heroku does not support SqLite 3, instead it has PostgreSQL database. So we have to remove sqlite3 dependency from gemfile.  Heroku requires rails_12factor gem, which is used by Heroku to serve static assets such as images and stylesheets.  The two changes required in Gemfile are summarized below:

Remove the line gem ‘sqlite3’ from Gemfile

Add the following lines to Gemfile

group :development, :test do # <<<< not in production

gem 'sqlite3'

end

group :production do

gem 'pg',             '0.17.1'

gem 'rails_12factor',  '0.0.2'

end

Let’s check whether everything is working fine after making the changes to Gemfile. Save the Gemfile and run bundle install with a special flag (–without production) to prevent the local installation of any production gems.

without production

Lets commit the changes made in Gemfile to remote repository at Github:

after changes in gemfile

Push the changes to remote Github repository:

git push master

Creating a new application at Heroku :

Log in to Heroku and create a new app. I have named my app railtoheroku.  You can name it whatever you like. Click on create app to create the named app.

heroku new app

Connecting Github repository to Heroku App :

Next step is to link your Github repository to Heroku.

Below we have connected our Github repository railtoheroku

connect

Once we connect our Github repository to Heroku, we are ready to deploy our application. To deploy the application scroll down to manual deploy option and click on deploy branch option.

deploy

Deploying the Application :

Once you click on Deploy Branch, Heroku will start installing the gems from Gemfile on production:

installing

Once all the gems are installed and application is deployed, you will see the congratulation message from Heroku saying, “Your app is successfully deployed.”

view

To see your deployed application just click on view button and you will be able to see your app deployed successfully.

live

If you face any problem while following any of the above steps please comment below. Hope you enjoyed this post.

Got a question for us? Please mention it in the comments section and we will get back to you.

Related Posts:

Get Started with Ruby On Rails

Creating an Online Quiz Application using JSP Servlet

Parsing XML files using SAX Parser

Writing RESTful Web Services with JAX-WS

About Author
mahtab alam
Published on Dec 08,2015

Share on

Browse Categories

Comments
1 Comment