Jekyll для разработчиков Wordpress

Опубликовано: 2022-03-10
Краткое резюме ↬ Jekyll набирает популярность как легкая альтернатива WordPress. Его часто называют инструментом, который разработчики используют для создания своего личного блога. Это только верхушка айсберга — он способен на гораздо большее! В этой статье мы возьмем на себя роль веб-разработчика, создающего веб-сайт для вымышленной юридической фирмы. WordPress — очевидный выбор для такого веб-сайта, но единственный ли это инструмент, который мы должны рассмотреть? Давайте рассмотрим совершенно другой способ создания веб-сайта с помощью Jekyll.

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

Jekyll для разработчиков Wordpress

Дальнейшее чтение на SmashingMag:

  • Создайте блог с помощью Jekyll и GitHub Pages
  • Моделирование контента с помощью Jekyll
  • Обзор генераторов статических сайтов: Jekyll, Middleman, Roots, Hugo
  • Почему генераторы статических сайтов — следующая большая вещь
Еще после прыжка! Продолжить чтение ниже ↓

Что такое Джекил?

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

Почему Джекил?

При принятии решения о том, подходит ли Jekyll для проекта, необходимо учитывать ряд компромиссов.

Преимущества Джекила

  • Меньше сложности
    Веб-сайт Jekyll — это, по сути, статический веб-сайт с языком шаблонов. В нем меньше компонентов для создания и обслуживания. На сервере нам нужен только веб-сервер, способный обслуживать файлы.
  • Скорость
    Когда посетители просматривают страницы на сайтах Jekyll, сервер возвращает существующие файлы без дополнительной обработки . Это намного быстрее, чем WordPress, который динамически генерирует страницы во время запроса. Примечание. Плагины кэширования WordPress могут устранить этот разрыв в производительности.
  • Стабильность
    WordPress имеет больше компонентов, работающих вместе для создания страниц для посетителей. В случае сбоя компонента посетители не смогут просматривать веб-сайт. Гораздо меньше может пойти не так, когда веб-сервер обслуживает только файлы.
  • Безопасность
    Wordpress многое делает для снижения рисков безопасности, таких как атаки CSRF, XSS или SQL-инъекций, однако он полагается на то, что у вас всегда есть последние обновления. Статические сайты устраняют эту проблему, потому что хакер не может использовать динамическое хранилище данных.
  • Исходно-контролируемый
    Веб-сайт Jekyll — это каталог файлов, поэтому мы можем хранить весь веб-сайт в репозитории Git. Работа с репозиторием дает нам много преимуществ (хотя VersionPress находится в разработке и позволяет использовать этот рабочий процесс для WordPress).

Недостатки Джекила

  • Нет графического интерфейса
    Клиент может зарегистрироваться на WordPress.com, выбрать тему и самостоятельно настроить базовый веб-сайт. Jekyll — это инструмент командной строки, который подавляет большинство нетехнических пользователей. Для Jekyll существуют сторонние графические интерфейсы, в том числе CloudCannon (отказ от ответственности: я соучредитель), Forestry, Jekyll Admin, Netlify CMS, Prose и Siteleaf. Однако они должны быть настроены разработчиком перед передачей клиенту.
  • Время сборки
    В нашей ситуации это не проблема, потому что веб-сайт будет создан менее чем за секунду. Однако создание более крупного веб-сайта с 10 000–100 000 сообщений может занять несколько минут. Это расстраивает, когда мы разрабатываем, потому что нам нужно дождаться создания веб-сайта, прежде чем просматривать его в браузере.
  • Темы
    В Jekyll есть несколько доступных тем, но это ничто по сравнению с тысячами тем, доступных для WordPress.
  • Расширяемость
    Если нам нужно добавить пользовательские функции на наш веб-сайт WordPress, мы можем написать собственный PHP. Мы можем создавать собственные плагины Ruby для Jekyll, однако они запускаются во время сборки, а не во время запроса.
  • Служба поддержки
    У WordPress есть огромное сообщество экспертов и другие ресурсы, которые могут помочь. У Jekyll есть аналогичные ресурсы, но в меньшем масштабе.

Jekyll — отличный инструмент для преимущественно информационных веб-сайтов, таких как этот проект. Если проект больше похож на приложение, мы могли бы добавить динамические элементы с помощью JavaScript, но в какой-то момент нам, вероятно, понадобится серверная часть, такая как WordPress».

