Я использовал Saber для создания маркетингового сайта и блога для StaticForms, стартапа, который я создаю. StaticForms обеспечивает безопасный сервер форм для статических веб-сайтов. Я знал, что мне понадобится несколько форм как на маркетинговом сайте, так и в блоге, поэтому это была возможность изучить новую технологию и проверить основное предложение моего стартапа.

Sabre — это относительно новый генератор статических сайтов, основанный на Vue, современной среде JavaScript для создания одностраничных приложений. По своей сути, Sabre позволяет вам писать контент в Markdown и преобразовывать его в набор файлов HTML, CSS и JavaScript, но при необходимости он дает вам доступ ко всей мощи платформы Vue.

Существует множество других генераторов статических сайтов, и даже после того, как я решил, что хочу использовать генератор на основе Vue, оставалось несколько вариантов на выбор. Я выбрал Sabre отчасти потому, что мне нравится пробовать что-то новое, но в основном потому, что его было проще настроить и запустить, чем Next.js, Gridsome или VuePress. Ваш пробег может, конечно, варьироваться.

Я столкнулся с несколькими ограничениями и предположениями о том, как будет использоваться Sabre, пока не жалею.

На веб-сайте Sabre есть руководство по началу работы, но оно зашло так далеко и, по крайней мере для меня, оставило много открытых вопросов, которые мне пришлось решать методом проб и ошибок. Эта серия постов предназначена для записи того, что я узнал, на случай, если мне нужно будет сделать это снова, и я не смогу вспомнить, как…

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

  • Создание сайта
  • Добавление страниц и сообщений
  • Создание компонентов (включая формы, которые публикуются в StaticForms)
  • Создание темы

Это первый в серии…

Предпосылки

Установить узел

Если у вас еще не установлен Node.js, вы можете загрузить последнюю версию с веб-сайта Node.js.

Если он у вас установлен, убедитесь, что вы используете последнюю версию Node.js.

node -v

Sabre требует Node.js версии 8.0 или выше. Текущая версия по состоянию на ноябрь 2019 года — 13.1.0 (и текущая версия с долгосрочной поддержкой — 12.13.0 — вам, вероятно, следует использовать ее, если вы создаете рабочий сайт).

Установить пряжу

При его установке также будет установлен npm, менеджер пакетов по умолчанию для Node.js, но я предпочитаю использовать Yarn.

Yarn — это альтернатива npm для управления пакетами, которая по-прежнему использует реестр npm, но включает несколько улучшений, делающих управление пакетами более быстрым и надежным. Вам не обязательно использовать Yarn, так как все, что вы можете делать с Yarn, вы можете делать и с npm, но лично я предпочитаю его.

Yarn является кроссплатформенным, и вы можете установить последнюю версию для своей платформы с https://yarnpkg.com/en/docs/install.

Создание проекта

Самый простой способ создать новый сайт Sabre — использовать `yarn create site`:

yarn create site < Site Name >

Как только это будет завершено, появится новый каталог, соответствующий `‹Site Name›`, так что переключитесь на него…

cd < Site Name>

…затем запустите Yarn, чтобы установить все зависимости.

yarn

Вот и все! Теперь вы можете просто запустить сервер разработки, чтобы раскрутить ваш новый сайт.

yarn dev

Для просмотра откройте в браузере

http://localhost:3000

и увидеть свой новый сайт Sabre во всей его (пока что простой) красоте!