Вы когда-нибудь совершали длительные перелеты с детьми? Это ужасно, особенно если они твои собственные.

У нас с женой двое детей (обоим до 3 лет), поэтому, когда мы куда-то идем, мы стараемся сделать процесс максимально безболезненным.

К счастью, сайты по планированию путешествий, такие как Google Авиабилеты, все упростили. У нас есть все возможные варианты, мы выбираем, в какое время / авиалинии / отели работают лучше всего, и с помощью нескольких щелчков мыши создаем идеальный рейс туда и обратно.

Легкий.

Если бы создание сайтов JAMstack было таким же простым, как создание отпусков, верно? Что ж, благодаря Stackbit, теперь это так.

Если вы впервые слышите о Stackbit, не волнуйтесь, это довольно ново. Фактически, на данный момент он все еще находится в стадии бета. Но мы предполагаем, что скоро вы услышите гораздо больше о Stackbit, поэтому мы считаем важным ознакомиться с ним как можно раньше. Вот почему эта статья будет охватывать:

Давайте нырнем!

Что такое Stackbit?

Чтобы понять Stackbit, вам сначала нужно иметь базовое представление о JAMstack. Тем, кто не знаком с подходом, обязательно стоит прочитать наш вводный пост. Это даст вам хорошую основу для понимания того, что делает Stackbit таким замечательным инструментом.

Но если вы уже знакомы с JAMstack, то вам будет приятно узнать, что этот новый способ создания сайтов стал намного доступнее благодаря Stackbit.

Stackbit - это новый SaaS, который позволяет разработчикам любого уровня быстро создавать свои собственные сайты JAMstack. Основатели Охад Эдер-Прессман (генеральный директор), Дэн Барак (CPO) и Саймон Ханукаев (технический директор) начали экспериментировать с этой идеей в конце 2018 года и в начале 2019 года сформировали официальную компанию.

Stackbit берет все инструменты, которые вам понадобятся для стека сайта (тема, генератор статических сайтов, CMS и развертывание), и быстро объединяет их для вас. Он предлагает варианты в каждой категории, поэтому вы можете смешивать и сочетать инструменты в своем стеке, которые наилучшим образом соответствуют вашим потребностям.

В этот момент вы можете подумать: «Хорошо, но« быстро »- это относительный термин в этом пространстве… насколько« быстро »мы здесь на самом деле говорим?

Отличный вопрос. Позвольте мне сказать вам так: вы можете буквально бросить HotPocket в микроволновую печь, создать невероятно элегантный сайт JAMstack, и вы все равно будете ждать, пока ваша еда станет достаточно прохладной, чтобы ее можно было есть.

Вот как это работает:

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

Когда у вас будет тема, вы сможете выбрать один из самых популярных генераторов статических сайтов на рынке сегодня: Jekyll, Hugo и Gatsby. В ближайшем будущем появятся новые (Hexo и VuePress), но вы заметите, что есть также возможность запросить добавление одного из них, если вы не видите своего фаворита в списке.

Затем вы должны решить, с какой CMS вы хотите управлять своим контентом, или вы можете вручную подключить свою CMS позже. Тем не менее, у вас есть множество хороших вариантов на выбор, включая Forestry, NetlifyCMS, Contentful и DatoCMS (не говоря уже о присоединении Prismic и Sanity в ближайшее время).

Наконец, у вас есть репозиторий кода с GitHub и развертывание с Netlify, хотя вскоре у вас появятся и другие варианты для обоих.

И voilà, presto, finito… вот и все. Теперь вы просто сидите, смотрите, как строится ваш сайт, и ждете, пока этот HotPocket остынет.

Почему был создан Stackbit?

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

→ Скорость: как упоминалось ранее, вы можете объединить все свои инструменты JAMstack вместе и запустить и запустить сайт за считанные минуты, независимо от вашего уровня разработчика.

