Постоянные посетители наверняка заметили, что на прошлой неделе этот блог получил новый слой краски. Этот новый макет – не просто новая тема WordPress. Кое-что изменилось и в бэкэнде. Раньше мой блог работал на WordPress. Я перенес его в специально созданное приложение Laravel. Это приложение с открытым исходным кодом. Вы можете найти фактический код, который развертывается на сервере, в этом репозитории на GitHub .
В этом сообщении в блоге я хотел бы объяснить, почему и как я сделал эту миграцию.
Любить и бросать WordPress
Когда я начал вести блог, почти три года назад , я просто хотел иметь простой способ делиться интересными ссылками на блоги других людей. WordPress идеально подходил для этого. Он легко устанавливается. Он поставляется с отличными функциями из коробки, такими как отличный интерфейс администратора, RSS-каналы, хороший поиск, … Существуют также отличные плагины для добавления таких вещей, как отслеживание аналитики, кэширование страниц, seo-оптимизация, … Поскольку в моей компании я не занимался стилизацией, я никогда не утруждал себя изучением css, так что было также весьма удобно, что в WordPress доступны тысячи тем.
В течение первого года на этой земле жизнь была хорошей. Вот как выглядел блог тогда:
Тем временем я начал работать в пространстве с открытым исходным кодом и вместе с моей командой создал несколько пакетов . Вместо того, чтобы просто делиться ссылками в своем блоге на контент других людей, я начал писать вводные посты к этим пакетам. Поскольку блог начал привлекать больше посетителей, я решил приложить немного усилий, чтобы блог выглядел лучше. Я сделал это, просто установив новую тему (которая была немного изменена моим коллегой Виллемом ).
Я хотел немного больше настроить размещение всего контента, но, как разработчик, не являющийся разработчиком WordPress, работа с кодовой базой WordPress может быть довольно сложной. Я привык работать с современным PHP-кодом. Я сделал несколько грязных взломов в некоторых файлах php. Это было не совсем приятно, но сработало. Как пользователь я люблю WordPress, но как разработчик я его немного ненавижу.
На какое-то время я снова был доволен внешним видом блога. Вот скриншот, как это выглядело примерно с октября 2016 года до нескольких дней назад.
Летом этого года Адам Ватан объявил , что вместе с некоторыми друзьями он работает над новым фреймворком css с открытым исходным кодом под названием Попутный ветер . Как уже упоминалось выше, я никогда не тратил время на изучение css и я считал это своей ахиллесовой пятой. Попутный ветер мог бы стать для меня интересной точкой входа в мир css. У меня всегда больше мотивации чему-то учиться, если я могу использовать новые знания в конкретном проекте. Вот почему Я решил перестроить свой блог с помощью Tailwind, Laravel и пары наших собственных пакетов.
Без каких-либо предварительных знаний css я работал через отличные документы о попутном ветре . Я читал это сообщение в блоге Адама и соавтора Tailwind Стива Шогера. Это видео о восстановлении Laravel.io тоже был очень полезен. Я немного поэкспериментировал с попутным ветром. У меня не было конкретного дизайна в голове, когда я начинал с проекта. Окончательный дизайн, который вы видите сейчас, является случайным результатом моего обучения.
За кулисами
Как упоминалось выше, мой блог теперь является приложением Laravel. Вы можете просмотреть весь исходный код в это репо на GitHub . Давайте выделим несколько интересных моментов.
Поиск записей в блоге
Поиск записей в блоге осуществляется с помощью Algolia , невероятно быстрого поискового сервиса. Все записи в блоге переносятся из базы данных в Algolia с помощью Laravel Scout . С установленным Scout вы получаете команду Artisan для выполнения первоначального переноса таблицы базы данных в Algolia. Scout также предоставляет Доступный для поиска признак, который, применяемый к модели , гарантирует, что новые записи и обновления существующих также будут отправлены в индекс Algolia.
Теперь, когда вы знаете, как сообщения передаются в индекс, давайте посмотрим, как эти сообщения извлекаются. Если вы попробуете поискать записи в блоге, вы, надеюсь, заметите, что результаты появляются почти мгновенно. Поисковые запросы не попадают на мой собственный сервер. Вся эта поисковая операция происходит на стороне клиента. Этот компонент Vue отвечает за отображение поля поиска и результатов. Он использует JavaScript API Algolia для выполнения поисковых запросов.
Я должен упомянуть, что Algolia не является бесплатным сервисом, но, если вы действительно не ожидаете большого количества поисковых запросов, их бесплатного уровня достаточно для использования в личном блоге.
Импорт сообщений WordPress
Конечно, я не хотел терять весь старый контент, поэтому мне пришлось придумать способ переноса сообщений WordPress в мое новое приложение Laravel. К счастью, это не так уж сложно. Вот команда artisan , которая импортирует сообщения и теги из базы данных WordPress. Для обработки тегов я использовал наш домашний пакет laravel-тегов . Этот пакет позволяет легко связывать теги с красноречивой моделью .
Обработка измененных URL-адресов
При использовании WordPress в URL-адресе используется год публикации и месяц публикации, например: https://freek.dev/2017/06/building-realtime-dashboard-powered-laravel-vue-2017-edition/ . Для моего нового блога я хотел избавиться от этого временного компонента и использовать более короткие ссылки, такие как https://freek.dev/building-realtime-dashboard-powered-laravel-vue-2017-edition . Старые URL-адреса WP находятся в индексе Google. Если оставить это без внимания, все посетители, заходящие в мой блог с помощью поиска Google, увидят страницу 404.
Наш пакет laravel-missing-page-redirector был создан для решения этой проблемы. Команда импорта также заполняет таблицу перенаправления . Пакет перенаправителя поддерживает создание собственного перенаправителя для указания источника перенаправлений (например, таблицы базы данных). Вот перенаправитель , который считывает таблицу перенаправляет .
При всем этом все старые URL-адреса моего блога перенаправляются на новые страницы. Попробуйте это, посетив https://freek.dev/2017/06/building-realtime-dashboard-powered-laravel-vue-2017-edition
Предоставление RSS-канала
Я стараюсь быть в курсе того, что происходит в моем секторе, читая множество блогов. Посещение каждого блога в отдельности заняло бы много времени, поэтому я предпочитаю подписываться на RSS-каналы и читать весь контент в моем любимом RSS-ридере .
Конечно, переработанный murze.be должен быть RSS-канал. WordPress поставляется с поддержкой RSS-каналов из коробки. В Laravel land вы можете использовать другой доморощенный пакет: laravel-feed . Этот пакет позволяет очень легко добавлять канал или несколько каналов в свой блог. Вот функция , которая преобразует сообщение в элемент ленты .
Сами каналы находятся на https://freek.dev/feed (содержит все сообщения) и https://freek.dev/feed/php (содержит только сообщения с тегом php ).
Контент для перекрестной публикации
Всякий раз, когда я публиковал новый пост в своем блоге WordPress, отправлялся твит, и контент размещался на Medium. Все это было обработано двумя плагинами. Конечно, я хотел сохранить такое поведение. К счастью, API Twitter и Medium довольно просты в использовании, поэтому я сам разработал решение, не полагаясь ни на какие пакеты.
Вот код в Опубликовать модель , которая отправляет Отправить твит и Пост На Средних рабочих местах.
В моем старом блоге WP публикация поста всегда занимала пару секунд, потому что общение с Twitter и Medium занимает некоторое время. В моем новом блоге Laravel публикация чего-то происходит очень быстро, потому что эти SendTweet и Публикуйте на Medium сообщения ставятся в очередь. На самом деле вся вышеупомянутая синхронизация с Algolia также находится в очереди. Horizon используется для обработки и мониторинга всех заданий, поставленных в очередь.
Разнообразный
Запись уценки
Для написания постов я создал базовый интерфейс администратора. Мне нравится писать Markdown вместо простого html. Я попробовал пару редакторов markdown на базе JS и остановился на использовании SimpleMDE .
На переднем сайте содержимое уценки должно отображаться в формате html. Я добавил этот метод в модель Post .
public function getTextAttribute($original)
{
return (new Parsedown())->text($original);
}
Это гарантирует, что всякий раз, когда $post->текст используется в представлении, содержимое сообщения преобразуется из Markdown в html.
Повышение производительности
Приложение Laravel уже довольно быстро выходит из коробки, но мы можем сделать лучше. В прошлом было несколько моих постов, которые занимали довольно высокое место в хакерских новостях. Когда это происходит, одновременно появляется много читателей, и блог должен быть в состоянии справиться с этим. В WordPress я использовал плагин WP Super Cache . Это сохранит отрисованную страницу в виде файла на диске. В следующий раз, когда та же страница будет запрошена снова, она просто будет отображать сохраненный контент из этого файла вместо того, чтобы создавать страницу заново с нуля.
В Laravel то же самое можно сделать, используя еще один из наших пакетов: laravel-responsecache . Если вы хотите узнать больше об этом пакете, прочтите вводный пост в блоге об этом .
Вы можете увидеть, что пакет работает, если посмотрите заголовки ответов в этом блоге. Обратите внимание на заголовок кэш ответов laravel .
Рассылка информационных бюллетеней
Каждые две недели я рассылаю дайджест всего нового контента в своем блоге подписчикам моей рассылки. Вы можете подписаться здесь . Несколько месяцев назад, чтобы сократить расходы, я переключил отказ от MailChimp в пользу Sendy . Вы найдете больше информации о переходе на отправку в этом сообщении в блоге Маттиаса Гениара .
Раньше мне приходилось вручную собирать все заголовки, ссылки и выдержки для включения в рассылку новостей. Для каждого выпуска моего информационного бюллетеня это занимало от 30 до 45 минут. В своем новом блоге я добавил некоторый код для автоматического извлечения всего контента и создания html-кода информационного бюллетеня .
Развертывание новой версии
Я большой поклонник Envoy , инструмента для легкого выполнения команд на удаленных серверах. Репозиторий моего блога содержит скрипт посланника , который может выполнять развертывание, подобное Capistrano, практически с нулевым временем простоя.
В заключение
Я надеюсь, что вам понравился этот небольшой экскурс по кодовой базе моего блога. Не стесняйтесь разветвлять код и использовать его для своего собственного блога. Имейте в виду, что код в репозитории – это не полноценная CMS, а просто простое приложение, адаптированное к моим потребностям.
Мне было очень весело изучать попутный ветер. Без каких-либо предварительных знаний css мне удалось быстро создать дизайн, которым я доволен. Было также некоторое разочарование, когда все работало не так, как ожидалось. Но я виню в этом свое собственное отсутствие навыков css. К счастью моя команда и несколько замечательных людей в сообществе немного помог мне , когда я застрял.
Если вы увлекаетесь Laravel, обязательно ознакомьтесь с репозиторием, содержащим исходный код: https://github.com/spatie/murze.be
Оригинал: “https://dev.to/freekmurze/on-migrating-my-blog-from-wordpress-to-a-laravel-application-4kk0”