Create a Website with Refinery CMS and Bootstrap

By richardtylee

The birth of any startup begins with a dream. Then they need a website. The goal for this post is to describe how to quickly create a website.

I often see companies use drag-and-drop platforms (like Wix and Weebly) or contract out developers to create a Wordpress website. While they may meet certain needs, these platforms have limitations and may fail meet business needs as a company grows. To make a custom changes, developers often have to work around the framework and hack domain-specific features. Since these platforms are made to be generic and for quick development, performance is often sacrificed and maintenance is more difficult. A company contracts out to have one of these sites built and is left owning a codebase that they cannot maintain themselves.

As a developer, I want to make my life and lives of my company or client easier. To do this, we’ll use Refinery CMS. Refinery is a content management system written for Ruby on Rails. Refinery CMS will allow the user to easily and quickly change content on the site. Since it is using Rails, it does not get in the way of future coding development.

Rails is a well-established web framework, with many libraries written for it. I’ve been doing Ruby and Rails work professionally for several years. Relative to other technologies, it is easy to learn. And the large community makes it an easy skill to hire for, if the business grows.

Refinery also has a very active community. Many common issues can be found through Github, StackOverflow and Google. And the code updated very often. Refinery is built as an engine, which means it can be integrated into an existing Rails website. It also allows the developer to do things the “Rails way”, so no invasive hacks or workarounds are needs to add custom features. There are also many useful extensions. One that I will be using is refinerycms-blog.

Ryan Bates has some very good railscasts on Refinery (though a bit dated):

Besides that, check out the official site and repos:

Besides functionality, we also want to make a presentable user interface. To save development time, we will use Bootstrap. Bootstrap is a front-end framework (HTML, CSS and JS) developed at Twitter, then open-sourced. It codifies many of the best front-end practices and styles. This allows developers to create presentable websites quickly. For better or worse, it is also why many of today’s website look the same.

Checkout the official Bootstrap documentation:

And railcast (again, dated):

There is even a gem available that integrates Bootstrap into Refinery:

Now on to creating the website.  Let's assume Rails is already installed locally.

  1. Create the Rails app.  Let's call it myapp.
    1. In the terminal, enter: rails new myapp
  2. cd into the myapp directory
  3. Integrate Refinery CMS.
    1. In Gemfile, add:
      gem 'refinerycms', '~> 3.0' 
      gem 'quiet_assets', group: :development
      # Add support for searching inside Refinery's admin interface.
      gem 'refinerycms-acts-as-indexed', ['~> 2.0', '>= 2.0.0']
      # Add support for Refinery's custom fork of the visual editor WYMeditor.
      gem 'refinerycms-wymeditor', ['~> 1.0', '>= 1.0.6']
      # The default authentication adapter
      gem 'refinerycms-authentication-devise', '~> 1.0'
      gem 'sprockets-rails', '~> 2.3.3'
    2. Note: At the time of this post, sprocket-rails had an issue.
    3. In the terminal, enter: rails generate refinery:cms
  4. Integrate Refinery CMS Blog.
    1. In Gemfile, add:
      gem 'refinerycms-blog', git: '', branch: 'master'
    2. In the terminal, enter: rails generate refinery:blog
    3. In the terminal, enter: rake db:migrate
    4. In the terminal, enter: rake db:seed
  5. Integrate Refinery Bootstrap.
    1. In Gemfile, add:
      gem 'refinerycms-bootstrap', :github => 'fernandoaleman/refinerycms-bootstrap', :branch => '2-1-stable'
    2. In the terminal, enter: rails generate refinery:bootstrap

Now start your rails application. In the terminal, enter: rails s 

That's it!

For details on how to get started using Refinery CMS, please check out: