DEV Community: Cogear.JS

Creating a plugin for Cogear.JS

Dmitriy Belyaev — Tue, 09 Oct 2018 19:31:23 +0000

Cogear.JS is a modern static websites generator built with Node.JS and based on Webpack.

If you have missed introduction to Cogear.JS article series, you're welcome:

Article No Longer Available

It's time to talk about crafting plugins.

Let’s start from giving a definition to a plugin.

Plugin is a module which can hook into the system core to change its behavior.

Node.JS has first-party EventEmitter – a huge API surface with synchronous event emitting, magic error event and flawed memory leak detected. Cogear.JS uses the small library called Emittery, which has none of that.

Cogear.JS core is built from modules. Take a look at the main script file in the repository and all modules it has plugged in.

Source of `./lib/cogear.js`

Moreover Cogear.JS main object class is globally available and extends Emittery, so events can be called throughout the entire code.

Cogear.JS as an inheritor of Emittery has two methods – on and emit. With on method you can add callback function for named event. And with emit method you call this event with or without arguments.

dbelyaeff / awesome-cogear

List of best plugins, themes, etc.

awesome-cogear

Best plugins and themes for Cogear.JS

Plugins

Assets

Compressor – Compress pages and assets with gzip for faster loading.
Pages JSON – Stores pages into pages.json. Can be fetched and used on site with React, Vue.JS, Angular, etc.

Video

YouTube – Embed youtube videos by links.

Frontend frameworks

Vue – Brings Vue SFC import to entry points.

Blogging

Blog – Simple blog with pagination and tags.
Blog-RSS – Adds RSS to blog.

Themes

Default – Default theme. To learn how to.
Blog – Blog theme with no framework. Clone it and edit for your needs.
Bootstrap 4 - Various Bootstrap 4 themes. Best used for responsive design (mobile, tablet, etc.)
Bootstrap 4 in ejs — Bootstrap 4 theme based on EJS, provided by @dtslvr

Presets

Blog – Simple blog preset with responsive theme.
Bootstrap 4 blog in ejs — Bootstrap 4 blog preset, provided by…

View on GitHub

If you like this video, please, subscribe Cogear.JS YouTube-channel and giva a star to the projects repository:

dbelyaeff / cogear.js

Modern static websites generator (Node.JS/Webpack)

THE PROJECT IS DEPRECTATED

Cogear.JS – modern static websites generator

Requirements | Installation | Usage | Options | Website

About

Cogear.JS is a static site generator built with Node.JS and based on Webpack (v4.6).

It's inspired by Jekyll and others, but built on the top of the latest frontend technologies.

Providing awesome experience of on-the-fly hot reloading to instantly implementing any changes.

Introduction video

Features

🖥 Modern stack technologies Build modern static websites with bundled scripts and styles.Rapidly prototype and instantly deploy to the server. Use any modern frontend stack (webpack bundled) – Vue.JS, React, Angular, Ember, etc.
🚀 Blazing fast and reliable Performs nearly 1.000 pages per second (depends on the pages content and raw computer processor power). Being online. Server can handle thousands requests per seconds to serve static files (even on tiny VPS).
📦 For any hosting Doesn't requires any database…

View on GitHub

Join the Social Impact Hacktoberfest Challenge

Learn how to win a cool t-shirt taking part in Hacktoberfest via contributing to Cogear.JS.

Right now we encourage developers to:

Create a plugin for React (just add a loader to Webpack).
Create a Bootstrap 4 theme.

Deploying Cogear.JS-generated site to the Now.sh

Dmitriy Belyaev — Fri, 05 Oct 2018 10:45:29 +0000

Cogear.JS is an open-sourcered static websites generator built with Node.JS and based on the latest Webpack.

Dev.to members previously may read the introduction article and the tutorial about how to create a blog in a minutes with Cogear.JS.

Now it's time to talk about deploy.

When a site is designed in development mode and built-in production or build mode, it's time to deploy it to the remote server.

Basically Cogear.JS can upload it via FTP or SFTP protocols and even use rsync (if installed).

Deploy methods speed comparsion:

Method	Speed
FTP	slowest
SFTP	fast
rsync	fastest

You can read more about standard deploy ops in the docs:
https://cogearjs.org/docs/deploy

But now it's all about Now.sh which provides free hosting for static sites.

Getting Started

You need to download and install desktop Now.sh app. It will provide command line utility called now.

When it has been installed deploy procedure becomes incredibly easy.

Just compile your site (build it):

$ cd ~/Sites/site

$ cogear build

It will be compiled to the output folder which is ./public by default.

Now you are ready to deploy.

$ now --public public

You send the command to Now to upload the folder ./public in --public mode (it's required for non-paid accounts).

Within a few seconds, your site is online!

Site address has been copied to the clipboard.

You may choose an appropriate domain with now alias command.

$ now alias https://public-psuaoefsus.now.sh cogear.now.sh

Done!

You can even use custom domain via DNS management.

Like I do:

$ now alias https://public-psuaoefsus.now.sh cogearjs.org

Cogear.JS official site is hosted at Now.sh absolutely for free.

Build a blog with Cogear.JS

Dmitriy Belyaev — Fri, 28 Sep 2018 09:50:15 +0000

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:

Blog plugin.
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!

DEV Community: Cogear.JS

Creating a plugin for Cogear.JS

Article No Longer Available

Article No Longer Available

Article No Longer Available

Source of ./lib/cogear.js

dbelyaeff / awesome-cogear

List of best plugins, themes, etc.

awesome-cogear

Plugins

Assets

Video

Frontend frameworks

Blogging

Themes

Presets

dbelyaeff / cogear.js

Modern static websites generator (Node.JS/Webpack)

THE PROJECT IS DEPRECTATED

Cogear.JS – modern static websites generator

About

Introduction video

Features

Join the Social Impact Hacktoberfest Challenge

Deploying Cogear.JS-generated site to the Now.sh

Getting Started

Build a blog with Cogear.JS

Installation

Blog crafting

dbelyaeff / cogear-preset-blog

Blog preset for Cogear.JS

Cogear.JS preset blog

Installation

Read the docs

Done

Source of `./lib/cogear.js`

Cogear.JS preset `blog`