1. Об авторе Майк Неумеген имеет опыт работы в области компьютерных наук, окончил Университет Отаго...
2. Почему Джекилл?
3. Реализация
4. Установка
5. Бег
6. страницы
7. жидкость
8. Включает в себя
9. Макеты
10. Front Matter
11. Сообщений
12. Коллекции
13. Поиск
14. Плагины
15. Контроль версий
16. Клиентская передача
17. Резюме
18. Сообщений
19. Коллекции
20. Поиск
21. Плагины
22. Контроль версий
23. Клиентская передача
24. Резюме
25. Ваш первый веб-сайт Jekyll
26. Завершение

Об авторе

Майк Неумеген имеет опыт работы в области компьютерных наук, окончил Университет Отаго в Новой Зеландии. Он является соучредителем CloudCannon Облачная CMS для… Подробнее о Майке ...

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

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

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

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

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

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

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

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

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

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

Реализация

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

Установка

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

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

драгоценный камень установить Джекилл

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

xcode-select --install

Бег

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

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

Джекилл служить

Это запускает локальный веб-сервер через порт 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="/"> Правосудие </a> </ h1> <nav> <ul> <li> <a href="/about/"> О </a> </ li> <li> <a href="/services/"> Услуги </a> </ li> <li> <a href="/contact/"> Связаться </a> </ li> <li> <a href = "/ advice / "> Advice </a> </ li> </ ul> </ nav> </ div> <section class =" main "> <div class =" container "> <p> Правосудие - это профессиональное представительство. Занимаясь более 50 лет, наша команда обладает знаниями и навыками для достижения ваших результатов. </ P> <blockquote class = "testimonial"> <p class = "testimonial-message"> Закон о правосудии - лучший из лучших. Будучи местными, они заботятся о людях и имеют тесные связи с сообществом. </ P> <p class = "testimonial-author"> <img src = "/ images / peter.jpeg" alt = "Фотография Питера Роттенбурга"> Питер Роттенбург </ p> </ blockquote> </ div> </ section> <footer> <p class = "copyright"> & copy; 2016 </ p> </ footer> </ body> </ html>

жидкость

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

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

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

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

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

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

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

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

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

У Джекила точно такая же особенность. Включения хранятся в папке с именем _include. Мы используем Liquid, чтобы включить их в index.html:

{% include header.html%} <p> Правосудие - это профессиональное представительство. Занимаясь более 50 лет, наша команда обладает знаниями и навыками для достижения ваших результатов. </ P> <blockquote class = "testimonial"> <p class = "testimonial-message"> Закон о правосудии - лучший из лучших. Будучи местными, они заботятся о людях и имеют тесные связи с сообществом. </ P> <p class = "testimonial-author"> <img src = "/ images / peter.jpeg" alt = "Фотография Питера Роттенбурга"> Питер Роттенбург </ 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 = «контейнер»> <h1> <a href="/"> юстиции </a> </ h1> <nav> <ul> <li> <a href="/about/"> о </a> </ li> <li> <a href="/services/"> Услуги </a> </ li> <li> <a href="/contact/"> контакт </a> </ li> <li> < a href = "/ advice /"> Советы </a> </ li> </ ul> </ nav> </ div> <section class = "main"> <div class = "container"> {{content} } </ div> </ section> <footer> <p class = "copyright"> & copy; {{site.time | дата: "% Y-% m-% d"}} </ p> </ footer> </ body> </ html>

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

--- layout: default --- <blockquote class = "testimonial"> <p class = "testimonial-message"> Правосудие - лучшие из лучших. Будучи местными, они заботятся о людях и имеют тесные связи с сообществом. </ P> <p class = "testimonial-author"> <img src = "/ images / peter.jpeg" alt = "Фотография Питера Роттенбурга"> Питер Роттенбург </ p> </ blockquote>

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

Front Matter

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

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

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

--- layout: отзывы по умолчанию: - message: Мы используем Закон о правосудии во всех наших начинаниях. Они предлагают беспрецедентный сервис, когда дело доходит до ведения бизнеса. image: "/images/joice.jpeg" name: Joice Carmold - сообщение: Закон о правосудии - лучшие из лучших. Будучи местными, они заботятся о людях и имеют тесные связи с сообществом. image: "/images/peter.jpeg" name: Peter Rottenburg - сообщение: Закон о правосудии - это все, на что мы могли надеяться при покупке нашего первого дома. Настоятельно рекомендуется всем. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <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> {% endfor%} </ div>

Сообщений

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

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

--- макет: пост категории: - Недвижимость ---! [Дом] (/ images / house.jpeg)

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

Ниже основной темы - тело поста, написанное на уценка , Markdown - более простая альтернатива HTML.

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

--- макет: по умолчанию --- <h3> {{page.title}} </ h3> <p> {{page.date | дата: '% B% d,% Y'}} </ p> {{content}}

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

