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

  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.

Давайте рассмотрим совершенно другой способ создания сайта с использованием 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 - это быстрый и эффективный способ создания сайтов. Я призываю вас попробовать и опубликовать свой опыт в комментариях.

Похожие

Лучшие SEO плагины для WordPress
... вое собственное веб-пространство (блог или сайт), используя WordPress. И на самом деле это лучшая платформа для этого типа услуг, потому что она может быть адаптирована с помощью ряда плагинов. На практике вы можете превратить свой блог или сайт в нечто большее. Но каковы лучшие плагины SEO? Вот небольшой список: WordPress SEO от Yoast
Почему море соленое?
Томми Кларк / Getty Images По оценкам, в океанах мира достаточно соли , чтобы покрыть все поверхности земли планеты слоем толщиной около 40 этажей. Но морская вода не всегда была такой соленой; когда океаны Земли впервые образовались около 3,8 миллиардов лет назад, когда поверхность планеты достаточно охладилась, чтобы позволить водяному пару сжижаться, океаны были в основном пресной водой. Так откуда взялась
Почему скорость страницы имеет значение для SEO вашего сайта
Важность скорости страницы для SEO Скорость страницы всегда была о пользовательском опыте. Медленная загрузка страниц препятствует способности сайта захватывать и удерживать посетителей на странице, но влияет ли это на рейтинг сайта? В течение многих лет
Excel: поиск цели
... поиск цели в Excel. Это включает объяснение этой особенности с несколькими практическими примерами. Что такое поиск цели? Goal Seek - это встроенная утилита Excel, которая решает уравнение и помогает вам ответить на вопрос «Каково будет входное значение для получения желаемого результата». Он просит нас ввести три параметра: Формула в клетке Целевое / желаемое значение Какую ячейку изменить Давайте
"Wix vs. WordPress" для SEO, блогов или электронной коммерции (6 факторов, 1 вердикт)
... контроль над HTML, CSS, атрибутами изображений, дизайном и структурой URL. Однако нас по-настоящему выигрывают варианты плагинов, позволяющие получить преимущество в SEO: Подобные инструменты действительно дают пользователям WordPress преимущество над владельцами веб-сайтов Wix. Не только SEO ресурсы для WordPress Обилие, но плагины и приложения приносят подход WYSIWYG к иным пугающим предметам.
Что такое WordPress Seo?
... вляется одним из наиболее широко используемых готовых шаблонов с Joomla. С десятками тысяч тем, написанных для WordPress, люди и компании могут даже создавать свои собственные веб-сайты. В частности, можно сказать, что наиболее предпочтительным решением для владельцев блогов в настоящее время является WordPress. http://istanbulseo.net/ такие компании, как этот тип веб-сайта для решения для слова под названием Seo SEO-решение, и в дополнение
17 предложений работы Seo - Marseille
Результаты 1-10 из 17 Показывать на странице и сортировать по Оксат - Марсель - 13 Миссии: Как
SEO SEO Контрольный список 2010
В 2009 году произошло много изменений в индустрии поисковых систем, и вы, вероятно, удивитесь, узнав, как эти изменения влияют на ваш бизнес. Обновление Vince уже так далеко и так 2009, но 2010 выглядит очень многообещающе и полно захватывающих инноваций, которые будут продолжать влиять на то, как люди ищут и находят. Так вот наш 2010 SEO Контрольный список для менеджеров по маркетингу: 1. Персонализированный
[Видео] SEO 101 для WordPress
... поисковым системам узнать, какие страницы нужно индексировать. Хотя это не является фактором ранжирования, он может помочь сайтам, у которых могут быть проблемы с сканированием. Если вы заинтересованы в автономном плагине, Подключаемый модуль Google XML Sitemaps будет достаточно. Если вы используете WordPress SEO, включите настройку в разделе SEO> XML Sitemaps. Noindex «Тонкий» контент
Как быстро загружается ваш сайт ? Если ответом является что-то иное, чем «мгновенно», вам нужно кое-ч...
Как быстро загружается ваш сайт ? Если ответом является что-то иное, чем «мгновенно», вам нужно кое-что настроить. Такие показатели, как скорость страницы и время до первого байта, являются одними из самых важных показателей, влияющих на производительность вашего сайта. Все, что требуется, - это небольшая задержка, чтобы посетитель отвернулся. Мобильные пользователи еще более привередливы: более 50% звонков прекращают свою работу после трех секунд ожидания. Если вам нужны
6 лучших бесплатных плагинов для перенаправления 404 для WordPress
... ваете много ошибок 404 страницы не найдены в WordPress? 404 ошибки не являются хорошими для SEO вашего сайта и пользовательского опыта. Хорошая часть заключается в том, что их довольно легко исправить с помощью плагинов для перенаправления WordPress 404. В этой статье мы покажем вам 6 лучших бесплатных 404 плагинов для перенаправления для WordPress.

