Как с WordPress перейти на генератор статических сайтов Eleventy

[Mr. Style]

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

В случае с WordPress, для рендеринга веб-страницы необходим серверный PHP и база данных MySQL для метаданных и контента.

Вместо динамической сборки веб-страниц, генераторы статических сайтов принимают контент в форме Markdown, объединяют его с шаблонами и создают статические веб-страницы. Предварительно сгенерированный контент мгновенно передается по запросу. Базы данных отсутствуют. Никаких сторонних плагинов. Только чистый HTML, CSS, JavaScript и изображения. Такой упрощенный технологический стек уменьшает вероятность атаки хакеров. Серверная инфраструктура небольшая, поэтому сайт более безопасен.

Если вы какое-то время работали в этой отрасли, то, возможно, помните программу Dreamweaver. Мне понравилась концепция элементов библиотеки и шаблонов. В случае Eleventy, концепции шаблонов, фильтров и плагинов являются близкими аналогами.

Как я выбрал Eleventy в качестве генератора статических сайтов

Если поискать популярные генераторы статических сайтов, то можно найти много отличных вариантов. Мне больше понравились Eleventy, Gatsby, Hugo и Jekyll. Но какой из них выбрать? Я создал опрос в Twitter среди своих друзей. Eleventy был явным лидером в моем опросе. С тех пор я преобразовал четыре сайта WordPress в Eleventy, используя GitHub для хранения кода и Netlify для безопасного обслуживания файлов.

Начало работы: загрузка исходного сайта

Eleventy имеет отличную коллекцию шаблонов. Мы будем использовать шаблон netlify-boilerplate. Чтобы начать, нажмите «Развернуть в netlify». Вам будет предложено подключить Netlify к GitHub, а также дать название своему репозиторию (я называю свой smashing-eleventy-dawson), а затем «Сохранить и развернуть».

После этого произойдет следующее:

1. Шаблонный проект будет добавлен в вашу учетную запись GitHub.
2. Netlify присвоит проекту динамическое имя и развернет его.
3. Netlify настроит проект с использованием Identity (если вы захотите использовать функции CMS) и Forms (простая форма контактов).

Как видно из снимка экрана, вы можете привязать домен к проекту, а также защитить сайт с помощью HTTPS. Последняя особенность была для меня действительно убедительным аргументом, так как мой хост взимал непомерную плату за SSL. На Netlify это бесплатно.

Я нажал «Параметры сайта», затем «Изменить имя сайта», чтобы создать для него более подходящее имя. Как бы мне ни нравился jovial-goldberg-e9f7e9, но лучше подойдет elizabeth-dawson-piano. Когда я захожу на сайт elizabeth-dawson-piano.netlify.app, я вижу шаблонный контент.



Теперь сайт создан и готов к настройке. Загрузим новый репозиторий на наш локальный компьютер, чтобы можно было приступить к настройке сайта. Мой GitHub-репозиторий для этого проекта имеет команду git clone, которую я могу использовать в Visual Studio Code для копирования файлов:

<a href="https://github.com/scottpdawson/smashing-eleventy-dawson.git">Clone git ></a>

Затем мы следуем оставшимся инструкциям в <a href="https://github.com/danurbanowicz/eleventy-netlify-boilerplate"> файле README шаблона, </a> чтобы отредактировать файл _data/metadata.json в соответствии с проектом и запустить проект локально.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

С помощью последней команды, Eleventy запускает локальный сайт на localhost:8080 и начинает отслеживать изменения.

Экспорт текстов, страниц и изображений WordPress

Сайт, с которого мы експортируем, является существующим сайтом WordPress по адресу elizabethrdawson.wordpress.com



Содержимое экспортируется в виде zip-файла с XML-фрагментом сайта. Сайт, который я выбрал в качестве примера, представляет собой простой трехстраничный сайт, размещенный на Wordpress.com. Если вы используете собственный хостинг, то для извлечения XML перейдите в «Инструменты>Экспорт». Но в зависимости от вашего хоста, для загрузки изображений может потребоваться использование FTP.

