Skip to main content

How to Build a Simple Blog Using Node.js

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 Your 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 Your 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.


                                                                                                                                -Copied




















Comments

Popular posts from this blog

Woot, 2.4.0 is out! : vue.js

FeaturesFull SSR + async component support in core: SSR now supports rendering async components used anywhere and the client also supports async components during the hydration phase. This means async components / code-splitting now just works during SSR and is no longer limited at the route level. (9cf6646 & 7404091) Easier creation of wrapper components: (6118759) New component option: inheritAttrs. Turns off the default behavior where
parent scope non-prop bindings are automatically inherited on component root
as attributes. New instance properties: $attrs & $listeners. $attrs contains the parent-scope attribute bindings that were not recognized as props, and $listeners contains the v-on listeners registered in the parent scope (without the .native modifier). These are essentially aliases of $vnode.data.attrs and $vnode.data.on, but are reactive. Combining these allows us to simplify a component like this down into this: <div> <inputv-bind="$attrs"v-on=&qu…

Get start with Vue.js

Getting Started The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required. The easiest way to try out Vue.js is using theJSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can simplycreate anindex.htmlfileand include Vue with: <scriptsrc="https://unpkg.com/vue"></script> TheInstallationpage provides more options of installing Vue. Note that wedo notrecommend beginners to start withvue-cli, especially if you are not yet familiar with Node.js-based build tools. Declarative Rendering At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax: <divid="app"> …

24 Must Have WordPress Plugins for Business Websites- Part 1

1. OptinMonsterOptinMonster is the most popular conversion rate optimization software. It allows you to convert abandoning website visitors into email subscribers. If you want to grow your email list, then this is a must have WordPress plugin in 2017. Read these case studies to see how much success other businesses are having by using OptinMonster.
2. WPForms As a business owner, allowing your customers to contact you should be your top priority. WPForms is the most beginner friendly contact form plugin for WordPress. This drag & drop online form builder allows you to easily create contact forms, email subscription forms, order forms, payment forms, and other type of online forms with just a few clicks. We use it on WPBeginner and all of our other sites. There’s a free WPForms Lite version available for those who are looking for a simple solution. If you want more advanced features, then get the Pro version. Use this WPForms coupon to get 10% off your purchase. 3. MonsterInsights Mon…