Комментарии

Но когда все пользователи WordPress (включая ваших конкурентов) используют одни и те же плагины для генерации ваших данных, как вы себя отличаете?
Но когда все пользователи WordPress (включая ваших конкурентов) используют одни и те же плагины для генерации ваших данных, как вы себя отличаете? Самый простой способ - это использовать плагин, который сам по себе отличается от других и не делает того, что делают другие плагины. Это USP SEO Booster и вот почему вы должны использовать его на своем сайте WordPress. Для успеха любого веб-сайта ему нужна вся информация о том, как развивается
Это просто имеет смысл: если посетители не имеют хорошего опыта работы на вашем сайте, то почему Google должен предоставлять вам высокие позиции?
Это просто имеет смысл: если посетители не имеют хорошего опыта работы на вашем сайте, то почему Google должен предоставлять вам высокие позиции? Мы все любим быстро загружаемые сайты, поэтому убедитесь, что ваш сайт загружается быстро. В идеале ваш веб-сайт должен загружаться менее чем за 1 секунду, но все равно допустимо менее 2 секунд. Чем быстрее загружается сайт, тем выше будет коэффициент конверсии. Фактически, Amazon обнаружил, что их доход увеличивается на 1% на каждые
Почему важно оптимизировать ваш сайт WordPress?
Почему важно оптимизировать ваш сайт WordPress? По двум основным причинам: Оптимизировать WordPress для SEO Во-первых, SEO-позиционирование . Google учитывает скорость загрузки сайтов при их размещении. Кроме того, с каждым днем ​​все больше пользователей переходят с мобильных устройств , и вам приходится предлагать им контент, который загружается плавно и адаптируется с помощью технологии AMP
Представьте себя придирчивым, 1989, опыт работы с писательским мастерством, вы не всегда хотели, чтобы объявления были опытными копирайтерами, и насколько мне приятно писать?
Представьте себя придирчивым, 1989, опыт работы с писательским мастерством, вы не всегда хотели, чтобы объявления были опытными копирайтерами, и насколько мне приятно писать? Написание рабочих мест, публикуемых еженедельным стандартом веб-авторами, не было необходимости, 2010 год. Бизнес, статья - это наши авторы контента от Reed. Рассматривать много своих ремесел и представить статьи, которые Полная статья мы путешествуем, пишем статьи,
Вы испытываете много ошибок 404 страницы не найдены в WordPress?
Вы испытываете много ошибок 404 страницы не найдены в WordPress? 404 ошибки не являются хорошими для SEO вашего сайта и пользовательского опыта. Хорошая часть заключается в том, что их довольно легко исправить с помощью плагинов для перенаправления WordPress 404. В этой статье мы покажем вам 6 лучших бесплатных 404 плагинов для перенаправления для WordPress.
Исследование, проведенное в 2010 году Гомесом «Почему веб-производительность имеет значение: ваш сайт привлекает клиентов?
Исследование, проведенное в 2010 году Гомесом «Почему веб-производительность имеет значение: ваш сайт привлекает клиентов?», В котором было опрошено 1500 потребителей о том, как производительность веб-сайта влияет на их посещение магазина, показало следующее: Увеличение времени загрузки сайта с 2 до 10 секунд увеличило количество оставленных страниц на 38%. Во время пиковых периодов трафика более 75% потребителей ушли на сайт конкурента вместо того,
Почему он может деиндексировать ваш сайт WordPress?
Почему он может деиндексировать ваш сайт WordPress? Просто потому, что он позволяет общаться с роботами поисковых систем, предоставляя им разрешения для сканирования вашего сайта. Вы можете запретить им доступ к некоторым вашим страницам или папкам благодаря простой инструкции «запретить». С точки зрения естественных ссылок Например, мы советуем вам исключить страницы с вашего сайта без добавленной стоимости и не оптимизированы
Каким был ваш худший опыт работы с фрилансера?
Каким был ваш худший опыт работы с фрилансера? Мне очень повезло, потому что у меня не было слишком много забот. Я работаю время от времени с агентствами. Это действительно круто, потому что позволяет автоматически привлекать клиентов. Единственная проблема заключается в том, что человек, с которым вы общаетесь, часто исчезает на несколько дней, даже недель. Для меня это уже более 8 месяцев. Проект находился на рассмотрении со стороны агентства, клиент еще не рассчитался
И это имеет смысл - если посетители не чувствуют себя комфортно на вашем сайте, почему Google должен предоставить вам хорошую поисковую позицию?
И это имеет смысл - если посетители не чувствуют себя комфортно на вашем сайте, почему Google должен предоставить вам хорошую поисковую позицию? Нам всем нравятся быстро загружаемые страницы. Поэтому убедитесь, что ваш загружается достаточно быстро. В идеале они должны загружаться менее чем за 1 секунду, но все же должны быть приемлемыми менее чем за 2 секунды. Чем быстрее загружаются страницы, тем выше коэффициент конверсии. На самом деле. Например, Amazon обнаружил, что их
Какие плагины WordPress ваш сайт не может жить без?
Какие плагины WordPress ваш сайт не может жить без? Дайте нам знать. А пока вы можете проверить это WordPress форум чтобы помочь вам получить еще больше от WordPress. Yocale - это ведущее программное обеспечение для планирования бизнеса, основанного на назначении, которое стимулирует рост местного бизнеса. Мы также предлагаем множество других бизнес-инструментов, от маркетинга по электронной почте до управления отчетами и
Имеет ли значение, где находится содержимое страницы?
Имеет ли значение, где находится содержимое страницы? К счастью, Google и другие крупные поисковые системы со временем стали намного лучше анализировать структуру веб-сайтов, чтобы они могли отделить фиксированные элементы вашего шаблона дизайна (шаблоны) от уникального содержимого страницы. Поисковые системы также могут идентифицировать уникальный контент на странице, даже если на вашем веб-сайте используется несколько шаблонов дизайна. Например, интернет-магазин может

