In this tutorial I’m going to show you how to create a simple blog using Node.js and Cosmic JS. This is going to be the fastest and most light-weight blog you have ever created. Let’s get started.
Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version.
Make sure you have Yarn installed globally:
npm install yarn -g
Let’s start by creating a folder for our app. In your favorite terminal run the following commands:
mkdir simple-blog
cd simple-blog
Now let’s add a package.json file to import all of our dependencies for our app:
vim package.json
Add the following to our package.json file:
{
"dependencies": {
"cosmicjs": "^2.39.0",
"express": "^4.15.2",
"hogan-express": "^0.5.2",
"nodemon": "^1.11.0"
},
"scripts": {
"start": "node app.js",
"development": "nodemon app.js"
}
}
It’s a pretty light dependency list for a pretty light app. So what we will install is:
Our scripts are necessary for starting our app in production and development.
Run the following command to install our dependencies:
yarn
Next, let’s begin building our blog pages. Create a file titled app.js:
vim app.js
and add the following to app.js:
const express = require('express')
const app = express()
const hogan = require('hogan-express')
const http_module = require('http')
const http = http_module.Server(app)
app.engine('html', hogan)
app.set('port', (process.env.PORT || 3000))
app.use('/', express.static(__dirname + '/public/'))
const Cosmic = require('cosmicjs')
const helpers = require('./helpers')
const bucket_slug = process.env.COSMIC_BUCKET || 'simple-blog-website'
const read_key = process.env.COSMIC_READ_KEY
const partials = {
header: 'partials/header',
footer: 'partials/footer'
}
app.use('/', (req, res, next) => {
res.locals.year = new Date().getFullYear()
next()
})
// Home
app.get('/', (req, res) => {
Cosmic.getObjects({ bucket: { slug: bucket_slug, read_key: read_key } }, (err, response) => {
const cosmic = response
if (cosmic.objects.type.posts) {
cosmic.objects.type.posts.forEach(post => {
const friendly_date = helpers.friendlyDate(new Date(post.created_at))
post.friendly_date = friendly_date.month + ' ' + friendly_date.date
})
} else {
cosmic.no_posts = true
}
res.locals.cosmic = cosmic
res.render('index.html', { partials })
})
})
http.listen(app.get('port'), () => {
console.info('==> 🌎 Go to http://localhost:%s', app.get('port'));
})
There are a few things happening here:
This part of the process is the most fun because it shows you the power of Cosmic JS combined with a declarative, logic-less template system like Mustache. Let’s create a folder called views and add our index.html file:
mkdir views
cd views
vim index.html
Add the following to index.html:
{{> header }}
<main class="container">
{{# cosmic.objects.type.posts }}
<div class="card" data-href="/{{ slug }}">
{{# metadata.hero.imgix_url }}
<div class="blog-post-hero blog-post-hero--short" style="background-image: url({{ metadata.hero.imgix_url }})"></div>
{{/ metadata.hero.imgix_url }}
<div class="card-padding">
<h2 class="blog__title blog__title--small">
<a href="/{{ slug }}">{{ title }}</a>
</h2>
<div class="blog__author">
<div class="blog__author-image" style="background-image: url({{ metadata.author.metadata.image.imgix_url }}?w=100)"></div>
<div class="blog__author-title">by <a href="/author/{{ metadata.author.slug }}">{{ metadata.author.title }}</a> on {{ friendly_date }}</div>
<div class="clearfix"></div>
</div>
<div class="blog__teaser droid">{{{ metadata.teaser }}}</div>
<div class="blog__read-more">
<a href="/{{ slug }}">Read more...</a>
</div>
</div>
</div>
{{/ cosmic.objects.type.posts }}
</main>
{{> footer }}
What’s happening here?
What I like about this approach is that the template is completely logic-less aside from some boolean queries and array looping. It really does a great job of keeping our logic separate from our presentation (thanks Chris Wanstrath!)
If you want to build out the rest of the application, clone the GitHub repo and follow the README instructions.
This is the abridged version of the Simple Blog app available for download in the Cosmic JS Apps page. The full codebase includes a single post page view as well as a page dedicated to each author’s posts. View the full codebase on GitHub and deploy this app in a few clicks from your Cosmic JS dashboard by installing the app to your Cosmic JS Bucket.
I hope you enjoyed this tutorial, if you have any questions reach out to us on Twitter and join our community on Slack.