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.
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
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
Top comments (19)
How does Cogearjs compare to Gatsbyjs?
Also is noticed that Gatsby is PWA generator.
Cogear.JS is basically about static websites building.
Gatsby requires React knowledge.
Cogear.JS does not. It’s frontend framework agnostic.
Can use any framework via plugins which enhance webpack config.
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.
Started project is included inside by generator.
Type:
New site will be generated by this command.
Next go the site folder
cd ./site.io
and callcogear
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:
I'm hosting Cogear.JS website on Now.
Deploy process is like following code:
That is all.
How is it going? Are there any difficulties in try to new site crafting?
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:
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...
Cool, thanks!
Just to be clear, there is no support or plugins for importing content from a 3rd party service like Contentful, correct?
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.
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.
Goodjob! (except for the grammar but it's totally fine)
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 😏
Thanks... I will make a use of it.
😂 It's not my native.
Thanks for sharing great tool Dima.
I want to try to use it along with hyperhtml to render ui in my new side project.
If you would mind I can publish a series of tutorials and movies how to work with Cogear.JS here.
You comments are welcome!