Я использовал 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 во всей его (пока что простой) красоте!