Вступление
Jekyll - это генератор статических сайтов, который предоставляет некоторые преимущества системы управления контентом (CMS), избегая при этом проблем с производительностью и безопасностью, создаваемых такими сайтами на основе баз данных. Он «осведомлен о блогах» со специальными функциями для работы с организованным по дате контентом, хотя его полезность не ограничивается блог-сайтами. Jekyll хорошо подходит для людей, которым необходимо работать в автономном режиме, которые предпочитают использовать облегченный редактор вместо веб-форм для обслуживания контента и которые хотят использовать контроль версий для отслеживания изменений на своем веб-сайте.
В этом руководстве мы сосредоточимся на том, как Jekyll обрабатывает URL-адреса и ссылки, так как изменение URL-адресов нарушит ссылки других людей на наши страницы, а также ссылки в содержании нашего собственного сайта. URL-адреса имеют решающее значение для того, как люди находят и используют веб-сайты, и заслуживают рассмотрения перед публикацией сайта в первый раз.
Мы рассмотрим, как Jekyll создает URL-адреса по умолчанию, и покажем, как изменить шаблон для отдельного файла или всего сайта. Тогда мы посмотрим, как сделать ссылку на страницы в нашем контенте. Наконец, мы подготовим сайт для тестирования.
Предпосылки
Чтобы следовать этому руководству, вам необходимо выполнить предыдущие руководства:
Когда вы закончите это, вы готовы начать.
Файловая структура статического сайта
ВPart 2 of this series мы создали каркас с помощью командыjekyll new и сосредоточились на том, как получившийся сайт выглядит в веб-браузере. Теперь давайте посмотрим на файловую структуру, которая была создана, когда Jekyll создал статический сайт.
[.note] #Note: Если вы следовали части 2 этой серии, у вас должен быть каталог дополнительных ресурсов и страница контактов. Если вы этого не сделали или если вы экспериментировали, добавляя больше страниц, ваша структура может выглядеть несколько иначе.
#
Каталог_site и все содержимое под ним, выделенное ниже, составляют статический сайт.
Содержание ~ / www после части 2
.
├── 404.html
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2017-09-04-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── postcard.jpg
├── contact.html
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2017
└── 09
└── 04
└── welcome-to-jekyll.htmlВ отличие от веб-сайтов, управляемых базой данных, URL-адреса статического веб-сайта являются буквальными представлениями структуры каталогов на диске. Джекилл преобразовал категории сообщения в каталоги и включил дату в структуру файлов, шаблон, который является общим для многих блогов, так что шаблон окончательного URL для этого сообщения равен/category1/category2/YYYY/MM/DD/words-in-title.html, поэтому буквальный URL-адрес -http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.htmlс.
Скаффолдинг не предоставляет динамических индексных страниц для этих каталогов, поэтому одна из двух вещей произойдет, если пользователь удалит часть URL, чтобы попытаться найти все сообщения из определенной категории, года, месяца или дня. Если веб-сервер разрешает автоматическую индексацию каталогов, они увидят информацию о файлах и каталогах:
Во втором случае, если администратор рабочего сайта отключил списки каталогов на сервере, пользователю будет отказано в доступе:
Структура, основанная на категориях и дате, является общим шаблоном для URL-адресов блогов, но то, как вы решите структурировать свои URL-адреса, будет зависеть от потребностей вашего конкретного сайта.
Если вы хотите изменить значение по умолчанию, Jekyll упрощает создание URL-адресов. Полезно подумать об этом перед первой публикацией сайта, поскольку изменения в шаблонах URL-адресов влияют на то, насколько эффективно люди могут находить контент с помощью поисковых систем, и влияют на ссылки, которые другие делают на сайт.
Понимание того, как контролируются URL
Система Jekyll для создания URL-адресов является гибкой и мощной. Они могут зависеть от того, где и как вы называете и храните исходные файлы, а также динамически переопределяются с определенным значением или более общим шаблоном.
Страница по умолчанию
Когда мы создаем страницу в корне нашего сайта, как мы это делали для нашей контактной страницы, имя файлаcontact.md преобразуется вcontact.html, и результирующий URL-адрес тоже находится прямо в корне документа: http://203.0.113.0:4000/contact.html. Если мы разместим его в одном или нескольких подкаталогах, они тоже станут частью URL. Например, если мы поместим страницуcontact.md в каталог с именемmain, URL-адрес станетhttp://203.0.113.0:4000/main/contact.html.
Post Defaults
Сообщения работают не так, как страницы. Во-первых, им разрешено иметь категории, и эти категории становятся каталогами на статическом сайте, а также частью URL. Шаблон поста по умолчанию является объединением его Front Matter:
title: "Welcome to Jekyll!"
date: 2017-09-04 03:36:31 +0000
categories: jekyll updateВ каталоге_site подкаталог будетjekyll/update/2017/09/04/welcome-to-jekyll.html, следуя шаблону/:categories/:year/:month/:day/:title, что приведет к URLhttp://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html.
Если мы удалим категорию из Front Matter, структура каталогов изменится при следующем создании сайта и больше не будет частью URL.
Параметры страницы и значения по умолчанию могут быть изменены двумя способами.
Permalinks
Определение постоянной ссылки в заголовке отдельной страницы переопределит значение по умолчанию как для страниц, так и для сообщений, что позволяет нам точно указать, какой должна быть ссылка для каждого файла. Это было установлено в содержимом по умолчанию на странице О программе, где значение постоянной ссылки/about/ привело к URL-адресуhttp://203.0.113.0:4000/about/, который, в свою очередь, существует на диске какabout/index.html
Permalink Patterns
Jekyll позволяет вам переопределить весь шаблон по умолчанию в_config.yml. Это повлияет как на страницы, так и на сообщения с одним важным отличием: сообщения имеют доступ к категориям и элементам даты и времени из Front Matter, а страниц - нет. URL страницы будут следовать шаблону, изящно опуская любые постспецифичные элементы.
Чтобы увидеть переопределение шаблона постоянной ссылки в действии, мы создадим шаблон, который сохраняет категории для сообщений, пропускает элементы даты и заканчивается заголовком сообщения или страницы:
nano ~/www/_config.ymlДобавьте следующее значение в конец файла:
~/www/_config.yml
. . .
permalink: /:categories/:title/Чтобы увидеть изменения при редактировании файла конфигурации, нам нужно остановить веб-сервер с помощьюCTRL-C, а затем перезапустить его:
jekyll serve --host=203.0.113.0На диске структура файла изменилась:
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── css
│ └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│ ├── 2017-09-04-welcome-to-jekyll.markdown
│ └── 2017-09-04-link-test.md
└── _site
├── about
│ └── index.html
├── assets
│ └── postcard.jpg
├── contact # originally `contact.html`
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── Gemfile
├── Gemfile.lock
└── index.html
└── jekyll
└── update
└── welcome-to-jekyll
└── index.htmlЭти изменения в файловой структуре преобразуются в изменения URL-адресов. Страница "О программе" по-прежнему находится на/about/, потому что ее постоянная ссылка была установлена на отдельный файл с самого начала. Страница контактов была изменена с/contact.html на/contact/, а сообщение Link Test теперь находится на/jekyll/update/welcome-to-jekyll/ из-за изменения шаблона постоянной ссылки на всем сайте. Вы можете узнать больше о том, какие токены доступны для построения URL-адресов, в документацииJekyll Permalinks.
Создание надежных ссылок на сообщения
Теперь, когда мы знаем, как управлять адресом, на котором расположена страница, есть несколько вещей, которые следует учитывать при связывании с этими адресами.
Если бы мы делали ссылки в теле страницы для полностью статического сайта, мы использовали бы URL-адрес страницы, на которую мы хотели бы ссылаться, в одном из нескольких форматов.
-
An absolute link:
[Link Text]([http://203.0.113.0:4000/post-name)Это правильный формат для внешней ссылки, но он не подходит для нашего сайта, так как сохранение номера порта в базовом URL-адресе нарушит наши ссылки в производстве, а пропуск этого приведет к нарушению их на нашем сайт разработки. -
A root-relative link:
[Link Text(/[post-name)Корневые ссылки работают только для локальных ссылок, и они следуют структуре каталогов на сервере, начиная с корневого веб-сайта из-за начального слэша/. -
A relative link:
[Link Text](post-name)Относительная ссылка также предназначена для локальных ссылок и начинается по пути из того же каталога, что и страница, содержащая ссылку.
Обе относительные ссылки имеют похожую проблему. Если мы изменим наш формат ссылок, нам нужно будет найти все ссылки на старый URL в нашем контенте и обновить их. Жидкие шаблоны Jekyll обеспечивают возможность более гибкой ссылки на сообщения. Вместо использования буквальной ссылки вы можете использовать переменнуюpost_url с именем файла, чтобы вместо такой ссылки:
[Link Text](/jekyll/update/2016/09/08/welcome-to-jekyll.html)мы бы связали это так:
[Link Text]({% post_url 2010-09-08-welcome-to-jekyll %})Нам нужно только указать имя файла, и нет необходимости включать каталог_posts или расширение файла. Ссылка на сообщение, созданное таким образом, будет продолжать работать с любыми настройками постоянной ссылки, которые вы настраиваете.
[.note] #Note: Прямо сейчас эта возможность динамического связывания доступна для сообщений, но не для страниц, хотя планы для страниц находятся в разработке.
#
Создать новую запись
Мы создадим новый пост, чтобы применить то, что мы узнали о создании ссылок. Откройте новый файл в вашем редакторе, установив дату в имени файла при необходимости .:
nano ~/www/_posts/2017-09-04-link-test.mdМы настроим Front Matter так же, как в примере поста, убедившись, что дата здесь соответствует имени файла на предыдущем шаге. Обязательно замените IP-адрес или доменное имя сайтаyour и дату в имени файла Link Test.
---
layout: post
date: 2017-09-04 07:00
title: Link Test
---
Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)
* [A Jekyll post_url link]({% post_url 2017-09-04-link-test %})Сохранить и выйти. При повторном посещении домашней страницы новое сообщение должно появиться автоматически:
Перейдите по ссылке на домашнюю страницу к новому сообщению и опробуйте каждый. Все три должны работать на нашем сайте разработчиков:
Абсолютная ссылка будет работать на нашем сайте разработки, но она будет нарушена, когда мы развернем сайт с другим URL-адресом или без номера порта. Относительная корневая ссылка будет работать в новом месте, пока схема постоянных ссылок остается прежней. Однако, если будет сделано изменение, эта ссылка не будет обновлена, и она не будет работать ни на одном из сайтов. Ссылка Jekyllpost_url создаст ссылку относительно корня, когда сайт будет проанализирован. Мало того, что это будет работать где угодно, но Jekyll также будет гарантировать, что пост, на который вы ссылаетесь, действительно существует, когда он анализирует сайт. Если публикация этого не делает, она выдаст «Исключение ликвидности», сообщающее вам, какой файл содержал плохую ссылку, а какая была проблемой. Например, если мы ошибочно ввели неверное имя файла в третьей ссылке:
Liquid Exception: Could not find post
"broken-name-welcome-to-jekyll" in tag 'post_url'.
Make sure the post exists and the name is correct.
in /home/sammy/www/_posts/2017-09-04-link-test.md
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------Это последнее изменение содержания сайта. На следующем шаге мы скопируем наш сайт в новое место, чтобы мы могли проверить нашу работу.
Тестирование ссылок на промежуточном сайте
СтраницаDeployment methods Jekyll охватывает различные способы перемещения вашего контента в место его производства в зависимости от ваших потребностей. Это включает в себя все, от FTP до сложных автоматизированных методов. На данный момент мы собираемся настроить промежуточный сайт на той же машине, чтобы проиллюстрировать, как ведут себя ссылки.
Создать тестовый сайт
Мы установим Nginx, чтобы мы могли проверить, как работает наше связывание, прежде чем развернуть его в рабочей среде:
sudo apt-get install nginxКогда установка будет завершена, мы разрешим HTTP-трафик.
sudo ufw allow httpКогда мы посещаем адрес машины для разработки, мы должны увидеть:
Поскольку у нас одна файловая система, мы переместим сайт с помощью базовой командыrsync.
Чтобы получить содержимое_site в корне документа Nginx, расположенном в/var/www/html, мы будем использовать следующую команду с-a для рекурсивной синхронизации и сохранения большей части всего и необязательного-v для подробного вывода:
sudo rsync -av ~/www/_site/ /var/www/html/После завершения rsync мы можем посетить наш сайт, обслуживаемый Nginx, без номера портаhttp://203.0.113.0 и убедиться, что вы вышли из своего веб-сервера разработки перед тестированием.
Тестирование сайта
Тестирование после развертывания в новом месте помогает нам убедиться, что наши читатели имеют опыт, который мы намереваемся. Автоматическая проверка ссылок может помочь сделать это легкой и рутинной частью процесса, но сейчас мы рассмотрим его вручную.
Новое сообщение в блоге появляется на главной странице автоматически, с самыми последними в верхней части.
Когда мы посетим пост «Проверка связи», мы увидим, что как абсолютная ссылка, так и ссылка, относящаяся к корню, не работают, потому что среда, в которой мы развернули, не использует порт 4000, в то время как ссылка Jekyll post_url работает в обоих местах.
Мы закончили тестирование, поэтому отключимnginx и закроем порт 80, так как мы не собираемся обслуживать сайт:
sudo systemctl stop nginx
sudo ufw delete allow httpМы закончили изучение ссылок и URL-адресов, поэтому выходим с сервера разработки с помощьюCTRL+C.
Если мы объединим тщательно выбранные стабильные названия страниц со ссылками на сообщения с помощью тегаpost_url, нам не о чем будет особо беспокоиться при создании ссылок на наши собственные страницы. Тестирование в новом месте перед развертыванием в рабочей среде все еще полезно для поиска собственных ошибок и, тем более, для поиска неработающих ссылок на внешние сайты.
Заключение
В этой серии мы установили и настроили сайт разработки. В этом руководстве мы рассмотрели, как управлять веб-адресами страниц и сообщений на нашем сайте, переопределять шаблоны по умолчанию, создавать надежные ссылки на сообщения в нашем контенте и развертывать сайт для тестирования. Возможно, вам будет интересно узнать о настройкеtemplates иtheme вашего сайта или о том, как настроитьdeploy your site to its production location.