Создание простого блога на Node.js

В этой статье мы покажем вам, как создать простой блог с помощью Node.js и Cosmic JS. Давайте начнем.

Прим. перев. Также вы можете посмотреть наш материал по созданию простого мессенджера с использованием Node.js.

Начало

Убедитесь, что у вас установлена платформа для разработки Node.js, если нет, то посетите веб-сайт Node.js, чтобы скачать последнюю версию.

Теперь установите пакетный менеджер Yarn, который понадобится для установки зависимостей будущего блога:

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

На следующем этапе создайте файл package.json, чтобы импортировать все зависимости для блога и добавьте в него следующие строки:

В этом файле объявлены зависимости, которые необходимо установить для разработки и запуска блога:

  1.  Модуль Cosmic JS Node, чтобы получать данные с Cosmic JS Bucket.
  2.  Веб-фреймворк Express.
  3.  ПакетHogan для обработки шаблонов.
  4.  МодульNodemon для удобства разработки — он автоматически перезагружает приложение, когда в нем произошли изменения.

Выполните следующую команду, чтобы установить зависимости:

Разработка блога

Далее нужно сформировать главную страницу блога. Создайте файл под названием app.js и добавьте в него следующие строки:

Поясним, что происходит здесь:

  1. Производится импорт модулей Express, Cosmic JS и т.д.
  2. Присоединяются верхний и нижний колонтитулы.
  3. При запросе («/») происходит вызов Cosmic JS Bucket для вывода постов и возвращается шаблон index.html.
  4. Добавляются данные на страницу в виде глобального хранилища данных — cosmic. Эта структура данных делает вашу реализацию шаблона  интуитивной.

Добавление переменных шаблона домашней страницы

Эта часть процесса является наиболее интересной, потому что она показывает мощь Cosmic JS в сочетании с системой шаблонов Mustache.

Создайте папку под названием views:

Создайте файл index.html в этой папке и добавьте в него следующие строки:

Что здесь происходит:
1. Формируется заголовок (header) с переменными Mustache.
2. Извлекаются данные Cosmic с помощью переменной Mustache {{cosmic}}, которая имеет все необходимое для компоновки динамических данных нашей страницы.
3. Проход по {{}}cosmic.objects.type.posts и вывод постов в блоге.

Мне нравится в этом подходе то, что логика шаблона отделена от остального кода, за исключением некоторых запросов и циклов. Данный подход изолирует код шаблона от кода основного приложения.

Заключение

Эта сокращенная версия блога доступна для загрузки на странице Cosmic JS Apps. Полная версия блога включает в себя страницу со всеми постами, а также страницу с постами каждого автора. Просмотрите полную версию кода на GitHub и разверните блог с помощью нескольких кликов на панели инструментов Cosmic JS, установив блог в Cosmic JS Bucket.

Перевод статьи «How to Build a Simple Blog Using Node.js»

Дмитрий Юрченко, бог терминала