Build a blog with Cogear.JS

Recently in comments to Cogear.JS introduction post I've been asked about difference between it and Gatsby.

Today I've read the post Build a blog using Gatsby.js & React at Dev.to. I wanna to compare them via doing the same task.

Let's build a blog with Cogear.JS.

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

Installation

Make sure to fit the requirements.

To install Cogear.JS do next:

$ npm install -g cogear
# or
$ yarn global add cogear

Blog crafting

We need to transform default site into blog.

It requires two things:

1. Blog plugin.
2. Blog theme.

There is a standard way via built in generator:

$ cd ~/Sites
$ cogear new blog

But I've prepared a preset for you which includes both plugin and theme.

dbelyaeff / cogear-preset-blog

Blog preset for Cogear.JS

Cogear.JS preset blog

Ready to use site preset. Just clone repository, install dependencies and run cogear in project directory from command line.

Installation

Make sure that Cogear.JS is installed. How to install

Clone this repo to the target local directory:

> cd ~/Sites/
> git clone --recurse-submodules https://github.com/codemotion/cogear-preset-blog blog

Pay attention to --recurse-submodules option. It's required, because cogear-theme-blog is presented as git submodule.

Install dependencies:

> cd ~/Sites/blog
> npm install
or
> yarn install

You're ready to go! Fire up Cogear.JS in dev mode, your new blog will be opened in browser automatically!

> cogear # development mode by default

Read the docs

https://cogearjs.org/docs

View on GitHub

Let's install blog with preset.

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

Now you need to install the dependencies:

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

$ cogear

You blog is ready:

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:

---
title: First post
tags:
  - news
---
# This is my first post!

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

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

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

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:

You questions are welcome!

Comments

[Dmitriy Belyaev]

It's your own preferences as a developer.

I feel this way, you feel another. It's fine, we're differ.

It'll take 5-10 minutes to update blog plugin, but really it's easier to create file in editor than to write something like this:

$ cogear blog post --title="I promise not to use generator for such purpose" --tags="one,two,three"

[Manda Putra]

I Agree with you, love your articles also it has vue plugin. nice. Easy workflow, and one things! its styl by default.

[Dmitriy Belyaev]

It allows to use SASS, LESS or Stylus by default.

Proper loaders are included in default Webpack config.

Thanks for support!

[Dmitriy Belyaev]

It's not blog engine by default.

1-3 minutes sounds like "a lot"? Are you seriously?

Why should it have such a param? It's more handy to create text file in editor than to generate it with param.

I can do this easily via blog plugin, but I don't really feel like it's needed to has such a param.

Let's listen to other community members.

[Dmitriy Belyaev]

Do you mean like Vue.JS vs React vs Ember vs Angular?

Or battle between static site generators?

I don't think that it is good way. It's not the open source software path. Every framework has developers how like and use, and how does not.

[chenge]

Nice, really easy to follow.
Auto reload no work using yarn.

[Dmitriy Belyaev]

Create an issue on Github, please.

[Dmitriy Belyaev]

It's a static site generator which produces HTML files. Do you really think that it's needed to be tested over load? 🔥

[chenge]

Can I deploy to Netify or others?

[Dmitriy Belyaev]

Yes, of course. It produces basic html files and assets that could be easily uploaded anywhere you'd like.