--- макет: по умолчанию --- <ul> {% для поста в site.posts%} <li> <a href=" каререва посту post.url} enj"> {{post.title}} </a> </ li> {% endfor%} </ ul>

Коллекции

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

Джекил имеет эту функцию и называет ее коллекции ,

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

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

коллекции: staff_members: вывод: false

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

Мы добавляем метаданные во фронт и материю в теле:

--- имя: Джейн Доу image: "/images/jane.jpeg" телефон: "1234567" --- Джейн имеет 19-летний опыт работы в области права и специализируется на собственности и бизнесе.

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

--- макет: по умолчанию --- <ul> {% для участника сайта site.staff_members%} <li> <div> <img src = "{{member.image}}" alt = "Фотография сотрудника для {{member .name}} "> </ div> <p> {{member.name}} - {{member.phone}} </ p> <p> {{member.content | markdownify}} </ p> </ li> {% endfor%} </ ul>

Поиск

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

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

Плагины

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

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

• iThemes Security
  Наш веб-сайт Jekyll так же безопасен, как и веб-сервер, на котором он работает.
• Резервная охрана
  Наш веб-сайт Jekyll будет находиться в хранилище, которое дает нам доступ ко всей истории изменений.
• WP Super Cache
  Наш веб-сайт Jekyll уже статичен.

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

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

--- макет: изображения по умолчанию: - путь к изображениям: /images/bill.jpg title: Билл - путь к изображениям: /images/burt.jpg title: Burt - путь к изображениям: /images/gary.jpg title: Gary - путь к изображениям: / images / tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class = "photo-gallery"> {% для изображения в page.images%} <li> <img src = "{ {image.image_path}} "alt =" {{image.title}} "/> </ li> {% endfor%} </ ul>

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

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

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

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

GitHub имеет фантастический интерактивный учебник для начинающих учиться Git.

Клиентская передача

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

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

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

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

Резюме

На данный момент наш веб-сайт 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> { % endfor%} </ div>

Сообщений

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

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

--- макет: пост категории: - Недвижимость ---! [Дом] (/ images / house.jpeg)

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

Ниже основной темы - тело поста, написанное на уценка , Markdown - более простая альтернатива HTML.

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

--- макет: по умолчанию --- <h3> {{page.title}} </ h3> <p> {{page.date | дата: '% B% d,% Y'}} </ p> {{content}}

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

--- макет: по умолчанию --- <ul> {% для поста в site.posts%} <li> <a href=" каререва посту post.url} enj"> {{post.title}} </a> </ li> {% endfor%} </ ul>

Коллекции

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

Джекил имеет эту функцию и называет ее коллекции ,

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

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

коллекции: staff_members: вывод: false

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

Мы добавляем метаданные во фронт и материю в теле:

--- имя: Джейн Доу image: "/images/jane.jpeg" телефон: "1234567" --- Джейн имеет 19-летний опыт работы в области права и специализируется на собственности и бизнесе.

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

--- макет: по умолчанию --- <ul> {% для участника сайта site.staff_members%} <li> <div> <img src = "{{member.image}}" alt = "Фотография сотрудника для {{member .name}} "> </ div> <p> {{member.name}} - {{member.phone}} </ p> <p> {{member.content | markdownify}} </ p> </ li> {% endfor%} </ ul>

Поиск

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

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

Плагины

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

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

• iThemes Security
  Наш веб-сайт Jekyll так же безопасен, как и веб-сервер, на котором он работает.
• Резервная охрана
  Наш веб-сайт Jekyll будет находиться в хранилище, которое дает нам доступ ко всей истории изменений.
• WP Super Cache
  Наш веб-сайт Jekyll уже статичен.

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

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

--- макет: изображения по умолчанию: - путь к изображениям: /images/bill.jpg title: Билл - путь к изображениям: /images/burt.jpg title: Burt - путь к изображениям: /images/gary.jpg title: Gary - путь к изображениям: / images / tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class = "photo-gallery"> {% для изображения в page.images%} <li> <img src = "{ {image.image_path}} "alt =" {{image.title}} "/> </ li> {% endfor%} </ ul>

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

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

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

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

GitHub имеет фантастический интерактивный учебник для начинающих учиться Git.

Клиентская передача

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

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

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

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

Резюме

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

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

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

• официальный сайт Jekyll это отличное место, чтобы начать с подробной документации по всем функциям Jekyll.
• Jekyll.tips имеет серию видеоуроков, охватывающих основные темы Jekyll.
• Посмотрите на шаблоны Jekyll на GitHub, чтобы увидеть, как они соединяются: Сан-Франциско для маркетинговых сайтов, филолог для документации и городской для цифровых агентств.

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

Завершение

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

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

Похожие

Комментарии