Если вы откроете XML-файл в своем редакторе, от него будет мало пользы. Нам нужен способ загружать отдельные посты с помощью Markdown, это облегченный язык разметки данных, который мы будем использовать в Eleventy. Скопируйте этот репозиторий на свой компьютер и поместите XML-файл в тот же каталог. Ваш список каталогов должен выглядеть примерно так:



Наш образец сайта состоит из трех страниц, поэтому нам нужно внести небольшую корректировку. В строке 39 parser.js замените «post» на «page».



Убедитесь, что вы выполнили «установку npm» в каталоге wordpress-export-to-markdown, затем введите «node index.js» и следуйте инструкциям.

Я создал три файла: welcome.md, about.md и contact.md. В каждом есть небольшой текст, который описывает заголовок и дату страницы, а также разметку содержимого, извлеченного из XML.

eleventyNavigation:
  key: Home
  order: 0

Используя этот синтаксис, вы можете автоматически добавлять страницы в навигацию сайта. На нашем образце сайта пока не будет блога, поэтому я удаляю файлы .md из каталога «posts». Теперь мой сайт в предварительном просмотре выглядит так.



Добавление изображений

Мы будем использовать изображения с исходного сайта. В файле .eleventy.js вы увидите, что ресурсы статического изображения должны находиться в папке static/img. На каждой странице будет изображение главного героя. В начале каждой страницы я добавлю ссылку на его изображение:

hero: `/static/img/performance.jpg`

Eleventy хранит макеты страниц в папке _includes/layouts. Base.njk используется всеми типами страниц, поэтому мы добавим этот код прямо под навигацией, так как именно там нам нужно расположить изображение нашего главного героя.

{% if (hero) %}
<img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" />
{% endif %}

Я также добавил тег изображения для фото Элизабет на странице «О нас».

Сейчас самое время сохранить и посмотреть, что именно изменилось.

Встраивание плеера YouTube с помощью плагина

На главной странице есть несколько видеороликов YouTube. Воспользуемся плагином для автоматического создания встроенного кода Youtube. Eleventy-plugin-youtube-embed – это отличный вариант. Инструкции по установке довольно ясны: установите пакет с помощью npm, а затем добавьте его в файл .eleventy.js. Данные URL-адреса YouTube, Без каких-либо дальнейших изменений, преобразуются во встроенные плееры.

Использование коллекций и фильтров

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

• Создайте новый файл events.md в каталоге ваших страниц.
• Добавьте несколько событий в вашу директорию контента. Я добавил файлы .md для праздничного концерта, весеннего концерта и осеннего концерта.
• Добавьте описание коллекции в .eleventy.js.

eleventyConfig.addCollection("events", (collection) =>
    collection.getFilteredByGlob("posts/*.md").filter( post => {
        return ( item.data.location ? post : false );
    })
);

• Добавьте ссылку на коллекцию в файл events.md, описывая каждое событие как запись в таблице.

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Location</th>
        </tr>    
    </thead>
    <tbody>
        {%- for post in collections.events -%}
        <tr>
            <td>{{ post.date }}</td>
            <td><a href="{{ post.url }}">{{ post.data.title }}</a></td>
            <td>{{ post.data.location }}</td>
        </tr>    
        {%- endfor -%}
    </tbody>
</table>

Однако наше форматирование даты выглядит довольно плохо.



К счастью, в стандартном файле .eleventy.js уже есть фильтр с названием readableDate. Фильтры контента в файлах и шаблонах Markdown использовать легко:

{{ post.date | readableDate }}

Полировка дизайна сайта с помощью CSS

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



Публикация сайта

Уже все опубликовано! В процессе нашей работы все обновления GitHub автоматически распространяются на Netlify и перестраиваются в новый HTML. Когда вы закончите и будете думать о регистрации персонального домена, Netlify позволит использовать существующий домен бесплатно.

Дополнительно

Это был простой сайт, на котором было всего несколько изображений. Однако у вас может быть более сложный сайт. Сервис Netlify Large Media позволяет загружать изображения с большим разрешением на GitHub и сохраняет ссылки на изображения в Large Media. Таким образом, ваш репозиторий GitHub не будет забит данными изображений.

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

• Final Converted Website (Результат)
• GitHub Repository