Реализация

WordPress и Jekyll используют разные подходы к созданию веб-сайтов, но имеют много общих функций. Давайте приступим к созданию нашего веб-сайта Jekyll.

Установка

Типичная среда разработки для WordPress требует установки Apache или NGINX, PHP и MySQL. Затем мы установим WordPress и настроим веб-сервер.

Для Jekyll нам нужно убедиться, что у нас установлен Ruby (иногда это сложнее, чем кажется). Затем мы устанавливаем гем Jekyll:

 gem install jekyll

Если вы используете macOS, сначала убедитесь, что у вас установлен Xcode Developer.

 xcode-select --install

Бег

Запуск сайта WordPress обычно состоит из запуска базы данных и веб-сервера.

В Jekyll мы переходим к файлам нашего сайта (на данный момент пустой каталог) в терминале и запускаем:

 jekyll serve

Это запускает локальный веб-сервер на порту 4000 и перестраивает сайт при каждом изменении файла.

Страницы

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

В Jekyll страницы представляют собой HTML-файлы. Мы начнем с чистого HTML, а затем добавим функции Jekyll по мере необходимости. Вот index.html в его текущем состоянии:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

Жидкость

В WordPress мы можем написать PHP практически для всего. Джекилл использует другой подход. Вместо того, чтобы предоставлять полный язык программирования, он использует язык шаблонов под названием Liquid. (В WordPress также есть языки шаблонов, например Timber.)

Нижний колонтитул index.html содержит уведомление об авторских правах с указанием года:

 <p class="copyright"> &copy; 2016 </p>

Мы вряд ли забудем обновлять это каждый год, поэтому давайте воспользуемся Liquid для вывода текущего года:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

Мы создаем статический веб-сайт в Jekyll, поэтому эта дата не изменится, пока мы не перестроим веб-сайт. Если бы мы хотели, чтобы дата менялась без перестройки веб-сайта, мы могли бы использовать JavaScript.

Включает в себя

Основная часть HTML-кода в index.html предназначена для настройки общего макета и не меняется между страницами. Это повторение приведет к большому количеству обслуживания, поэтому давайте сократим его.

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

Jekyll имеет точно такую ​​же функцию. Включения хранятся в папке с именем _includes . Мы используем Liquid, чтобы включить их в index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

Макеты

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

Эквивалентом файлов шаблонов в Jekyll являются макеты. Макеты — это HTML-файлы с заполнителем для содержимого. Они хранятся в каталоге _layouts . Мы создадим _layouts/default.html , чтобы содержать базовый HTML-макет:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

Затем замените включения в index.html , указав макет. Мы указываем макет, используя переднюю часть, которая представляет собой фрагмент YAML, который находится между двумя линиями с тройным пунктиром в верхней части файла (подробнее об этом позже).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

Теперь у нас может быть одинаковый макет на всех наших страницах.

Передний вопрос

В WordPress настраиваемые поля позволяют нам устанавливать метаданные для записи. Мы можем использовать их для установки SEO-тегов или для отображения и скрытия разделов страницы для определенного сообщения.

Эта концепция в Jekyll называется передним содержанием. Ранее мы использовали переднюю часть для установки макета для index.html . Теперь мы можем установить наши собственные переменные и получить к ним доступ с помощью Liquid. Это еще больше сокращает количество повторений на нашем веб-сайте.

Давайте добавим несколько отзывов в index.html . Мы могли бы скопировать и вставить HTML, но опять же, это приводит к увеличению объема обслуживания. Вместо этого давайте добавим отзывы во вступительную часть и проверим их с помощью Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

Сообщения

WordPress хранит содержимое HTML, дату и другие метаданные для сообщений в базе данных.

В Jekyll каждый пост представляет собой статический файл, хранящийся в каталоге _posts . Имя файла содержит дату публикации и название поста — например, _posts/2016-11-11-real-estate-flipping.md . Исходный код сообщения в блоге имеет следующую структуру:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

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

Под вступительной частью находится тело сообщения, написанное в Markdown. Markdown — более простая альтернатива HTML.

Jekyll позволяет нам создавать макеты, которые наследуются от других макетов. Вы могли заметить, что этот пост имеет структуру post . Макет post наследуется от макета по умолчанию и добавляет дату и заголовок:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Давайте создадим blog.html для перебора сообщений и ссылок на них:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Коллекции

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

Jekyll имеет эту функцию и называет ее коллекциями.

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

