Переход от Wordpress к Гюго

1. Выгоды
2. Перенос ваших постов в Wordpress на Markdown
3. Структура папок
4. Пример темы
5. Gulp Integration Управление активами
6. Сохранить или перенаправить URL
7. Поиск
8. Похожие сообщения
9. Изменение размера изображения и сжатие
10. Развертывание / Загрузить
11. Локальный Apache для тестирования .htaccess
12. Разработка с использованием кода Visual Studio

WordPress меня достает. Это замедляет процесс разработки и сопровождается проблемами безопасности и обслуживания. Вот почему я переехал в Хьюго. Хьюго является генератором статических сайтов и позволяет мне писать эффективно и в автономном режиме. В этой статье я покажу причины перехода с Wordpress на Hugo и укажу советы и рекомендации по переходу.

• Wordpress замедляет процесс разработки и сопровождается проблемами безопасности и обслуживания.
• Хьюго - генератор статических сайтов. Это позволяет мне писать в автономном режиме и использовать Markdown. Быстрый предварительный просмотр веб-сервера Hugo позволяет сократить время обработки во время записи. Кроме того, сайт становится более безопасным и требует меньше обслуживания.
• При переходе с Wordpress на Hugo вы должны обеспечить стабильность ваших URL. Кроме того, динамические функции, такие как комментарии и поиск, требуют специальных решений.

Авторский с Wordpress

• Авторские проблемы
  • Вы должны быть онлайн. Всегда. Каждый раз.
  • Это медленно. Время выполнения (запись, сохранение, предварительный просмотр) очень велико. Это задерживает весь процесс инкрементной записи.
  • Вы должны нажать много (например, чтобы загрузить изображение, обновить изображение, выровнять изображение, установить заголовок и ширину изображения, ссылку и форматировать текст, вставить фрагменты кода). Как разработчик, это сильно меня беспокоит.
• Проблемы безопасности и обслуживания
  • 40% Все веб-сайты на основе CMS работают на Wordpress, что делает его популярной целью для хакеров. Да, механизм автоматического обновления Wordpress работает отлично, но вам все равно придется регулярно запускать обновления.
  • Вы должны беспокоиться о резервных копиях. Да, плагины вроде UpdraftPlus делают хорошую работу, но я никогда не пытался откатиться на резервную копию.

Хьюго статический генератор сайтов Он берет файлы Markdown и генерирует файлы HTML. Так что я могу писать в автономном режиме и просто загрузить файлы HTML на мой веб-сервер, когда я закончу.

Авторский рабочий процесс с Хьюго

• Благодаря встроенному веб-серверу предварительного просмотра (работающему локально) я могу видеть результаты в браузере, пока пишу свои файлы Markdown.
• Хьюго написан на Go и поэтому невероятно быстр. Генерация всего моего блога (154 страницы, 110 ресурсов и изображений) занимает всего 370 мс.
• Вы также можете создать несколько хороших конвейеров доставки: если ваши файлы Markdown сохраняются в Git-репозитории, вы можете автоматически инициировать генерацию и выгрузку после того, как был зафиксирован коммит. Но для меня вышеприведенный подход пока хорош.

Выгоды

• Удобное и быстрое авторство
  • Мне не нужно быть онлайн!
  • Находясь в автономном режиме значительно ускоряет процесс записи.
  • Кроме того, предварительный просмотр веб-сервера Хьюго чрезвычайно быстр и умен. После сохранения файла Hugo обнаруживает эти изменения и генерирует новую страницу менее чем за 200 мс. Браузер обновляется автоматически. Таким образом, я сразу вижу свои изменения. Авторство становится удовольствием!
  • Писать с Markdown - это очень весело. Никаких щелчков в редакторе WYSIWYG. Только я и моя клавиатура имеют значение.
  • Я могу использовать мои любимые инструменты (IntelliJ IDEA, Visual Studio Code, Atom) со знакомыми ярлыками и самостоятельные фрагменты ,
• Почти нет требований относительно вашего веб-пространства. Не требуется база данных PHP или MySQL. Вы даже можете разместить свой сайт бесплатно на страницах GitHub.
• Спектакль. Нет ничего быстрее, чем доставка простых статических файлов. Нет выполнения PHP и запросы к базе данных замедляют время отклика.
• Secure. Ваш сайт состоит из простых статических файлов. Нет ничего, что можно взломать.
• Низкие эксплуатационные расходы. Нет регулярных обновлений и резервных копий не требуется.
• Полный и прямой контроль над каждой частью вашего сайта (оптимизируйте скорость страницы, например, путем объединения всех ресурсов, HTML-заголовок для SEO или нумерации страниц, RSS-канал, расположение изображений).

Недостатки