Почему Джекилл?
WordPress является очевидным выбором для такого веб-сайта, но является ли это единственным инструментом, который мы должны рассмотреть?
Почему Джекилл?
Но каковы лучшие плагины SEO?
Медленная загрузка страниц препятствует способности сайта захватывать и удерживать посетителей на странице, но влияет ли это на рейтинг сайта?
Что такое поиск цели?
Что такое WordPress Seo?
Как быстро загружается ваш сайт ?
Ваете много ошибок 404 страницы не найдены в WordPress?
Но когда все пользователи WordPress (включая ваших конкурентов) используют одни и те же плагины для генерации ваших данных, как вы себя отличаете?
Последние новости:
10 лучших игр и игрушек для детей 2-5 лет в самолете или поезде – чем занять ребенка в дороге?

Малыш уже достиг возраста 2 месяцев, а ведь так недавно он был совсем еще беспомощным. Теперь вы замечаете,

Еще совсем недавно появившись на свет, ребеночек трех месяцев стремительно растет и развивается. Родители

                                     В этот период развитию ребенка будет способствовать

Малыш 4-7 месяцев от роду обычно уже активно стремится сидеть, либо уже сидит. Пусть даже просто на коленях

Проводя раскопки в местах древнейших поселений людей, археологи часто находят детские игрушки: погремушки,

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

25 лучших развивающих игр для новорожденных – развивающие занятия с рождения до полугода Большое заблуждение

» Ребенку 6 месяцев Какие игрушки нужны детям в 6 месяцев Погремушки, мячики, резиновые

Дети в этом возрасте все активнее познают окружающий мир, все больше вещей они умеют делать самостоятельно