DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Cogear.JS β€” modern static websites generator
Dmitriy Belyaev
Dmitriy Belyaev

Posted on

Cogear.JS β€” modern static websites generator

Cogear.JS is a static websites generator built with Node.JS (9.x or higher) and based on Webpack (v4.6).

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

Provides awesome hot reloading experience in development mode.

Features

  • πŸ–₯ Modern stack of 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). Server can handle thousands requests per second to serve static files (even on tiny VPS).
  • πŸ“¦ For any hosting Doesn't requires any database (data stored in flat files) and works with any hosting (as it produces static html and assets files).
  • 🚚 Deploy built in Create a preset and update your site to the server via FTP, SFTP or even rsync.
  • πŸ”“ Secure. No updates needed Just forget about annoying regular updates from usual CMS. It's 100% secure for hacking because there is no backend after being deployed to the server.
  • Free. Open Sourced Use it for free. For any needs. Forever.

Github Pages (or any similar project) you can host generated site for free.

What it can be used for:

  • Rapid site prototyping
  • Portfolio site
  • Company site
  • Product site
  • Personal blog
  • Artist or musician site

Any site that has admin-generated content.

Multi-user content management can be provided via Github. Just store your source in the repository, accept pull-requests from other users and build a site after commits (can be automated).

Using Firebase or any other backend, written in any lang (PHP, Ruby, Python, Node.JS) or even with CMS like a WordPress, with help of modern frontend technologies like Vue.JS or React, it can be turned into more dynamic site like e-commerce, products catalog and so on.

What it cannot be used for:

  • Forum
  • Social network
  • Chat

Or any other site type with great amount of user-generated content which relies on heavily database usage and dynamically generated pages.

Of course you can try, but it has to be modern SPA which handles data from dedicated API.

Requirements

You have Node.JS (9.x or higher) and NPM (usually comes together) to be installed.

Download and install.

The latest version (v10.9.0) is recommended.

You can also use Yarn instead of NPM.

Cogear.JS runs on:

  • Mac
  • Linux
  • Windows

You may want to use awesome VSCode editor.

Installation

Usage

Go to the directory where all your local sites are hosted.

$ cd ~/Sites

Create a new site via command:

$ cogear new site.io -y # where "site" is your site folder name

After that go to site directory:

$ cd ~/Sites/site.io

And start up Cogear.JS in development or production mode (learn more).

$ cogear # run in develompent mode with hot-reload – by default

$ cogear production # build a site and run local server

Next time we will dive deeply into the workflow.

Github repository:

codemotion / cogear.js

Modern static websites generator (Node.JS/Webpack)

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

Introduction to Cogear.JS

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 (data stored in flat…

Official site:
https://cogearjs.org

Docs:
https://cogearjs.org/docs/

Top comments (19)

Collapse
 
itsdarrylnorris profile image
Darryl Norris

How does Cogearjs compare to Gatsbyjs?

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

Also is noticed that Gatsby is PWA generator.

Cogear.JS is basically about static websites building.

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

Gatsby requires React knowledge.

Cogear.JS does not. It’s frontend framework agnostic.

Can use any framework via plugins which enhance webpack config.

Collapse
 
itsdarrylnorris profile image
Darryl Norris

I use static website's generators for small projects something that I can develop very quickly and deploy in Github pages. That's something that I do not like about GatsbyJS it's more like a framework than a plug and play solution.

Cogear.JS looks like is more like a framework rather than plug and play solution. Do you know if there is a started project for Cogear.JS that will make it more plug and play? Something that I can download, pick a theme, change the data and deployed it.

Currently, I have been using Hugo and as a plug and play solution works great. However, modifying it can be difficult, and I am trying to find something in between.

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author

Do you know if there is a started project for Cogear.JS that will make it more plug and play?

Started project is included inside by generator.

Type:

$ cogear new site.io # your site name 

New site will be generated by this command.

Next go the site folder cd ./site.io and call cogear command.

System will be fired up in development mode with hot reloading of css, js and pages content.

You are free to clone the default theme or change it as you wish.

Of course, you need to install Cogear.JS previously.

Please, take a look at the video to make this topic more clean:

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author

I'm hosting Cogear.JS website on Now.

Deploy process is like following code:

cogear build
now --public public
# the link is given and is copied to clipboard
now alias [given_link] cogearjs.org 

That is all.

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author

How is it going? Are there any difficulties in try to new site crafting?

Collapse
 
crazy4groovy profile image
crazy4groovy

I like the ideas here! Plugins seem very powerful.

I read through the docs but I don't see anything that mentions how to start with a framework like React. Only static pages for various template engines, under the src/pages folder.

Two topics I'd be interested to see covered in the docs are:

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

Thanks.

Please, take a look at the following blog post about Vue.JS plugin:
cogearjs.org/blog/2018/09/vue-plugin/

How to build dynamic content?

Use VueRouter for routing and axios for fetching data from external API.

Using Vue.JS plugin example it's easy to write similar one for React.JS.

Plugin just extends Webpack config

Look at plugin main file (only 31 lines w/brackets):
github.com/codemotion/cogear-plugi...

Collapse
 
crazy4groovy profile image
crazy4groovy

Cool, thanks!

Just to be clear, there is no support or plugins for importing content from a 3rd party service like Contentful, correct?

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author

You're welcome!

Right now there is a Vue-plugin.

You can import axios in the entry point script and use any API that you'd want.

With VueRouter it gives great possibilities.

Thread Thread
 
dbelyaeff profile image
Dmitriy Belyaev Author

I'm planning to release a video tutorial about plugins today.

Advise you to subscribe to our YouTube channel not to miss newer tutorials.

I think it's a good topic about Contentful. Will try to make a video on that.

I've also planned to write a plugin for importing from Wordpress.

Collapse
 
ogfris profile image
Fris

Goodjob! (except for the grammar but it's totally fine)

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

I've released a feature to edit any docs page via GitHub pull requests process.

Read more about it:
cogearjs.org/blog/2018/09/editable...

You're welcome to help me with grammar somewhere 😏

Collapse
 
rnrnshn profile image
Olimpio

Thanks... I will make a use of it.

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

πŸ˜‚ It's not my native.

Collapse
 
intermundos profile image
intermundos

Thanks for sharing great tool Dima.

I want to try to use it along with hyperhtml to render ui in my new side project.

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

If you would mind I can publish a series of tutorials and movies how to work with Cogear.JS here.

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev Author

You comments are welcome!

🌚 Life is too short to browse without dark mode