Привет!

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

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

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

Особенности

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

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

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

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

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

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

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

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

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

Требования

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

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

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

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

Также можно использовать Yarn ^[15] вместо NPM ^[12].

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

• Mac
• Linux
• Windows

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

Установка

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

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

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

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

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

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

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

$ cd ~/Sites

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

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

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

$ cd ~/Sites/site.io

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

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

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

Опции

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

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

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

• Официальный сайт https://cogearjs.org ^[18]
• Документация https://cogearjs.org/docs ^[19]
• Блог https://cogearjs.org/blog ^[20]
• Репозиторий https://github.com/codemotion/cogear.js ^[21]
• Туториалы на YouTube ^[22]
• Список плагинов и тем ^[23]

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

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

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

Источник ^[24]