Deploying Your First Camel.js Blog to Heroku

JavaScript
1

Originally published at: http://www.sitepoint.com/deploying-camel-js-blog-heroku/

Camel is a Node.js blogging platform that was designed to be fast, simple, and lean.

In the words of Casey Liss, the author of Camel:

Camel is neither a static blogging platform nor a truly dynamic one. It is a little from column A, and a little from column B. The first time a post is loaded, it is rendered by converting from Markdown to HTML, and then post-processed by adding headers & footer, as well as making metadata replacements. Upon a completed render, the resultant HTML is stored and used from that point forward.

If you want to look at some examples of Camel running in the wild, you can check out the original Camel-powered blog at Liss is More, or my two Camel-powered blogs: The Data McFly Blog, and RogerStringer.com. The latter was formerly a WordPress blog with over 2,550 blog posts covering over a decade of blogging, and it migrated to Camel pretty smoothly.

I’ve been using Camel since October 2014, and it’s fun to work with, although the initial set up can be a little interesting. With that in mind, in this article, we’re going to walk through setting up your first Camel blog and deploying to Heroku.

Getting Started with Camel

First, make sure you have Node.js and npm installed. You can download Node from here, and npm from here. If you need help installing Node.js (or npm) then check out this recent SitePoint article which covers that very subject.

Next, we need a copy of the Camel repo:

git clone https://github.com/cliss/camel.git

This will create a folder called camel, go into this folder and run npm install to install the dependencies.

Now, we can test if Camel is working by typing node camel.js. If everything has gone smoothly, you should be able to visit http://localhost:5000 in your browser and see a basic Camel installation.

Screenshot of a basic Camel installation
Screenshot of a basic Camel installation823×364 32.3 KB

The Camel Template System

Camel’s template files are stored in the templates folder.

+-- templates/
|     +-- defaultTags.html
|     +-- header.html
|     +-- footer.html
|     +-- postHeader.html
|     `-- rssFooter.html
  • defaultTags.html is where we store our site-wide metadata, such as author info, site URL and site title.
  • header.html is the header of our blog, this is displayed on every page of the site.
  • footer.html is the site footer, also displayed on every page.
  • postHeader.html is the file that is used to display post headers. This is inserted after the site header and is displayed for each post.
  • rssFooter.html is displayed at the end of every RSS item. This could be a link back to your blog, or a blurb to tell readers where the post came from.

Loops are handled a little differently in Camel, instead of being in separate files, they are stored as Handlebars templates in the posts/index.md file:

@@ Title=Home
@@ BodyClass=homepage
@@ DayTemplate=<div class="day">...</div>
@@ ArticlePartial=<div class="article">...</div>
@@ FooterTemplate=<div class="paginationFooter">...</div>

This page contains three Handlebars templates that are used site-wide:

  • DayTemplate is used to render each day on a list of posts.
  • ArticlePartial is used to render a single article.
  • FooterTemplate is used to render pagination at the bottom of the page.

Finally, we need to consider styling. Open up templates/header.html, and replace the <body> tag with:

<body class="@@BodyClass@@">
  <div class="container">
    <div class="content">
      <div class="header">
        <div class="siteTitle"><a href="/">@@SiteTitle@@</a></div>
        <div class="siteByline">By @@siteAuthor@@</div>
        <nav>
          <a href="/about" rel="author">About</a>
          <span class="dot">&bull;</span>
          <a href="/rss">RSS</a>
        </nav>
      </div><!-- header -->
      <div class="main">

This will give our site header its definition.

Continue reading this article on SitePoint
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.