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:
Make sure to fit the requirements.
To install Cogear.JS do next:
$ npm install -g cogear # or $ yarn global add cogear
We need to transform default site into blog.
It requires two things:
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.
Ready to use site preset. Just clone repository, install dependencies and run
cogear in project directory from command line.
Clone this repo to the target local directory:
> cd ~/Sites/ > git clone --recurse-submodules https://github.com/codemotion/cogear-preset-blog blog
> 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
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
Really, that was all you have to do.
Now fire up Cogear.JS in the development mode.
I've uploaded the result to:
Check it out.
It's time to create first post.
./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:
p folder has been chosen for blog?
It's easy to customize this behaviour.
./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
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
More about config file in the following video:
You questions are welcome!