Rails blog engine

ButterCMS is an API-based Rails blog engine that integrates with Ruby on Rails apps in minutes. ButterCMS is great for adding blogs and dynamic pages to your Rails app.

Table of Contents

• Introduction
• Displaying posts
• Categories, tags, and authors
• RSS, Atom, and Sitemap
• Comments
• CSS
• Migration

Introduction

Learn how to quickly build a custom blog with great SEO. If you need help after reading this, contact us via email, livechat, or book a time with to pair with one of our developers.

Using the generator

The Butter Rails gem includes a generator that scaffolds a blog in a single command. Run it using the following command:

rails generate butter:install_blog
          

The generator creates an initializer file, controllers, and views:

|-- app
    |-- controllers
        |-- buttercms
            |-- authors_controller.rb
            |-- base_controller.rb
            |-- categories_controller.rb
            |-- feeds_controller.rb
            |-- posts_controller.rb
    |-- views
        |-- buttercms
            |-- authors
                |-- show.html.erb
            |-- categories
                |-- show.html.erb
            |-- posts
                |-- _post.html.erb
                |-- index.html.erb
                |-- show.html.erb
        |-- layouts
            |-- buttercms
                |-- default.html.erb

|-- config
    |-- initializers
        |-- buttercms.rb

It also adds routes to your routes.rb file:

scope :module => 'buttercms' do
  get '/categories/:slug' => 'categories#show', :as => :buttercms_category
  get '/author/:slug' => 'authors#show', :as => :buttercms_author

  get '/blog/rss' => 'feeds#rss', :format => 'rss', :as => :buttercms_blog_rss
  get '/blog/atom' => 'feeds#atom', :format => 'atom', :as => :buttercms_blog_atom
  get '/blog/sitemap.xml' => 'feeds#sitemap', :format => 'xml', :as => :buttercms_blog_sitemap

  get '/blog(/page/:page)' => 'posts#index', :defaults => {:page => 1}, :as => :buttercms_blog
  get '/blog/:slug' => 'posts#show', :as => :buttercms_post
end

After running the generator, set your API token in the initializer and restart your server to view your blog. Your blog includes an index page, post page, category page, and author page as well as RSS, Atom, and sitemap XML feeds.

See our API reference for more information on fetching data:

• Blog Posts
• Categories
• Tags
• Authors

Comments

Butter doesn't provide an API for comments due to the excellent existing options that integrate easily. Two popular servies we recommend are:

• Disqus
• Facebook Comments

Both products are free, include moderation capabilities, and give your audience a familiar commenting experience. They can also provide some additional distribution for your content since users in their networks can see when people comment on your posts. For a minimalist alternative to Disqus, check out RemarkBox or for an open-source option, Isso.

CSS

Butter integrates into your front-end so you have complete control over the design of your blog. The rich text editor allows for formatting that you'll want to make sure you have styled. The boilerplate CSS covers most cases:

.post-container {
  h1, h2, h3, h4, h5 {
    font-weight: 600;
    margin-bottom: 1em;
    margin-top: 1.5em;
  }

  ul, ol {
    margin-bottom: 1.25em;

    li {
      margin-bottom: 0.25em;
    }
  }

  p {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.25em;
    line-height: 1.58;
    margin-bottom: 1.25em;
    font-weight: 400;
    letter-spacing: -.003em;
  }

  pre {
    display: block;
    padding: 1em;
    margin: 0 0 2em;
    font-size: 1em;
    line-height: 1.4;
    word-break: break-all;
    word-wrap: break-word;
    color: #333333;
    background-color: #f5f5f5;
    font-family: Menlo, Monaco,Consolas, "Courier New", monospace;
  }

  /* Don't float content on narrow screens */
  @media only screen and (min-width: 720px)  {
    .butter-float-left {
        float: left;
        margin: 0px 10px 10px 0px;
    }

    .butter-float-right {
        float: right;
        margin: 0px 0px 10px 10px;
    }
  }

  /* Image caption */
  figcaption {
    font-style: italic;
    text-align: center;
    color: #ccc;
  }

  /* Inline code highlighting */
  .butter-inline-code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }
}

Migration

To import content from another platform like WordPress or Medium, send us an email.