Cogear.JS is a static websites generator. It means that it compiles
src folder (
./src by default) data to static html and assets files to the
output folder (
./public by default).
src folder can be provided in various formats:
Then Webpack comes to play. It bundles app assets (basic
./theme.js or any custom script), packs all imported assets (other scripts, stylsheets, fonts, etc).
All external (remote) and internal (local or from
When Webpack work is finished, pages are going on build.
Compiled pages are rendered through layouts, which are provided by site
theme (or by
Bundled assets are injected during layout rendering.
development modes static server is fired up to show the results.
Browser window opens.
development mode watchers are being stared to reflect changes in pages, layouts and assets.
To build a static website Cogear.JS do next:
- Reads site config from
.jsonformats are also available).
pagessubfolder for pages. (default:
- Preload pages.
Available page formats:
.hbs. Parse metadata with
- Fires up
devmode, with hot-reload).
- Renders pages content with layouts (
./src/layouts) to the
- Compiles assets and injects them into previousely built static html files.
Pages are build asynchronously (from v1.1.0).
Benchmarks show speed 1000 pages per second, est.
Speed depends on:
- Pages count
- Pages content
- Webpack assets compilation time
- Pages and layouts formats
Webpack processing also depends on imported modules count.
Development mode is also faster then
- It doesn't compress assets.
- It doesn't minify assets.
- It stores all files in memory instead of filesystem.
Config is a simple JSON-file located at
title: Cogear.JS – modern static websites generator theme: default
page title is not defined then site config title will be used.
Pay attention to the
theme property as it defines basic layout and can be also used to load scripts, styles and other assets.
Deploy presets can also be stored in config. Read more
When Cogear.JS is called from command line it runs in
$ cogear # runs in devemopment mode by default
This mode peforms:
- Build pages and watch for changes.
webpack-dev-serverwhich will instantly update in-browser pages, scripts and styles on the fly with
It handles all assets in memory (no output in real file system, don't panic).
$ cogear production # runs in production mode
This mode performs:
- Build pages.
- Assets compilation and injection to pages with Webpack.
- Starting local server to check out the results.
$ cogear build
Only build pages and perform Webpack assets compilation.
It should be called before deploy process in order output files to be built.
$ cogear deploy [preset]
Fires deploy process.
More info at Deploy page.
It's the place where all magic happens.
./src ├── app.js # required, entry point ├── layouts # optional │ └── index.pug # optional └── pages # required, site index page └── index.md # required, entry point
Required files are:
Markdown or any other format).
Basically it's all you need to build your first site.
entry point (
Webpack term) which has to be injected in all the pages.
All you internal and external scripts may be imported there.
// Look at webpack-specific comments import('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css') // Either remote or local scripts, styles and other resources (like fonts) can be loaded import('./css/app.styl') // You can even import your theme entry script if it's necessary import('@/js/script.js') // `@` is an alias for current theme folder // `#` is an alias for project root folder