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.
The Camel Template System
Camel’s template files are stored in the
+-- templates/ | +-- defaultTags.html | +-- header.html | +-- footer.html | +-- postHeader.html | `-- rssFooter.html
defaultTags.htmlis where we store our site-wide metadata, such as author info, site URL and site title.
header.htmlis the header of our blog, this is displayed on every page of the site.
footer.htmlis the site footer, also displayed on every page.
postHeader.htmlis the file that is used to display post headers. This is inserted after the site header and is displayed for each post.
rssFooter.htmlis 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
@@ 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:
DayTemplateis used to render each day on a list of posts.
ArticlePartialis used to render a single article.
FooterTemplateis 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">•</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