Cogear.JS – современный генератор статических сайтов

в 8:56, , рубрики: node.js, open source, static site, webpack

Привет!

Хочу представить вниманию генератор статических сайтов с открытым исходным кодом, написанный на Node.JS, в основе которого лежит Webpack.

Проект вдохновлён тем же Jekyll, но в основе своей использует современный технологический стек. Например, предоставляет возможность «горячей подгрузки» (без перезагрузки страницы) изменённых скриптов и стилей.

image

Проект ориентирован на международную аудиторию, поэтому официальный сайт, документация и видеоролики — на английском языке.

Особенности

  • Современный технологический стек
    Создавайте современные сайты, с хорошо упакованными (минифицированными, сжатыми, в т.ч. gzip) скриптами и стилями.
    Можно быстро разработать прототип сайта и задеплоить его на сервер.
    Используйте любой современный фронтэнд фреймворк (Webpack внутри) – Vue.JS, React, Angular, Ember и т.д.
  • Супер быстрый и надёжный
    Обрабатывает ~1000 страниц в секунду (зависит от содержимого страницы, а также мощности процессора).
    Ясное дело, что процесс отдачи статического HTML в разы быстрее любого интерпретируемого языка.
  • Подойдёт любой хостинг
    Не требует базы данных (информация хранится в файлах) и работает на любом хостинге (поскольку на выходе — статические html-файлы и ассеты).
  • Встроенный деплой
    Создайте пресет и разверните сайт на сервере через FTP, SFTP или даже rsync.
    Недавно вышел материал, как бесплатно задеплоить сайт на now.sh.
  • Безопасный. Никаких обновлений
    Можно забыть про необходимость регулярных обновлений, как, например, в том же WordPress.
    Безопасноcть на уровне 100%, т.к. никому ещё не удавалось взломать статический HTML (фича).
  • Бесплатный. Open Source
    Пользуйтесь на здоровье. Ни копейки не платите.

Для каких целей подойдёт:

  • Быстрое прототипирование (сделали шаблон, показали рабочий прототип, а потом уже натянули на движок)
  • Портфолио
  • Сайт компании
  • Сайт продукта
  • Персональный блог

Подойдёт для любого сайта, где нет контента, генерируемого пользователем.

Можно сделать даже коллективный блог, при помощи Pull Requests на Github.

При помощи Firebase или любого другого API, написанного на любом языке (PHP, Ruby, Python, Node.JS) или даже с помощью WordPress (JSON-API), и современного фронтэнд фреймворка типа Vue.JS или React, можно сделать динамический сайт под более сложные задачи: интернет-магазин, каталог продукции и так далее.

Для чего не подойдёт:

  • Форум
  • Социальная сеть
  • Чат

В общем, для проекта, где много контента, генерируемого пользователями, где много работы с базой данных и страницы генерируются на лету.

Требования

Надобно иметь установленные Node.JS (9.x или выше) и NPM (обычно идут вместе).

Скачать и установить (если ещё этого не сделали).

Рекомендуется последняя (v10.12.0) верися Node.JS.

С Node.JS < v9.x не работает, потому как из коробки идёт компиляция SASS, Less, Stylus, а node-sass требует 9 версии.

Также можно использовать Yarn вместо NPM.

Cogear.JS работает на:

  • Mac
  • Linux
  • Windows

Можете использовать модный нынче VSCode для разработки.

Установка

Простая, без ухищрений:

$ npm install cogear -g
# or
$ yarn global add cogear

Вот и всё. Установка прошла успешно.

Cogear.JS после установки доступен через консольную команду cogear.

Теперь можно сгенерировать первый сайт.

Использование

Перейдите в директорию, где хранятся Ваши веб-сайты.

$ cd ~/Sites

Вызовите комнаду на генерацию нового сайта:

$ cogear new site.io # где "site.io" – это имя папки нового сайта

crafting site

После чего проследуйте в данную директорию:

$ cd ~/Sites/site.io

Запустите Cogear.JS в режиме development (разработка) или production(подготовка к продакшену) (больше о режимах работы).

$ cogear # по-умолчанию запускает режим разработки с «горячей подгрузкой» обновленных ассетов и страниц

$ cogear production # построить сайт и запустить локальный сервер — посмотреть как сайт будет выглядеть в продакшне

Опции

Увидеть список опций командной строки можно путём добавления флага --help.

help

Полезные ссылки

Если тема вызовет интерес, могу сделать серию туториалов, что да как.

P.S. Не стал размещать в Я пиарюсь, т.к. open source.

Задавайте вопросы, постараюсь ответить.

Автор: Беляев Дмитрий

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js