→ Параметры: как уже упоминалось, Stackbit в настоящее время находится в стадии бета-тестирования, но они по-прежнему предлагают различные темы, SSG, CMS и несколько вариантов развертывания, как указано выше.

→ Простота: пользовательский интерфейс для Stackbit просто убийца. Большие визуальные дисплеи, четкие инструкции и подробная документация делают использование платформы практически безвредным.

Теперь я хочу уделить минутку и поговорить об этом последнем качестве: простоте. На первый взгляд, у вас может возникнуть соблазн поместить Stackbit в категорию веб-конструкторов с возможностью перетаскивания. Я вижу искушение, но это не в полной мере оправдывает мое заявление. Stackbit - это не карта «выбраться из тюрьмы» для неопытных разработчиков; это просто отличный способ начать работу с JAMstack. Но это только первый шаг. Охад объяснил мне, что дальше по жизненному циклу Stackbit надеется стать чем-то большим, чем просто стартом JAMstack, но на самом деле он также поможет в обслуживании и обновлении вашего сайта.

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

И вот здесь мы вникаем в суть создания Stackbit: доступность.

Начало работы с JAMstack может быть пугающим. Разработчики вынуждены сталкиваться с горами инструментов для изучения, выбирая инструменты, которые лучше всего подходят для конкретной работы, и задаваясь вопросом, как они могут научить людей, не связанных с технологиями (например ... гм ... маркетинговую команду), работать с этими инструментами однажды сайт работает.

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

Итак, если вы только начинаете, вы можете создавать качественные профессиональные сайты с очень низкой кривой обучения. Как только у вас будет отличный сайт JAMstack в качестве основы, вы получите гораздо лучшую основу для развития своих навыков и знаний.

С другой стороны, если вы опытный ветеринар, вы можете использовать Stackbit, чтобы позаботиться обо всех рутинных задачах, связанных с объединением ваших инструментов, и тратить свое время на разработку собственных тем или возиться под капотом. Независимо от того, что плавает ваша лодка на основе кода.

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

Нижняя линия? Без простоты использования такое движение, как JAMstack, невозможно. Доступность к новым технологиям - вот что подталкивает разработчиков к росту. По крайней мере, с точки зрения нашей команды, здорово, что Stackbit подталкивает разработчиков к переходу в JAMstack на всех уровнях.

Введение в Unibit и индивидуальные темы

Настоящая магия Stackbit - это создание Unibit, надмножества существующих генераторов статических сайтов, которые могут быть перенесены в любой современный генератор статических сайтов. В Unibit интересно то, что команда Stackbit написала пару транспиляторов (и добавит больше) для преобразования вашего проекта Unibit в проект Jekyll, Hugo или даже Gatsby. Итак, вам просто нужно написать свой шаблон один раз, и тогда вы и все, кто использует вашу тему, готовы!

Мы уже упоминали, что у Stackbit есть несколько доступных тем, но некоторые люди хотят быть более уникальными. Так что, если вы заинтересованы в создании собственной темы для Stackbit, Unibit - это то, что вам нужно. К счастью, пользоваться Unibit очень просто. Вам просто нужно научиться использовать Nunjucks, шаблонизатор для JavaScript, похожий на Twig.

Примечание. Мы также получили информацию о том, что ребята из Stackbit планируют предоставить разработчикам возможность добавлять темы, созданные с использованием любых SSG, а это означает, что Unibit - удобный выбор, но не обязательный.

Когда вы создаете свою тему, вы должны включить все ресурсы и данные, необходимые для работы вашей темы. Когда тема используется в Stackbit, у клиента будет полнофункциональный сайт со всем вашим контентом по умолчанию, уже подготовленным в выбранной вами Headless CMS. Конечно, они смогут удалить нежелательный контент, как только он будет запущен.

Вот как выглядит структура папок проекта Unibit:

Я собираюсь разбить каждую папку / файл:

  • components - это папка, в которой вы будете создавать свои частичные представления. Например, вы можете захотеть создать там свою панель навигации и позже включить ее в шаблоны. Здесь должны быть расположены все ваши «шаблоны многократного использования».
  • content папка будет содержать все содержимое. Например, если вы создаете блог, сообщения блога будут создаваться в этой папке. Файлы содержимого обычно представляют собой файлы Markdown и привязаны к странице.
  • data - здесь вы добавляете любые данные, не привязанные к странице. Например, если у вас есть список авторов, но вам не нужно иметь отдельную страницу для каждого автора, вы захотите создать файл типа authors.json, содержащий ваш список авторов.
  • sass - это то место, где вы будете добавлять таблицы стилей, SASS поддерживается из коробки.
  • static - это то место, где вы будете включать любые статические ресурсы, такие как изображения.
  • templates здесь вы будете добавлять шаблоны страниц. Шаблоны обычно привязаны к файлам содержимого.
  • config.yml - это файл конфигурации Unibit.
  • stackbit.yml здесь вы напишете моделирование контента и зададите некоторые настройки, связанные со Stackbit.

Тема электронной коммерции Stackbit от Snipcart

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

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

Мы определенно впечатлены тем, насколько эстетично мы смогли разработать тему, особенно за такой короткий промежуток времени. Кроме того, это один из первых реализованных нами проектов, работающих на нашей новой версии 3.0. Эта обновленная корзина для покупок все еще находится в стадии бета-тестирования, но скоро будет официально выпущена и полностью функциональна в теме Stackbit. Одна из замечательных особенностей версии 3.0 заключается в том, что мы смогли настроить цвета тележки в соответствии с нашей темой Planty, чтобы оставаться в соответствии с брендом.

Вот краткий обзор самой используемой темы:

Чтобы лучше познакомиться с темой Planty, щелкните здесь

Чтобы получить доступ к репозиторию с открытым исходным кодом темы Planty, щелкните здесь

Опять же, эта тема теперь общедоступна на Stackbit и имеет встроенные функции электронной коммерции. Это означает, что теперь вы можете использовать Stackbit для создания готового сайта JAMstack для электронной коммерции! Чтобы использовать собственную тему Snipcart, нажмите здесь.

Тем не менее, мы: heart: вклад других разработчиков, так что не стесняйтесь вносить свой вклад в нашу тему на GitHub.

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

Заключительные мысли

Поиграв со Stackbit, наша команда была очень впечатлена. Сначала я думал, что наши разработчики будут сопротивляться, потому что платформа делает барьер для входа в JAMstack очень низким. Напротив, наши разработчики были в восторге от того, что Stackbit помогает продвинуть JAMstack вперед и, будем надеяться, популяризирует это движение. Кроме того, они напомнили мне, что Stackbit (пока) не является инструментом для поддержки сайта, так что более опытные разработчики могут его использовать.

Еще один аспект Stackbit, который нас впечатлил, - это их команда. Нам посчастливилось наладить с ними отношения в цифровом формате и уважать их страсть, энтузиазм и открытость для обсуждения платформы с нами. Такой проект утомителен, и есть множество причин, по которым все может пойти не так. Это также тот проект, в реализации которого мы не стали бы доверять многим людям, в том числе и нам самим, но мы уверены, что это те люди, которые подходят для этой работы.

Но что нас больше всего волнует, так это то, как далеко зайдет это программное обеспечение и какой тип разработчиков оно привлечет. Будет ли он более привлекательным для профессиональных разработчиков, создающих сайты JAMstack для клиентов, или дизайнеров, создающих собственные темы? Мы предполагаем, что много и того, и другого с упором на последнее. Время покажет.

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

Есть вопросы? Не стесняйтесь оставлять комментарии, чтобы поделиться с нами своими мыслями, отзывами и вопросами. Если вам понравился этот пост, найдите секунду, чтобы 👏 или поделиться в Твиттере!

Первоначально опубликовано в блоге Snipcart и в нашем информационном бюллетене.