Недавно мой писательский зуд был в полной силе, и я обнаружил, что создаю больше контента, чем когда-либо. Мое портфолио (размещено на GitHub Pages ) был просто статичным веб-сайтом, который использовался для отображения моего резюме и опыта работы. Часть блога никогда не была в центре внимания, и поэтому я не тратил на нее много времени. Вот где вошел Хьюго.
Что такое Хьюго?
Хьюго описывает себя как «самый быстрый в мире фреймворк для создания веб-сайтов». Основываясь на моем опыте с другим генератором статических сайтов под названием Джекил , Я должен был бы согласиться. При скорости <1 мс на страницу средний сайт создается менее чем за секунду. Хьюго позволяет мне писать сообщения в блоге в уценка и скомпилировать их для создания статического сайта. Он также включает готовые шаблоны для распространенных надстроек, таких как SEO (поисковая оптимизация), комментарии, аналитика и многое другое.
Перенос контента
Все мои предыдущие посты в блоге были написаны на HTML. Я использовал этот замечательный инструмент легко конвертировать эти страницы в Markdown. Как только я уточнил, как все выглядит, мне нужно было добавить "передний вопрос" на пост, чтобы Хьюго знал, как его интерпретировать. Вот главный вопрос для этого поста:
--- title: Переход на Hugo описание: почему я выбрал этот статический генератор сайтов и преимущества, которые вы можете получить. дата: изображения: ["http://www.leejamesrobinson.com/static/images/migrating-to-hugo/hugo.png"] категории: - код ---
Большинство из этих параметров говорят сами за себя. Заполняя их, он создает соответствующие теги og и <meta> для использования Открыть График и улучшить SEO.
<meta property = "og: title" content = "Миграция на Гюго - Ли Робинсона" /> <meta property = "og: description" content = "Почему я выбрал этот генератор статического сайта и какие преимущества вы можете получить." /> <meta property = "og: url" content = "http://www.leejamesrobinson.com/blog/migrating-to-hugo/" /> <meta property = "og: site_name" content = "Ли Робинсон" /> <meta property = "og: type" content = "article" /> <meta property = "og: image" content = "http://www.leejamesrobinson.com/static/images/migrating-to-hugo/hugo. png "/> <meta property =" article: section "content =" Блог "/> <meta property =" article: publ_time "content =" 2017-09-29T00: 00: 00Z "/> <meta property =" article : updated_time "content =" 2017-09-29T00: 00: 00Z "/>
Еще одной мотивацией для переписывания моего портфолио было сокращение времени загрузки страницы и улучшение работы пользователей. Я действительно хотел лишить яркой внешности и сосредоточиться на минимальном дизайне, который был сосредоточен на типографии. Ранее я использовал начальная загрузка для структуры моего сайта. Наряду с этим потребовалось множество библиотек и дополнений, включая jQuery, Font Awesome, Prism (подсветка синтаксиса) и многое другое. Эти зависимости увеличивали размер моего портфеля и снижали производительность. Переключившись на Хьюго, я смог убрать этот наворот. Наряду с этим я также:
- Убрал Google Analytics в пользу аналитики CloudFlare
- Прекращена устаревшая поддержка IE8
- По возможности использовали SVG вместо шрифтов
Размер сайта (Gzip)
До 
После 
Скорость веб-сайта (Google Lighthouse)
До 
После 
Что такое Хьюго?