Конфигурация нашего сайта находится в _config.yml . Здесь мы устанавливаем новую коллекцию:

 collections: staff_members: output: false

Теперь добавим наших сотрудников. Каждый сотрудник представлен в файле Markdown, хранящемся в папке с названием коллекции; например, _staff_members/jane-doe.md .

Мы добавляем метаданные во вступительную часть и аннотацию в основную часть:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Подобно сообщениям, мы можем перебирать коллекцию в about.html , чтобы отобразить каждого сотрудника:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Поиск

WordPress имеет мощный встроенный поиск и еще более мощные поисковые плагины.

В Jekyll нет встроенного поиска, но есть решения:

  • поиск на стороне клиента с использованием библиотеки JavaScript, такой как Lunr.js (в Jekyll.tips есть руководство по настройке);
  • сторонние решения, такие как Algolia для высокопроизводительного поиска;
  • встраиваемые решения, такие как пользовательский поиск Google.

Плагины

Плагины — привлекательная часть WordPress. Легко загрузить функциональность, чтобы заставить WordPress делать практически все.

На нашем веб-сайте Jekyll многие популярные плагины WordPress не нужны:

  • Безопасность iThemes
    Наш веб-сайт Jekyll так же безопасен, как и веб-сервер, на котором он работает.
  • Резервный охранник
    Наш веб-сайт Jekyll будет жить в репозитории, который дает нам доступ ко всей истории изменений.
  • WP Супер Кэш
    Наш веб-сайт Jekyll уже статичен.

У других плагинов WordPress есть сторонние эквиваленты, которые мы можем добавить на сайт:

  • Плагины контактных форм, такие как Contact Form 7, можно заменить на Formspree, FormKeep или Wufoo.
  • Для простого магазина WP eCommerce можно заменить на Snipcart, Gumroad или Stripe.
  • Вместо комментариев WordPress с Akismet вы можете использовать Disqus, комментарии Facebook или IntenseDebate.

Некоторые плагины WordPress можно эмулировать с ядром Jekyll. Вот фотогалерея с использованием переднего плана и Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Нам просто нужно добавить наш собственный JavaScript и CSS, чтобы завершить его.

Плагины Jekyll могут эмулировать функциональность других плагинов WordPress. Имейте в виду, что плагины Jekyll работают только во время создания веб-сайта — они не добавляют функциональность в реальном времени:

  • Вместо One Click XML Sitemap используйте плагин Jekyll Sitemap Generator.
  • Jekyll SEO Tag дает вам некоторые функциональные возможности SEO Wizard.
  • Вместо WPGlobus для многоязычного веб-сайта используйте плагин Jekyll Language.

Контроль версий

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

На GitHub есть фантастическое интерактивное руководство для начинающих, изучающих Git.

Передача клиента

Это охватывает гайки и болты создания веб-сайта. Если вам интересно посмотреть, как весь веб-сайт Jekyll сочетается друг с другом, взгляните на шаблон Justice. Это бесплатный шаблон для Jekyll с лицензией MIT. Фрагменты выше основаны на этом шаблоне.

CMS WordPress встроена в платформу, поэтому нам нужно будет настроить учетную запись для клиента.

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

Некоторые графические интерфейсы Jekyll предлагают хостинг, в то время как у других есть способ вывода в корзину Amazon S3 или на страницы GitHub.

Резюме

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

