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:
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.
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 blogPay 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 installYou're ready to go! Fire up Cogear.JS in dev mode, your new blog will be opened in browser automatically!
> cogear # development mode by defaultRead 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
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!
Top comments (12)
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-articleparameter like mine has. :-)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.
I disagree, that's why I solved it differently. But maybe I'm mistaken on that?
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:
I Agree with you, love your articles also it has vue plugin. nice. Easy workflow, and one things! its styl by default.
It allows to use SASS, LESS or Stylus by default.
Proper loaders are included in default Webpack config.
Thanks for support!
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.
Nice, really easy to follow.
Auto reload no work using yarn.
Create an issue on Github, please.
It's a static site generator which produces HTML files. Do you really think that it's needed to be tested over load? 🔥
Can I deploy to Netify or others?
Yes, of course. It produces basic html files and assets that could be easily uploaded anywhere you'd like.