Cosmic JS Blog Stay tuned for community news, company announcements and updates from the Cosmic JS team.

How to Build a Simple Blog Using Node.js


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.

TL;DR

View the demo
Install the Simple Blog App on Cosmic JS
View the codebase on GitHub

Getting 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:

1. The Cosmic JS Node Module to get our content from our Cosmic JS Bucket.
2. Express for our web app framework
3. Hogan for our template views
4. Nodemon for development

Our scripts are necessary for starting our app in production and development.

Run the following command to install our dependencies:

yarn

Building Our Blog

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:

1. We are importing our essential modules: Express, Cosmic JS, setting our PORT dynamically, etc.
2. We are pointing to some partials: header and footer, you can reference these partials from the codebase on GitHub.
3. We view our app home page ('/') and query our Cosmic JS Bucket for Post Objects, set the friendly date, then return the index.html template.
4. We are also adding our data to this page in the form of a global data store: cosmic.  This data structure makes our template implementation super intuitive.

Adding Our Home Page Template Variables

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?
1. We pull in our header file with the Mustache template variable.
2. We pull in our Cosmic data using the Mustache variable {{ cosmic }} which has everything we need to layout our page's dynamic data.
3. We are looping through our {{ cosmic.objects.type.posts }} and rolling out our blog posts.

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.

Conclusion

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.

You may also like


In an effort to make it easier to create content-ready applications as well as manage content, you can now install and deploy applications using Cosmic JS.  It's the fastest and easiest way to go from 0 to content-ready web app (about 2 minutes!) without any server or configuration hassle.  It's really cool and only requires a few steps:

1. Sign in to your Cosmic JS account
2. Choose a bucket then navigate on the left sidenav to Settings > Apps
3. Select your app and click "Install"
4. Go to Settings > Deploy Web App and click "Deploy Web App"



In about 2 minutes your application will be deployed and connected to your Cosmic JS bucket.  Add and edit content easily and review from the deployed location.  Choose from one of the provided apps or add the link to the public git repo to clone your own app into deployment.

You can deploy your applications from any GitHub, BitBucket or any other public repo. Your application will be deployed to it's own isolated Docker container using Dokku, a Docker-powered mini-Heroku. This means that you can build your app in any language and easily deploy it from Cosmic JS!  You can find out more about how to make apps Dokku compatible by reading Heroku documentation

If you would like to contribute apps to be available on Cosmic JS, please contact support@cosmicjs.com.  Happy building!

We're releasing a couple new additions to our powerful Metafields feature.  Check them out...

In this Spotlight we are focusing on Jon Bloomer, who recently launched the Cosmic JS-powered website for his business Tone Temple.  Jon took some time to answer a few questions about his business, his development process and some of his favorite non-dev rockstars.

The Webhooks add-on allows you to communicate with any third-party endpoint whenever content is edited within your bucket. This is great for static site rebuilds, or communicating with your team through the Slack API whenever content is changed in your Cosmic JS bucket.

In this tutorial I’m going to show you how to build a user-driven photo gallery, powered by Angular JS, hosted on the Cosmic JS App Server.

In this tutorial Iā€™m going to show you how to build a user management app using Node.js and the Cosmic JS CMS API.