Введение в Stackbit: Создайте собственный JAMstack за считанные минуты

Введение в Stackbit: Создайте собственный JAMstack за считанные минуты 09 июля 2019 г.

В спешке? Перейдите к демонстрационной теме или репозиторию GitHub.

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

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

Легко.

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

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

Что такое стек
Почему Stackbit был создан
Unibit - их «мета» статический генератор сайтов - и пользовательские темы

Давайте погрузимся прямо в! Что такое стекбит? Stackbit

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

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

Stackbit - это новый SaaS, который позволяет разработчикам любого уровня быстро создавать собственные сайты JAMstack. Основатели Ohad Eder-Pressman (генеральный директор), Dan Barak (CPO) и Simon Hanukaev (CTO) начали играть с этой идеей в конце 2018 года и создали официальную компанию в начале 2019 года.

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

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

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

Не веришь мне? Просто нажмите «Play» на видео, которое мы сделали ниже:

https://d1czrtm2mp3lak.cloudfront.net/items/2o3r452p3L0d1h0m0i09/Screen%20Recording%202019-07-05%20at%2012.33%20PM.mov

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

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

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

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

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

И вуаля, Presto, Finito … это все. Теперь вы просто сидите, смотрите, как строится ваш сайт, и жуете свой горячий пирожок.

Почему был создан 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
├── data
├── sass
├── static
├── templates
├── config.yml
└── stackbit.yml

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

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

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

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

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

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

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

Чтобы получить лучшее представление о теме Planty, нажмите здесь
Чтобы получить доступ к репо с открытым исходным кодом темы Planty, нажмите здесь

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

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

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

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

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

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

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

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

Натан Томпсон Содержание и маркетинг

https://snipcart.com/blog/stackbit?utm_source=stackbit&utm_medium=referral&utm_campaign=stackbit

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus