Как использовать Jigsaw для быстрого и легкого создания статических сайтов

kak ispolzovat jigsaw dlya bystrogo i legkogo sozdaniya staticheskih sajtov?v=1656525379

автор Год Вест

1*KR8iGkB0dfLoeHz9kq5t4g
Фото Родзи Иваты на Unsplash

Давайте погрузимся в Jigsaw – фреймворк для быстрого создания статических сайтов с использованием тех самых современных инструментов, что и приложения Laravel.

Статические сайты – не новая концепция. Однако полноценная, динамичная система управления содержимым (CMS), такая как WordPress, Drupal и Joomla, казалось, возобладала. То есть до недавнего времени, когда произошло возрождение популярности генераторов статических сайтов, таких как Jekyll, Hugo, Pelican, а теперь и Jigsaw.

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

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

Однако как решение для создания маркетингового сайта в стиле брошюры для бизнеса или простого личного блога/портфолио? На мой взгляд? Не так здорово.

Что такое генератор статических веб-сайтов?

Проще говоря, Static Site Generator – это программа, которая принимает содержимое (обычно написанное на Markdown), применяет его к шаблонам и создает набор чисто статических файлов HTML, готовых к доставке посетителям.

Генераторы статических веб-сайтов совмещают мощность современных инструментов и библиотек шаблонов с простотой статических веб-страниц HTML.

Развёрнутый выход из генератора статических сайтов не требует выполнения или интерпретации веб-сервером.

0*CCMaHN9JpmvIFNdi
Источник изображения (https://www.slideshare.net/mackato/blogging-on-jekyll)

Преимущества генератора статических сайтов

Проверенная технология

Генераторы статических сайтов выводят статические файлы, состоящие только из HTML, CSS и JavaScript. Это означает, что они не требуют обработки сервером и могут обслуживаться непосредственно из файловой системы веб-сервера точно так, как они сохранены. Это быстрая, несложная, проверенная разработка.

Минимальный недорогой хостинг

Генераторы статических сайтов чаще всего работают на вашей локальной машине, а затем исходные данные можно передать на простой веб-хост – подойдет любой веб-хост, поскольку они будут просто обслуживать статические файлы. Поэтому статические сайты можно размещать совершенно бесплатно на таких платформах как Github Pages или Netlify.

Безопасность

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

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

Скорость и производительность

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

Гибкость

Возрождение популярности генераторов статических сайтов, вероятно, связано с ростом популярности JavaScript.

JavaScript теперь может выполнять многие из тех же функций, что и обычные языки сценариев на стороне сервера, такие как PHP или Python.

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

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

Статические параметры сайта для PHP-разработчиков

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

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

Используя я смог получить хорошее сравнение самых популярных генераторов статических сайтов PHP.

0*sA3Jpj2t1OPIqn9s
Сравнение генераторов статических сайтов PHP от

Как вы можете видеть на изображении, Sculpin и Jigsaw являются совершенно очевидными фаворитами.

Sculpin впервые был выпущен в 2012 году, поэтому является зрелым, надежным выбором, построенным на основе компонентов Symfony.

Jigsaw, с другой стороны, был выпущен в 2015 году командой Tighten и использует несколько компонентов Laravel, таких как Blade и Laravel Mix.

Будучи построенным на основе Laravel, и учитывая заметную популярность и сообщество вокруг Laravel, это делает Jigsaw действительно увлекательным вариантом».

Учитывая это, давайте покопаемся в Jigsaw чуть дальше…

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

1*gyYn7QH6v4SVAt0tdB5h6Q

Что такое Jigsaw

Разработанный командой Tighten, Jigsaw – это генератор статических сайтов, использующий компоненты фреймворка Laravel для создания статических веб-сайтов.

Эти компоненты включают в себя механизм шаблонов Blade, коллекции и Laravel Mix для обработки активов.

«Статические сайты для разработчиков Laravel.

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

Учитывая все это, для меня не было неожиданностью, что Jigsaw «чувствует» очень похоже на Laravel. Очень чистый, выразительный синтаксис, простой в настройке, бесконечно мощный и все просто работает.

Давайте посмотрим правде в глаза, план Laravel опробован, это самый популярный бэкенд-фреймворк не без причины. Итак, с Jigsaw, использующим компоненты Laravel и воплощающим этику Laravel, это, безусловно, прекрасное начало.

1*fwXQdEaEeAOttQL1gS_h1w
https://jigsaw.tighten.co/

Начало работы с Jigsaw

В рамках исследования Jigsaw, которое я проводил (сначала это был универсальный проект, который я превратил в серию сообщений в блоге!), я обратился к Кита Дамиани, старшему разработчику Tighten, который также является ведущим в Проект головоломки. По его собственным словам, Кот описывает Jigsaw:

Он, безусловно, ориентирован на разработчиков, которым комфортно работать в экосистеме Laravel, поскольку он так сильно использует Blade; поэтому для тех, кто пишет Laravel (или даже PHP) целый день, это естественный выбор, предусматривающий достаточно короткое время обучения, чтобы начать и работать».

Прекрасно.

Чтобы использовать Jigsaw, вам достаточно установить PHP 7, Composer, Node и NPM на вашем компьютере. Все они являются обычными инструментами, как часть современного рабочего процесса разработки PHP.

Начать и запустить оттуда достаточно просто, поскольку качество документации Jigsaw действительно фантастическое.

Установка Jigsaw вплоть до предварительного просмотра чего-либо в вашем браузере можно достичь всего за 4 простых шага:

1. Установите Jigsaw через Composer:

composer require tightenco/jigsaw

2. Инициализируйте свой проект Jigsaw:

./vendor/bin/jigsaw init

3. Сгенерируйте свой сайт, выполнив команду build:

./vendor/bin/jigsaw build

4. Предварительный просмотр вашего сайта с помощью PHP с помощью команды serve:

./vendor/bin/jigsaw serve

Бум! Это подчеркивает, как легко начать работу с Jigsaw. Как я уже упоминал ранее, это просто работает!

Давайте подробнее рассмотрим некоторые другие важные аспекты фреймворка.

Экосистема и поддержка

Tighten, движущая сила Jigsaw, является неотъемлемой частью более широкой экосистемы Laravel, а также является официальным партнером Laravel.

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

Tighten и многие члены его сотрудников также хорошо известны в сообществе PHP/Laravel по нескольким другим фантастическим проектам с открытым кодом, создавая онлайн-учебники и размещая подкасты.

Поддержка такой страстной, выдающейся и успешной компании является отличным знаком ободрения, и уже Tighten создает сообщество вокруг проекта Jigsaw. Фактически они уже создали Built With Jigsaw, веб-сайт, чтобы собрать и продемонстрировать некоторые замечательные примеры проектов, созданных с помощью Jigsaw, а также ресурсы сообщества и другие интересные случаи использования Jigsaw.

Стоит также отметить, что когда я обратился к Киту по поводу интервью с ним для своего проекта, он был более чем рад потратить время, чтобы ответить на несколько вопросов. Эта готовность общаться непосредственно с кем-то из широкого сообщества (случайным незнакомцем из Великобритании) действительно подчеркнула для меня, насколько отдана сообществу и энтузиазм команда Jigsaw. Слава Киту и отношение Tighten в целом.

Производительность и масштабируемость

Во время моего интервью с Китом он показал, что они знают нескольких разработчиков, которые создали очень большие сайты (с 6000 страниц) с помощью Jigsaw.

Команда Jigsaw также работала над оптимизацией времени создания Jigsaw, что будет особенно интересно тем, кто поддерживает или планирует создавать крупные сайты Jigsaw, поскольку это сокращает время сборки примерно на 75%.

Характеристики, гибкость и расширяемость

Корабли Jigsaw в комплекте со многими функциями, способствующими быстрому развитию статических веб-сайтов.

Ссылаясь на отличную документацию, я подытожил некоторые из этих основных функций ниже:

Клинок

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

1*bQxQDqNIR00k4v_WC9AI1Q
Пример лезвия, взять из https://jigsaw.tighten.co/

Утинка

Как и многие генераторы статических сайтов, Jigsaw поддерживает содержимое, написанное на Markdown. Markdown – это фантастический формат написания таких вещей, как статьи, сообщения в блоге и страницы с документацией.

Jigsaw позволяет безболезненно создавать макет в Blade и заполнять его содержимым, написанным в Markdown.

Laravel Mix

Из коробки Jigsaw поставляется с настроенным и готовым к использованию Laravel Mix. Laravel Mix предоставляет свободный API для определения шагов сборки Webpack для вашего приложения с помощью нескольких распространенных препроцессоров CSS и JavaScript.

Как младший разработчик и человек, ограниченно знакомый с Webpack и современными инструментами интерфейса, Laravel mix снимает весь стресс и делает начало работы с Webpack и компиляцией активов легким.

События

Этот запрос на подъемник добавил в Jigsaw 3 события, к которым вы можете подключиться, чтобы запустить пользовательский код до и после обработки сборки программы.

Три события: beforeBuild, afterCollections и afterBuild.

Зарегистрировать прослушивающий события очень просто, и эти события дают прекрасную возможность добавить собственный код. Это было бы особенно полезно, например, в случае, если вы хотите получить содержимое с внешней CMS на основе API, например Contentful, или для создания автоматической карты сайта после создания сайта.

Коллекции

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

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

Пакеты

Хотя официально еще не выпущено, Jigsaw/Tighten работает над парой начальных шаблонов для Jigsaw. Один для блога и один для сайта в стиле документации.

Работая с дизайнером Стивом Шогером, несомненно, эти шаблоны будут выглядеть довольно потрясающе, но это также отличный показатель того, что команда делает первые шаги в расширении Jigsaw посредством добавления внешней экосистемы плагинов.

Несомненно, что как только интеграция плагинов станет возможна, сообщества Jigsaw и Laravel начнут искать способы расширить Jigsaw по многим инновационным способам!

Резюме

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

С этим так легко начать, имея настолько низкий барьер для входа для человека, знакомого с современной разработкой PHP, что вы можете быстро перенести проект по «инициализации головоломки» в БЕСПЛАТНОе размещение на страницах Netlify или Github.

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

В этих случаях Jigsaw превосходит ожидания. Я считаю, что документация была четкой, короткой и хорошо представленной, а сообщество и поддержка, окружающие Jigsaw, не имеют себе равных (кроме, возможно, самого Laravel!).

Обязательно попробуйте Jigsaw в своем следующем проекте или когда вы наконец-то приступите к созданию блога, о котором вы продолжаете говорить.

Больше никаких оправданий. Головоломка отличная.

*В рамках моего исследования для этой статьи я обратился к Киту Дамиани, старшему разработчику Tighten, который также является руководителем проекта Jigsaw.

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

Вы можете прочитать это полное интервью здесь… https://medium.com/@rickwest8/jigsaw-my-interview-with-keith-damiani-senior-developer-at-tighten-and-lead-developer-on-the -55ead103514d

Спасибо, что читаете! ? Если вам понравилось, щелкните кнопку хлопания ниже. Я очень ценю вашу поддержку и это помогает другим людям увидеть историю.

Я всегда рад услышать единомышленников, поэтому не стесняйтесь отправить мне электронное письмо или поздороваться в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.