DEV Community 👩‍💻👨‍💻

Cover image for Build a blog with Cogear.JS
Dmitriy Belyaev for Cogear.JS

Posted on

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.

codemotion / 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.

screenshot

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


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:
Cogear.JS blog

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.

Cogear.JS blog with post

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!

Top comments (14)

Collapse
 
tux0r profile image
tux0r

That sounds like a lot of effort just to have a simple blog, to be honest. Cogear.JS (wouldn't "Cogear" be a better name?) should at least have a --new-article parameter like mine has. :-)

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

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.

Collapse
 
tux0r profile image
tux0r

It's more handy to create text file in editor than to generate it with param.

I disagree, that's why I solved it differently. But maybe I'm mistaken on that?

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author • Edited on

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"
Thread Thread
 
mandaputtra profile image
Manda Putra • Edited on

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

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author

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

Proper loaders are included in default Webpack config.

Thanks for support!

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

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.

Collapse
 
chenge profile image
chenge

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

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

Create an issue on Github, please.

 
dbelyaeff profile image
Dmitriy Belyaev Author • Edited on

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

Collapse
 
chenge profile image
chenge

Can I deploy to Netify or others?

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

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

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await