• Вы должны перенести свою тему на язык шаблонов Хьюго. Требуется некоторое время, чтобы ознакомиться с синтаксисом шаблона. Особенно сообщения об ошибках редко бывают полезными.
• Хотя разработчики любят использовать командную строку (для сборки и развертывания) и языки разметки, такие как Markdown, эти вещи могут не подходить для людей, не имеющих технической близости. Следовательно, Хьюго не будет работать на обычного блоггера.

Случаи применения

Помимо блогов, Hugo может легко заменить системы CMS, где простой контент пишется и отображается. Например, Hugo может использоваться для обмена знаниями, документацией или новостями в компании. Мы в Spreadshirt используем его для нашего внутреннего технического блога, где мы делимся знаниями и лучшими практиками.

Перенос ваших постов в Wordpress на Markdown

Я уже использовал Markdown для своих постов в Wordpress (да, это возможно ), поэтому преобразование не требовалось, и я все равно хотел настроить свой проект Hugo вручную.

Но вы обязательно должны проверить плагин Wordpress WordPress к Хьюго-экспортера , Он преобразует все ваши сообщения в Markdown (включая конфигурацию сообщений) и создает типичную структуру проекта Hugo из вашей установки Wordpress. Результат - очень хорошая отправная точка для вашей миграции.

Структура папок

Когда я начал с Хьюго, мне потребовалось некоторое время, чтобы выяснить подходящую структуру папок. Я закончил со следующим:

Content── содержание │ ├── блог │ │ ├── 2015 │ │ ├── 2016 │ │ └── 2017 │ │ ├── 01-microservice-guest-лекция-tu-chemnitz │ │ └── 02- moving-wordpress-hugo │ │ ├── Авторский рабочий процесс-Hugo.svg │ │ └── 2017-01-29-moving-wordpress-hugo.md │ └── page │ └── legal.md ├── public ├── static │ │── img │ │ └── author-pic.jpg │ └── .htaccess ├── темы │ └── edinburgh-hugo-theme ├── config.yaml └── build- and-deploy.sh

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

Пример темы

Вы можете найти мою тему на GitHub под эдинбург-Хьюго-тема , Используйте это как вдохновение, но не ожидайте, что это будет работать из коробки для вас. ;-)

Gulp Integration Управление активами

Обновление: начиная с версии 0.43, Hugo поддерживает Трубопроводы который может быть использован для компиляции SASS, минимизации CSS или констатации CSS и JavaScript. Таким образом, нам не нужны другие инструменты сборки, такие как Gulp. Это отличная функция и работает как шарм.

Сохранить или перенаправить URL

Очень важно сохранить URL-адреса вашего сообщения при переходе с Wordpress на Hugo. В противном случае вы потеряете все рейтинг страницы вашей поисковой системы, и все обратные ссылки прекратятся. В Wordpress я использовал следующую схему URL:

/ Мой-пост-имя <домен>

Как видите, у меня нет ни категории, ни даты в моих URL. Эта схема может быть легко настроена в конфигурации сайта (config.yaml):

постоянные ссылки: блог: /: slug /

Далее, каждый пост должен указывать слаг в своей конфигурации:

слизень: движущийся WordPress-Hugo

Другим пунктом являются пути для RSS-канала и таксономии (категории и теги). Их пути по умолчанию отличаются в Wordpress и Hugo:

# Wordpress: <домен> / feed / <домен> / категория / <имя> <домен> / тег / <имя> # Уго: <домен> /index.xml <домен> / категории / <имя> <домен> / / теги <имя>

Поскольку эти URL-адреса не так важны для моего трафика из поисковых систем, я решил разбить их и использовать стандартные URL-адреса Хьюго для канала RSS и таксономий. Это делает мою конфигурацию простой. Но я настроил перенаправления в моем .htaccess для них:

RewriteRule ^ feed $ index.xml [R = 301, L] RewriteRule ^ feed / $ index.xml [R = 301, L] RewriteRule ^ tag /(.*)/$ tags / $ 1 / [R = 301, L] RewriteRule ^ tag /(.*)$ tags / $ 1 / [R = 301, L] RewriteRule ^ category /(.*)/$ Categories / $ 1 / [R = 301, L] RewriteRule ^ category /(.*)$ Категории / $ 1 / [R = 301, L]

Наконец я рекомендую Кричащая лягушка SEO Spider , С помощью этого инструмента вы можете создать список всех URL-адресов вашего сайта Wordpress и проверить, существуют ли эти URL-адреса по-прежнему или правильно перенаправить на ваш сайт Hugo.

я использую Disqus за мои комментарии. Это самый простой выбор, поскольку Hugo предоставляет для него хорошую встроенную поддержку.

Кроме того, вы можете импортировать ваши существующие комментарии Wordpress в Disqus. Просто установите плагин Disqus Disqus-комментарий-система в Wordpress и использовать функция экспорта чтобы получить все комментарии в свой аккаунт Disqus. Это работает довольно хорошо. Единственным недостатком является то, что вы потеряете Gravatars ваших комментариев.

