Build a blog with Cogear.JS
Tags: node, cogearjs, webpack, javascript
Published: 2018-09-28 09:50:15

---
title: Build a blog with Cogear.JS
published: true
description: Tutorial how to create a static blog with Cogear.JS
tags: node, cogear.js, webpack, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/r3z7sr5m3dwr49dqn5je.png
---

Recently in comments to [Cogear.JS introduction post](https://dev.to/codemotion/cogearjs--modern-static-websites-generator-450a) I've been asked about difference between it and [Gatsby](https://gatsbyjs.org). 

Today I've read the post [Build a blog using Gatsby.js & React](https://dev.to/saigowthamr/build-a-blog-using-gatsbyjs--react--2lo) at **Dev.to**. I wanna to compare them via doing the same task.

Let's build a blog with [Cogear.JS](https://cogearjs.org).

First of all you can look at real working example:
https://cogearjs.org/blog

# Installation

Make sure to fit [the requirements](https://cogearjs.org/docs#requirements).

To install **Cogear.JS** do next:
``` shell
$ npm install -g cogear
# or
$ yarn global add cogear
```
{% youtube UwWsSnFS0g0 %}


# Blog crafting

We need to transform default site into blog.

It requires two things:
1. [Blog plugin](https://github.com/codemotion/cogear-plugin-blog).
2. [Blog theme](https://github.com/codemotion/cogear-theme-blog).

There is a standard way via built in generator:

``` shell
$ cd ~/Sites
$ cogear new blog
```

{% youtube fweOYQ-_FU0 %}

But I've prepared a preset for you which includes both plugin and theme.
{% github codemotion/cogear-preset-blog %}

Let's install blog with preset.

``` shell
$ git clone --recurse-submodules https://github.com/codemotion/cogear-preset-blog blog
```

Now you need to install the dependencies:
``` shell
$ cd ~/Sites/blog
$ npm install
# of
$ yarn install
```

# Done

Really, that was all you have to do.

Now fire up **Cogear.JS** in the development mode.

``` shell
$ cogear
```

You blog is ready:
![Cogear.JS blog](https://github.com/codemotion/cogear-theme-blog/raw/master/screenshot.jpg)

I've uploaded the result to:
https://cogear-blog.now.sh

Check it out.

It's time to create first post.

Create `./src/pages/p/first-post.md` file with the following content:
``` markdown
---
title: First post
tags:
  - news
---
# This is my first post!
```

Well done. Save it and browser page will be reloaded automatically.

![Cogear.JS blog with post](https://thepracticaldev.s3.amazonaws.com/i/cg6z5a9fzdqqerakxowh.png)

The result is also available by link:
https://cogear-blog-with-post.now.sh

P.S. Why `p` folder has been chosen for blog? 

It's easy to customize this behaviour. 

Edit `./config.yaml` file from this
``` yaml
title: Blog | Cogear.JS – modern static websites generator
description:
keywords:
theme: blog
blog:
  index: ""
  regex: "^p/"
  tagUri: 'tag'
  perPage: 5
pages:
  ^p/:
    layout: post
    author:
      login: Dmitriy Beliaev
      avatar: 'https://www.gravatar.com/avatar/400caf343d3bab57ab93f63e21a12be7?s=24'
      link: https://cogearjs.org
```
to that
``` yaml
title: Blog | Cogear.JS – modern static websites generator
description:
keywords:
theme: blog
blog:
  index: ""
  regex: "^blog/"
  tagUri: 'tag'
  perPage: 5
pages:
  ^blog/:
    layout: post
    author:
      login: Dmitriy Beliaev
      avatar: 'https://www.gravatar.com/avatar/400caf343d3bab57ab93f63e21a12be7?s=24'
      link: https://cogearjs.org
```
And rename folder `./src/pages/p` to `./src/pages/blog`.

More about config file in the following video:
{% youtube hEUgZcoFKWM %}

You questions are welcome!