<div class="testimonials"> {% для отзыва в page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class ="testimonial-author"> <img src="{{ testimonial.image }}" alt="Фото {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> { % конец для %} </div>

Сообщения

WordPress хранит содержимое HTML, дату и другие метаданные для сообщений в базе данных.

В Jekyll каждый пост представляет собой статический файл, хранящийся в каталоге _posts . Имя файла содержит дату публикации и название поста — например, _posts/2016-11-11-real-estate-flipping.md . Исходный код сообщения в блоге имеет следующую структуру:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

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

Под вступительной частью находится тело сообщения, написанное в Markdown. Markdown — более простая альтернатива HTML.

Jekyll позволяет нам создавать макеты, которые наследуются от других макетов. Вы могли заметить, что этот пост имеет структуру post . Макет post наследуется от макета по умолчанию и добавляет дату и заголовок:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Давайте создадим blog.html для перебора сообщений и ссылок на них:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Коллекции

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

Jekyll имеет эту функцию и называет ее коллекциями.

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

Конфигурация нашего сайта находится в _config.yml . Здесь мы устанавливаем новую коллекцию:

 collections: staff_members: output: false

Теперь добавим наших сотрудников. Каждый сотрудник представлен в файле Markdown, хранящемся в папке с названием коллекции; например, _staff_members/jane-doe.md .

Мы добавляем метаданные во вступительную часть и аннотацию в основную часть:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Подобно сообщениям, мы можем перебирать коллекцию в about.html , чтобы отобразить каждого сотрудника:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Поиск

WordPress имеет мощный встроенный поиск и еще более мощные поисковые плагины.

В Jekyll нет встроенного поиска, но есть решения:

  • поиск на стороне клиента с использованием библиотеки JavaScript, такой как Lunr.js (в Jekyll.tips есть руководство по настройке);
  • сторонние решения, такие как Algolia для высокопроизводительного поиска;
  • встраиваемые решения, такие как пользовательский поиск Google.

Плагины

Плагины — привлекательная часть WordPress. Легко загрузить функциональность, чтобы заставить WordPress делать практически все.

На нашем веб-сайте Jekyll многие популярные плагины WordPress не нужны:

  • Безопасность iThemes
    Наш веб-сайт Jekyll так же безопасен, как и веб-сервер, на котором он работает.
  • Резервный охранник
    Наш веб-сайт Jekyll будет жить в репозитории, который дает нам доступ ко всей истории изменений.
  • WP Супер Кэш
    Наш веб-сайт Jekyll уже статичен.

У других плагинов WordPress есть сторонние эквиваленты, которые мы можем добавить на сайт:

  • Плагины контактных форм, такие как Contact Form 7, можно заменить на Formspree, FormKeep или Wufoo.
  • Для простого магазина WP eCommerce можно заменить на Snipcart, Gumroad или Stripe.
  • Вместо комментариев WordPress с Akismet вы можете использовать Disqus, комментарии Facebook или IntenseDebate.

Некоторые плагины WordPress можно эмулировать с ядром Jekyll. Вот фотогалерея с использованием переднего плана и Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Нам просто нужно добавить наш собственный JavaScript и CSS, чтобы завершить его.

Плагины Jekyll могут эмулировать функциональность других плагинов WordPress. Имейте в виду, что плагины Jekyll работают только во время создания веб-сайта — они не добавляют функциональность в реальном времени:

  • Вместо One Click XML Sitemap используйте плагин Jekyll Sitemap Generator.
  • Jekyll SEO Tag дает вам некоторые функциональные возможности SEO Wizard.
  • Вместо WPGlobus для многоязычного веб-сайта используйте плагин Jekyll Language.

Контроль версий

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

На GitHub есть фантастическое интерактивное руководство для начинающих, изучающих Git.

Передача клиента

Это охватывает гайки и болты создания веб-сайта. Если вам интересно посмотреть, как весь веб-сайт Jekyll сочетается друг с другом, взгляните на шаблон Justice. Это бесплатный шаблон для Jekyll с лицензией MIT. Фрагменты выше основаны на этом шаблоне.

CMS WordPress встроена в платформу, поэтому нам нужно будет настроить учетную запись для клиента.

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

Некоторые графические интерфейсы Jekyll предлагают хостинг, в то время как у других есть способ вывода в корзину Amazon S3 или на страницы GitHub.

Резюме

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

Ваш первый веб-сайт Jekyll

Теперь твоя очередь. Доступно множество ресурсов, которые помогут вам создать свой первый веб-сайт на Jekyll:

  • Официальный веб-сайт Jekyll — отличное место, чтобы начать с подробной документации по всем функциям Jekyll.
  • На Jekyll.tips есть серия видеоуроков, посвященных основным темам Jekyll.
  • Взгляните на шаблоны Jekyll на GitHub, чтобы увидеть, как они составлены: Frisco для маркетинговых веб-сайтов, Scholar для документации и Urban для цифровых агентств.

Если вы выполняете миграцию, в Jekyll есть инструменты для импорта сообщений с веб-сайтов WordPress и WordPress.com. После импорта вам нужно будет вручную перенести или создать макеты, страницы, CSS, JavaScript и другие ресурсы для веб-сайта.

Подведение итогов

Красота Джекила в его простоте. Хотя WordPress может соответствовать многим функциям Jekyll, это часто достигается за счет сложности из-за дополнительных плагинов или инфраструктуры.

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