Поиск

Многие пользователи Hugo работают Google Custom Search , Но он содержит рекламу (в бесплатной версии). Вот почему я использую простую HTML-форму и перенаправляю на поиск Google, но ограничиваю поиск своим сайтом.

<form role = "search" method = "get" action = "https://www.google.com/search"> <input type = "search" placeholder = "Поиск ..." value = "" name = " q "title =" Поиск: "> <input type =" hidden "name =" sitesearch "value =" phauer.com "> <button type =" submit "value =" Поиск "/> </ form>

Похожие сообщения

Обновление: начиная с версии 0.27, Hugo предлагает мощное решение для связанный контент из коробки.

<div class = "related-posts"> <p class = "h3-like"> Связанные сообщения </ p> {{$ related: = .Site.RegularPages.Related. | первые 4}} {{с $ related}} <ul> {{range. }} <li> <a href=" enj карлику .Permalink} innovative"> <img src = "{{. .Params.featuredImage}}" alt = "{{.Title}}" /> <p> {{. Название}} </ p> </a> </ li> {{end}} </ ul> {{end}} </ div>

config.yaml:

связанные: порог: 80 includeNewer: true toLower: ложные индексы: - имя: «теги» вес: 150 - имя: «категории» вес: 80 - имя: «дата» вес: 10 шаблон: «2006»

Изменение размера изображения и сжатие

я использую ImageMagick-х преобразовать, чтобы изменить размер и сжать мои изображения и OptiPNG оптимизировать размер изображения PNG.

convert "image.png" -resize 300 "image-thumbnail.png" optipng "image-thumbnail.png" -quiet

Для преобразования SVG в PNG я добился лучших результатов с командной строкой Inkscape ,

inkscape --without-gui --export-png "image-small.png" --export-background "#ffffff" --export-width "200" "image.svg"> / dev / null

Развертывание / Загрузить

Загрузка статических файлов очень проста, если у вас есть доступ по ssh. В этом случае, Rsync это лучший выбор. Это очень быстро и просто в использовании.

Локальный Apache для тестирования .htaccess

К сожалению, вы не можете протестировать все аспекты своего веб-сайта с помощью предварительного просмотра Hugo. Это включает в себя SSL / HTTPS, 404 сайта , перенаправления и заголовки HTTP (как заголовок Expires). Для этого я запускаю Docker-контейнер с веб-сервером Apache. Мой docker-compose.yml выглядит так:

версия: '2' сервисы: apache: образ: httpd: 2.2.32-альпийские тома: - ./public:/usr/local/apache2/htdocs - ./apache-config/httpd.conf:/usr/local/apache2 /conf/httpd.conf - ./apache-config/ssl:/usr/local/apache2/ssl порты: - "80:80" - "443: 443"

Обратите внимание, что вы должны изменить следующее в httpd.conf по умолчанию:

• Активируйте файлы .htaccess, установив для параметра AllowOverride значение «All» (в <Directory "/ usr / local / apache2 / htdocs">).
• Активируйте SSL, добавив в конце следующее:

<IfModule mod_ssl.c> Прослушать 443 </ IfModule> <VirtualHost *: 443> SSLEngine на SSLCertificateFile /usr/local/apache2/ssl/apache.crt SSLCertificateKeyFile /usr/local/apache2/ssl/apache.key ServerName localhostRoM usr / local / apache2 / htdocs </ VirtualHost>

Теперь просто позвоните:

hugo --baseURL https: // localhost docker-compose up curl https: // localhost --insecure

Разработка с использованием кода Visual Studio

Я закончил с Visual Studio Code для создания моих сообщений в блоге. Проверьте это, это действительно приятно и также доступно для Linux. Кроме того, вы даже можете настроить свой код Visual Studio, чтобы сделать разработку Markdown настоящим удовольствием!

Расширение уценки-ярлыки это обязательно иметь! Это позволяет с легкостью отформатировать Markdown.

Я использую шорткод цифры вставлять изображения с подписью или определенным классом CSS. Но синтаксис громоздок и его трудно запомнить. Вот почему я создал отрывок за это. Я назначаю ему аббревиатуру рис. Теперь мне нужно только набрать fig <Tab>, и Visual Studio Code расширяет этот фрагмент для меня. Я загрузил свой фрагменты к GitHub Gist , Не стесняйтесь копировать это!

Если вы хотите скопировать мой целые настройки Вы можете использовать расширение Настройки синхронизации и используйте мой GIST ID bff96da5eb3f5318fc1b64eaf5e4da78.

Совет: Ctrl + Shift + O отображает оглавление текущего файла уценки. Кроме того, вы можете перейти к определенному разделу, введя название заголовка.

Я действительно хотел бы поблагодарить моего коллегу Андреас Линц что указал мне на Хьюго!

Похожие

Комментарии