Ruby blog engine
ButterCMS is an API-based Ruby blog engine that integrates with Ruby apps in minutes. Use ButterCMS with Rails, Sinatra, and other Ruby frameworks to build CMS-powered apps quickly. ButterCMS works great for blogs, dynamic pages, and more.
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. This guide uses the Sinatra web framework but Butter integrates with any Ruby web app (we also have a Rails guide). Full working example code is available on Github.
If you need help after reading this, contact us via email, livechat, or book a time with to pair with one of our developers.
Display posts
To display posts we create a simple /blog route in our app and fetch blog posts from the Butter API. See our API reference for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.
require 'rubygems'
require 'bundler'
require 'buttercms-ruby'
ButterCMS::api_token = ''
class App < Sinatra::Base
get '/blog' do
params[:page] ||= 1
@posts = ButterCMS::Post.all(:page => params[:page], :page_size => 10)
@next_page = @posts.meta.next_page
@prev_page = @posts.meta.previous_page
erb :index
end
endNext we'll create a simple view named blog.html.erb that displays our posts and pagination links:
<h2>Posts</h2>
<!-- List of posts -->
<% @posts.each do |post| %>
<a href="<%= url("/blog/#{post.slug}") %>"><%= post.title %></a>
<br>
<% end %>
<!-- Pagination links -->
<div>
<% if @previous_page %>
<a href="<%= url("/blog?page=#{@prev_page}") %>">Prev</a>
<% end %>
<% if @next_page %>
<a href="<%= url("/blog?page=#{@next_page}") %>">Next</a>
<% end %>
</div>We'll also create an additional route for displaying individual posts:
class App < Sinatra::Base
...
get '/blog/:slug' do
@post = ButterCMS::Post.find(params[:slug])
erb :post
end
endThe view for displaying a full post includes information such as author, publish date, and categories. See a full list of available post properties in our API reference. We use the content_for Sinatra helper for setting the HTML title and meta description in the <head> tag of the page.
<% content_for(:title) { @post.seo_title } %>
<% content_for(:meta_description) { @post.meta_description } %>
<!-- Post title -->
<h2><%= @post.title %></h2>
<!-- Post author -->
<a href="<%= url("/author/#{@post.author.slug}") %>"><%= "#{@post.author.first_name} #{@post.author.last_name}" %></a>
<!-- Post categories -->
<% @post.categories.each do |category| %>
<a href="<%= url("/category/#{category.slug}") %>"><%= category.name %></a>
<% end %>
<!-- Publish date -->
<%= @post.published %>
<!-- Post body -->
<%= @post.body %>Categories, Tags, and Authors
Use Butter's APIs for categories, tags, and authors to feature and filter content on your blog:
class App < Sinatra::Base
get '/blog' do
...
# Get all categories to list in sidebar
@categories = ButterCMS::Category.all
erb :index
end
get '/author/:slug' do
@posts = ButterCMS::Post.all({:author_slug => params[:slug]})
erb :author
end
get '/category/:slug' do
@posts = ButterCMS::Post.all({:category_slug => params[:slug]})
erb :category
end
...
endSee our API reference for more information about these objects:
RSS, Atom, and Sitemap
Butter generates RSS, Atom, and sitemap XML markup. To use these on your blog, return the generated XML from the Butter API with the proper content type headers.
class App < Sinatra::Base
...
get '/feeds/rss' do
content_type 'text/xml'
ButterCMS::Feed.find(:rss).data
end
get '/feeds/atom' do
content_type 'text/xml'
ButterCMS::Feed.find(:atom).data
end
get '/sitemap' do
content_type 'text/xml'
ButterCMS::Feed.find(:sitemap).data
end
endComments
Butter doesn't provide an API for comments due to the excellent existing options that integrate easily. Two popular servies we recommend are:
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. Use the following CSS as boilerplate for post content styling.
.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.
About Ruby
Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.