Переход с WordPress на Hugo

Когда был выпущен WordPress 5, я был в восторге от использования редактора Gutenberg для создания пользовательских блоков, так как сообщения в моем личном блоге имели несколько функций, которые я мог превратить в блок, упрощая настройку моего контента. Это было определенно круто, но все равно было довольно раздутым.

Примерно в то же время я начал все больше и больше читать о генераторах статических сайтов и JAMstack (эта статья Криса Фердинанди меня убедила). Работая над личными побочными проектами, вы можете отвлечься от множества проблем, но как профессионал вы должны обеспечить наилучшее возможное качество. Производительность, безопасность и доступность становятся первыми вещами, о которых следует подумать. Вы определенно можете оптимизировать WordPress, чтобы он был довольно быстрым, но быстрее, чем статический сайт в CDN, которому не нужно каждый раз запрашивать базу данных или генерировать вашу страницу? Не так просто.

Я подумал, что смогу применить это на практике в своем личном проекте, чтобы научиться, а затем смогу использовать это для профессиональных проектов, и, возможно, некоторые из вас тоже захотят узнать, как это сделать. В этой статье я расскажу, как я перешел с WordPress на конкретный генератор статических сайтов по имени Hugo.

Hugo построен на Go, который является довольно быстрым и простым в использовании языком, если вы привыкнете к синтаксису, который я объясню. Все это компилируется локально, поэтому вы можете просмотреть свой сайт прямо на своем компьютере. Затем проект будет сохранен в частном репозитории. Кроме того, я расскажу вам, как разместить его на Netlify и сохранить ваши изображения в Git LFS (хранилище больших файлов). Наконец, мы посмотрим, как мы можем настроить систему управления контентом для добавления сообщений и изображений (аналогично серверной части WordPress) с помощью Netlify CMS.

Обратите внимание, что все это абсолютно бесплатно, что довольно удивительно, если вы спросите меня (хотя вам придется доплатить, если вы израсходуете все свое хранилище LFS или если трафик вашего сайта будет интенсивным). Кроме того, я пишу это с точки зрения пользователя Bitbucket, работающего на Mac. Некоторые шаги могут немного отличаться, но вы должны быть в состоянии следовать им, независимо от того, какую настройку вы используете.

Вам нужно немного освоиться с HTML, CSS, JS, Git и командным терминалом. Также может быть полезно иметь несколько понятий с языками шаблонов, такими как Liquid, но мы рассмотрим шаблоны Хьюго, чтобы вы начали. Тем не менее, я предоставлю как можно больше подробностей!

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

1. Экспорт контента из WordPress
2. Подготовка дизайна вашего блога
3. Настройка нового репозитория
4. Активация Git LFS (необязательно)
5. Создание сайта на Netlify
6. Подготовка к Netlify Large Media (необязательно)
7. Настройка Hugo на вашем компьютере
8. Создание собственной темы
9. Заметки о синтаксисе Хьюго
10. Контент и данные
11. Развертывание на Netlify
12. Настройка пользовательского домена
13. Редактирование контента в Netlify CMS

Примечание . Если у вас возникли проблемы с некоторыми из них, сообщите мне об этом в комментариях, и я постараюсь помочь, но обратите внимание, что это предназначено для простого статического блога, в котором нет дюжины виджетов или комментарии (это можно настроить позже), а не сайт компании или личное портфолио. Вы, несомненно, могли бы, но для простоты я буду придерживаться простого статического блога.

Предпосылки

Прежде чем мы что-либо сделаем, давайте создадим папку проекта, в которой будет находиться все, от наших инструментов до нашего локального репозитория. Я назову его «WP2Hugo» (не стесняйтесь называть его как хотите).

В этом руководстве будут использоваться несколько инструментов командной строки, таких как npm и Git. Если у вас их еще нет, установите их на свой компьютер:

• Установить Гит
• Установите Node.js и npm (Node.js включает npm)
• Установите Homebrew (рекомендуется для пользователей macOS/Linux)

С их установкой, давайте начнем!

1. Экспорт контента из WordPress

Во-первых, нам нужно экспортировать ваш контент из WordPress: посты, страницы и загрузки. Есть несколько доступных инструментов, которые упоминает Хьюго, но лично работал только один из них: blog2md. Это работает, запуская файл JavaScript с Node.js в командном терминале. Он берет XML-файлы, экспортированные WordPress, и выводит файлы Markdown с правильной структурой, преобразуя ваш HTML в Markdown и добавляя то, что называется Front Matter, который представляет собой способ форматирования метаданных в начале каждого файла.

Перейдите к своему администратору WordPress и откройте меню «Инструменты», подменю «Экспорт». Вы можете экспортировать оттуда то, что хотите. Я буду называть экспортированный файл YOUR-WP-EXPORT.xml .

Вы можете выбрать, какие именно данные вы хотите экспортировать из своего блога WordPress.

Внутри нашей папки WP2Hugo я рекомендую создать новую папку с именем blog2md в которую вы поместите файлы из инструмента blog2md, а также ваш XML-экспорт из WordPress ( YOUR-WP-EXPORT.xml ). Кроме того, создайте новую папку там out где будут размещаться ваши сообщения Markdown. Затем откройте командный терминал и перейдите с помощью команды cd к вновь созданной папке «blog2md» (или введите cd с пробелом и перетащите папку в терминал).

Теперь вы можете запустить следующие команды, чтобы получить свои сообщения:

 npm install node index.js w YOUR-WP-EXPORT.xml out

Загляните в /WP2Hugo/blog2md/out чтобы проверить, все ли ваши сообщения (и потенциальные страницы) там. Если это так, вы можете заметить, что в документации есть что-то о комментариях: у меня был блог без комментариев, поэтому мне не нужно было их переносить, но Хьюго предлагает несколько вариантов комментариев. Если у вас были какие-либо комментарии к WordPress, вы можете экспортировать их для последующего повторного внедрения с помощью специализированного сервиса, такого как Disqus.

Если вы достаточно знакомы с JS, вы можете настроить файл index.js , чтобы изменить то, как ваши файлы постов будут выводиться, отредактировав функцию wordpressImport . Вы можете захватить избранное изображение, удалить постоянную ссылку, изменить формат даты или установить тип (если у вас есть сообщения и страницы). Вам придется адаптировать его к вашим потребностям, но знайте, что цикл ( posts.forEach(function(post){ ... }) ) проходит через все сообщения из экспорта, поэтому вы можете проверить XML-содержимое каждый пост в этом цикле и настройте переднюю тему.

Кроме того, если вам нужно обновить URL-адреса, содержащиеся в ваших сообщениях (в моем случае я хотел сделать ссылки на изображения относительными, а не абсолютными) или форматирование даты, сейчас самое время сделать это, но не теряйте сон из-за этого. . Многие текстовые редакторы предлагают массовое редактирование, поэтому вы можете подключить регулярное выражение и внести нужные изменения в свои файлы. Кроме того, вы можете запускать скрипт blog2md столько раз, сколько потребуется, так как он перезапишет все ранее существовавшие файлы в выходной папке.

Когда у вас есть экспортированные файлы Markdown, ваш контент готов. Следующий шаг — подготовить вашу тему WordPress для работы в Hugo.

2. Подготовка дизайна вашего блога

У моего блога был типичный макет с заголовком, панелью навигации, контентом, боковой панелью и нижним колонтитулом — довольно просто настроить. Вместо того, чтобы копировать части моей темы WordPress, я перестроил ее с нуля, чтобы убедиться, что в ней нет лишних стилей или бесполезной разметки. Это хорошее время, чтобы внедрить новые методы CSS ( пссс… Grid — это круто! ) и настроить более последовательную стратегию именования (что-то вроде рекомендаций CSS Wizardry). Вы можете делать, что хотите, но помните, что мы пытаемся оптимизировать наш блог, так что хорошо бы просмотреть то, что у вас было, и решить, стоит ли его сохранять.

Начните с того, что разбейте свой блог на части, чтобы вы могли четко видеть, что куда идет. Это поможет вам структурировать разметку и стили. Кстати, у Hugo есть встроенная возможность компилировать Sass в CSS, поэтому не стесняйтесь разбивать эти стили на более мелкие файлы столько, сколько хотите!

Когда я говорю просто, я имею в виду очень просто.

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

3. Настройка нового репозитория

Теперь, когда это не так, нам нужно настроить репозиторий. Я предполагаю, что вы захотите создать для этого новый репозиторий, что станет отличной возможностью использовать Git LFS (большая файловая система). Причина, по которой я советую сделать это сейчас, заключается в том, что реализация Git LFS, когда у вас уже есть сотни образов, не так гладка. Я сделал это, но это была головная боль, которую вы, вероятно, захотите избежать. Это также обеспечит другие преимущества в будущем с Netlify.

Хотя я буду делать все это с помощью Bitbucket и их проприетарного Git GUI, Sourcetree, вы можете сделать это с помощью GitHub и GitLab и их собственных инструментов для рабочего стола. Вы также можете сделать это прямо в командном терминале, но мне нравится максимально автоматизировать и упростить процесс, снижая риск совершения глупых ошибок.

Когда вы создали новый репозиторий на платформе Git по вашему выбору, создайте пустую папку внутри вашей локальной папки проекта (WP2Hugo), например, hugorepo , затем откройте командный терминал или инструмент Git GUI и инициализируйте локальный репозиторий Git; затем свяжите его с удаленным репозиторием (обычно вы можете найти точную команду для использования во вновь созданном удаленном репозитории).

Я бы рекомендовал создать ветку dev (или stage ), чтобы ваша основная ветка строго использовалась для производственных развертываний. Это также ограничит создание новых сборок только тогда, когда вы закончите с потенциальной серией изменений. Создать ветку можно локально или на удаленной веб-странице вашего репозитория.

GitHub позволяет легко создать ветку, щелкнув переключатель веток и введя новое имя. В GitLab вам нужно открыть раскрывающийся список «Плюс», чтобы получить доступ к этой опции. Bitbucket требует, чтобы вы открыли меню «Плюс» слева, чтобы открыть выдвижное меню, и нажмите «Создать ветку» в разделе «Приступить к работе».

4. Активация Git LFS (необязательно)

Git Large File System — это функция Git, которая позволяет более эффективно сохранять большие файлы, такие как документы Photoshop, ZIP-архивы и, в нашем случае, изображения. Поскольку изображения могут нуждаться в управлении версиями, но не являются в точности кодом, имеет смысл хранить их не так, как обычные текстовые файлы. Это работает путем сохранения изображения на удаленном сервере, а файл в вашем репозитории будет текстовым файлом, содержащим указатель на этот удаленный ресурс.

Увы, это не вариант, который вы просто включаете. Вы должны настроить свой репозиторий для активации LFS, а это требует некоторой работы локально. После установки Git вам необходимо установить расширение Git-LFS:

 git lfs install

Если, как и я, эта команда у вас не сработала, попробуйте альтернативу Homebrew (для macOS или Linux):

 brew install git-lfs

Как только это будет сделано, вам нужно будет указать, какие файлы отслеживать в вашем репозитории. Я буду размещать все изображения, которые я загрузил в папку /upload WordPress, в папке с таким же названием в моей установке Hugo, за исключением того, что эта папка будет внутри папки /static (которая после компиляции будет преобразована в корень). Определитесь со структурой папок и отслеживайте файлы внутри:

 git lfs track "static/uploads/*"

Это позволит отслеживать любой файл в папке /static/uploads . Вы также можете использовать следующее:

 git lfs track "*.jpg"

Это будет отслеживать все файлы JPG в вашем репозитории. Например, вы можете смешивать и сопоставлять только файлы JPG в определенной папке.

После этого вы можете зафиксировать файлы конфигурации LFS в своем репозитории и отправить их в удаленный репозиторий. В следующий раз, когда вы локально зафиксируете файл, соответствующий конфигурации отслеживания LFS, он будет «конвертирован» в ресурс LFS. Если вы работаете над веткой разработки, объедините этот коммит с вашей основной веткой.

Давайте теперь посмотрим на Netlify.

5. Создание сайта на Netlify

На этом этапе ваш репозиторий настроен, поэтому вы можете продолжить и создать учетную запись в Netlify. Вы даже можете войти в свою учетную запись GitHub, GitLab или Bitbucket, если хотите. Оказавшись на панели инструментов, нажмите кнопку «Новый сайт из Git» в правом верхнем углу и создайте новый сайт Netlify.

Примечание . Пока вы можете оставить для всех параметров значения по умолчанию.

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

На данный момент в настройках сайта нажмите «Изменить имя сайта» и назовите свой сайт как хотите — я chris-smashing-hugo-blog . Теперь мы сможем получить доступ к сайту через chris-smashing-hugo-blog.netlify.com : красивая страница 404!

6. Подготовка к Netlify Large Media (необязательно)

Если вы настроили Git LFS и планируете использовать Netlify, выполните следующие действия. Это немного более запутанно, но определенно того стоит: это позволит вам установить строки запроса для URL-адресов изображений, которые будут автоматически преобразованы.

Допустим, у вас есть ссылка на Portrait.jpg, изображение размером 900×1600 пикселей. С Netlify Large Media вы можете вызвать файл Portrait.jpg?nf_resize=fit&w=420 , который пропорционально масштабирует его. Если вы определите как w , так и h и установите nf_resize=smartcrop , он изменит размер путем обрезки, чтобы сфокусироваться на точке интереса изображения (как определено причудливым алгоритмом, также известным как магия мозга робота! ). Я считаю, что это отличный способ иметь миниатюры, подобные тем, которые генерирует WordPress, без необходимости в нескольких файлах для изображения в моем репозитории.

Если это звучит привлекательно для вас, давайте настроим его!

Первым шагом является установка интерфейса командной строки Netlify (CLI) через npm:

 npm install netlify-cli -g

Если это сработало, запуск команды netlify должен привести к информации об инструменте.

Затем вам нужно убедиться, что вы находитесь в папке локального репозитория (которую я ранее назвал «hugorepo»), и выполнить:

 netlify login

Авторизуйте токен. Далее нам нужно установить плагин Netlify Large Media. Бегать:

 netlify plugins:install netlify-lm-plugin netlify lm:install

В конце полученного сообщения должна быть показана командная строка, которую вы должны скопировать (которая должна выглядеть как /Users/YOURNAME/.netlify/helper/path.bash.inc на Mac) — запустите ее. Обратите внимание, что Keychain может запросить у вас пароль администратора вашего компьютера в macOS.

Следующий шаг — связать Netlify:

 netlify link

Здесь вы можете указать название вашего сайта (я указал название chris-smashing-hugo-blog , которое дал ему ранее). После этого вам просто нужно настроить функцию больших носителей, выполнив следующие действия:

 netlify lm:setup

Зафиксируйте эти новые изменения в локальном репозитории и отправьте их в удаленную ветку разработки. У меня было несколько ошибок с Sourcetree и Keychain по строкам git "credential-netlify" is not a git command . Если это ваш случай, попробуйте вручную нажать эти команды:

 git add -A git commit -m "Set up Netlify Large media" git push

Если это не сработало, вам может потребоваться установить Netlify Credential Helper. Вот как это сделать с помощью Homebrew:

 brew tap netlify/git-credential-netlify brew install git-credential-netlify

Попробуйте выполнить коммит прямо сейчас (с помощью графического интерфейса или командного терминала): он должен работать!

Примечание . Если вы измените свой пароль Netlify, запустите netlify logout и netlify login в сеть .

Вы можете спросить: «Все это, и мы до сих пор даже не инициализировали нашу сборку Hugo?» Да, я знаю, это заняло некоторое время, но все приготовления к переходу сделаны. Теперь мы можем настроить наш блог Hugo!

7. Настройка Hugo на вашем компьютере

Сначала вам нужно установить Hugo на свой компьютер с помощью любого из предложенных вариантов. Я буду использовать Homebrew, но пользователи Windows могут использовать Scoop или Chocolatey или загрузить пакет напрямую.

 brew install hugo

Затем вам нужно будет создать новый сайт Hugo, но ему не понравится его установка в непустой папке. Первый вариант: вы можете создать его в новой папке и переместить его содержимое в папку локального репозитория:

 hugo new site your_temporary_folder

Второй вариант: вы можете принудительно установить его в свой локальный репозиторий с помощью флага, просто убедитесь, что вы запускаете его в нужной папке:

 hugo new site . --force

Теперь у вас есть сайт Hugo, который вы можете запустить с помощью этой команды:

 hugo server

Вы получите локальный предварительный просмотр на localhost . К сожалению, у вас нет контента и собственной темы. Не волнуйтесь, скоро мы это настроим!

Давайте сначала посмотрим на файл конфигурации (в моем случае config.toml ): давайте настроим имя блога и базовый URL-адрес (он должен совпадать с URL-адресом на панели управления Netlify):

 title = "Chris' Smashing Hugo Blog" baseURL = "https://chris-smashing-hugo-blog.netlify.com"

Эта ссылка будет перезаписана во время локальной разработки, поэтому вы не должны столкнуться с ошибкой 404.

Давайте отдадим Хьюго наши экспортированные статьи в формате Markdown. Они должны находиться в /WP2Hugo/blog2md/out с первого шага. В папке Hugo (также известной как локальный каталог репозитория) откройте папку content и создайте подпапку с именем posts . Поместите туда свои файлы Markdown, а затем давайте настроим тему.

8. Создание собственной темы

Для этого шага я рекомендую загрузить шаблон Saito, тему со всеми частями, которые вам понадобятся для начала работы (и без стилей) — очень полезная отправная точка. Вы можете, конечно, взглянуть на эту коллекцию готовых тем для Hugo, если хотите пропустить эту часть процесса. Это все зависит от вас!

Из папки локального репозитория клонируйте тему в themes/saito :

 git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito

Вы можете переименовать эту папку во что угодно, например, в cool-theme . Вам нужно указать конфигурации Hugo, какую тему вы хотите использовать, отредактировав файл config.toml/yaml/json . Измените значение темы на saito , или cool-theme , или любое другое имя папки вашей темы. В предварительном просмотре должно отображаться название вашего блога вместе со строкой об авторских правах. Это начало, да?

Откройте файл layout/partials/home.html темы и отредактируйте его, чтобы отобразить ваш контент, ограничившись пятью первыми элементами типа posts (внутри папки content/posts/ ), с range , first и where :

 <div class="container"> {{ range first 5 (where .Paginator.Pages "Type" "posts") }} <article class="post post--{{ .Params.class }}"> <h2 class="post__title">{{ .Title }}</h2> <section class="post__content"> {{ .Content }} </section> </article> {{ end }} </div>

Теперь ваш контент виден самым простым способом. Пришло время сделать это своим — давайте погрузимся!

Шаблоны с Хьюго

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

Все операции в Hugo определяются внутри разделителей: двойных фигурных скобок (например, {{ .Title }} ), которые должны показаться вам знакомыми, если вы раньше немного работали с шаблонами. Если нет, подумайте об этом как о способе выполнения операций или вставки значений в определенную точку вашей разметки. Для блоков они заканчиваются тегом {{ end }} для всех операций, кроме шорткодов.

Темы имеют папку layout которая содержит части макета. Папка _default будет отправной точкой для Hugo, а baseof.html — ( как вы уже догадались! ) основой вашего макета. Он будет вызывать каждый компонент, называемый «partials» (подробнее об этом в документации Hugo о частичном шаблоне), аналогично тому, как вы использовали бы include в PHP, которое вы, возможно, уже видели в своей теме WordPress. Партиалы могут вызывать другие партиалы — только не делайте из этого бесконечный цикл.

Вы можете вызвать партиал с помощью {{ partial "file.html" . }} {{ partial "file.html" . }} синтаксис. partial раздел довольно прост, но два других, возможно, нуждаются в объяснении. Вы можете ожидать, что вам придется написать partials/file.html, но, поскольку все частичные файлы должны находиться в папке «partials», Хьюго может найти эту папку без проблем. Конечно, вы можете создавать подпапки внутри папки «partials», если вам нужно больше организации.

Возможно, вы заметили лишнюю точку: это контекст, который вы передаете своему партиалу. Если у вас есть партиал меню и список ссылок и меток, вы можете передать этот список в партиал, чтобы он мог получить доступ только к этому списку и ничего больше. Я расскажу больше об этой неуловимой точке в следующем разделе.

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

 <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> <head> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head.html" . }} </head> <body> {{ partial "header.html" . }} {{ partial "nav.html" . }} <main> {{ block "main" . }}{{ end }} </main> <aside> {{ partial "sidebar.html" . }} </aside> {{ partial "footer.html" . }} </body> </html>

Блок {{ block "main" . }}{{ end }} Строка {{ block "main" . }}{{ end }} отличается тем, что это блок, который определяется с помощью шаблона, основанного на содержании текущей страницы (домашняя страница, страница с одним сообщением и т. д.) с помощью {{ define "main" }} .

Таблицы стилей

В вашей теме создайте папку с именем assets , в которую мы поместим папку css . Он будет содержать наши файлы SCSS или старый надежный файл CSS. Теперь в папке partials должен быть файл css.html (который вызывается head.html ). Чтобы преобразовать Sass/SCSS в CSS и минимизировать таблицу стилей, мы будем использовать эту серию функций (используя синтаксис Hugo Pipes вместо того, чтобы оборачивать функции друг вокруг друга):

 {{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

В качестве бонуса — поскольку я изо всех сил пытался найти прямой ответ — если вы хотите использовать Autoprefixer, Hugo также реализует PostCSS. Вы можете добавить дополнительную функцию канала между toCSS и minify в первой строке, например:

 {{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

Создайте файл «postcss.config.js» в корне вашего блога Hugo и передайте параметры, такие как:

 module.exports = { plugins: { autoprefixer: { browsers: [ "> 1%", "last 2 versions" ] } }, }

И вуаля! От Sass к минимизированному CSS с префиксом. Функция канала «отпечаток пальца» должна убедиться, что имя файла уникально, например, style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css . Если вы измените таблицу стилей, изменится отпечаток пальца, поэтому имя файла будет другим, и, таким образом, вы получите эффективное решение для очистки кеша.

9. Заметки о синтаксисе Хьюго

Я хочу убедиться, что вы понимаете «точку», то есть то, как Хьюго определяет область действия переменных (или, по моим собственным словам, предоставляет контекстную ссылку), которые вы будете использовать в своих шаблонах.

Точка и область видимости

Точка похожа на переменную верхнего уровня, которую вы можете использовать в любом шаблоне или шорткоде, но ее значение ограничено контекстом. Значение точки в шаблоне верхнего уровня, таком как baseof.html , отличается от значения внутри блоков цикла или with блоками.

Допустим, это находится в нашем шаблоне в нашем партиале head.html :

 {{ with .Site.Title }} {{ конец }}

Несмотря на то, что мы запускаем это в основной области видимости, значение точки меняется в зависимости от контекста, которым в данном случае является .Site.Title . Итак, чтобы напечатать значение, вам нужно всего лишь написать . вместо повторного ввода имени переменной. Сначала это смутило меня, но к этому очень быстро привыкаешь, и это помогает уменьшить избыточность, поскольку вы называете переменную только один раз. Если что-то не работает, обычно это происходит потому, что вы пытаетесь вызвать переменную верхнего уровня внутри блока с областью действия.

Так как же использовать область верхнего уровня внутри блока с областью действия? Допустим, вы хотите проверить одно значение, но использовать другое. Вы можете использовать $ , который всегда будет областью верхнего уровня:

 {{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

Внутри нашего условия область действия — .Site.Params.InfoEnglish , но мы по-прежнему можем получить доступ к значениям за его пределами с помощью $ , где интуитивное использование .Site.Params.DescriptionEnglish не сработает, поскольку оно попытается разрешить .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish , выдает ошибку.

Пользовательские переменные

Вы можете назначать переменные, используя следующий синтаксис:

 {{ $customvar := "custom value" }}

Имя переменной должно начинаться с $ , а оператор присваивания должен быть := , если это первое присвоение, = в противном случае:

 {{ $customvar = "updated value" }}

Проблема, с которой вы можете столкнуться, заключается в том, что это не выйдет за рамки, что подводит меня к следующему пункту.

Царапать

Функциональность Scratch позволяет назначать значения, доступные во всех контекстах. Скажем, у вас есть список фильмов в файле movie.json :

 [ { "name": "The Room", "rating": 4 }, { "name": "Back to the Future", "rating": 10 }, { "name": "The Artist", "rating": 7 } ]

Теперь вы хотите перебрать содержимое файла и сохранить свой любимый, чтобы использовать его позже. Здесь в игру вступает Scratch:

 {{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }} {{ range .Site.Data.movies }} {{ if ge .rating 10 }} {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }} {{ $.Scratch.Set "favouriteMovie" .name }} {{ end }} {{ end }} [...] My favourite movie is {{ .Scratch.Get "favouriteMovie" }} <!-- Expected output => My favourite movie is Back to the Future -->

С помощью Scratch мы можем извлечь значение из цикла и использовать его где угодно. По мере того, как ваша тема становится все более и более сложной, вы, вероятно, обнаружите, что тянетесь к Scratch.

Примечание . Это всего лишь пример, так как этот цикл можно оптимизировать для вывода этого результата без Scratch, но это должно дать вам лучшее понимание того, как он работает.

Условные

Синтаксис условных выражений немного отличается от ожидаемого — с точки зрения JavaScript или PHP. По сути, есть функции, которые принимают два аргумента (круглые скобки необязательны, если вы вызываете значения напрямую):

 {{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

Таких функций несколько:

• eq проверяет равенство
• ne проверяет неравенство
• gt проверить на большее, чем
• ge проверить на большее или равное
• lt проверяет меньше, чем
• le проверяет меньше или равно

Примечание . Вы можете узнать все о функциях, которые предлагает Hugo, в Кратком справочнике по функциям Hugo.

пробел

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

Допустим, у нас есть этот гипотетический частичный:

 {{ if eq .Site.LanguageCode "en-us" }} <p>Welcome to my blog!</p> {{ end }} <img src="/uploads/portrait.jpg" alt="Blog Author">

Если код языка сайта не en-us , это будет вывод HTML (обратите внимание на три пустые строки перед тегом изображения):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

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

Таким образом, если ваш шаблон содержит следующее:

 {{- if eq .Site.LanguageCode "en-us" -}} <p>Welcome to my blog!</p> {{- end -}} <img src="/uploads/portrait.jpg" alt="Blog Author">

…тогда разметка будет такой (без пустых строк):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

Это может быть полезно для других ситуаций, таких как элементы с display: inline-block , между которыми не должно быть пробелов. И наоборот, если вы хотите убедиться, что каждый элемент находится в отдельной строке разметки (например, в цикле {{ range }} ), вам придется аккуратно расставлять дефисы, чтобы избежать «жадного» обрезания пробелов.

В приведенном выше примере будет выводиться следующее, если код языка сайта соответствует « en-us » (больше нет разрывов строк между тегами p и img ):

 <p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. Контент и данные

Ваш контент хранится в виде файлов Markdown, но вы также можете использовать HTML. Hugo отобразит его правильно при создании вашего сайта.

Ваша домашняя страница будет вызывать макет _default/list.html , который может выглядеть следующим образом:

 {{ define "main" }} {{ partial "list.html" . }} {{ end }}

Основной блок вызывает list.html с контекстом . , он же верхний уровень. list.html может выглядеть так:

 {{ define "main" }} <ol class="articles"> {{ range .Paginator.Pages }} <li> <article> <a href="{{ .URL }}"> <h2>{{ .Title }}</h2> <img src="{{ .Params.featuredimage }}" alt=""> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2 2006" }} </time> </a> </article> </li> {{ end }} </ol> {{ partial "pagination.html" . }} {{ end }}

Теперь у нас есть базовый список наших статей, который вы можете стилизовать по своему желанию! Количество статей на странице определяется в файле конфигурации с paginate = 5 (в TOML).

Вы можете быть совершенно сбиты с толку, как и я, форматированием даты в Hugo. Каждый раз, когда единица сопоставляется с числом (первый месяц, второй день, третий час и т. д.), я понял это гораздо больше, когда увидел визуальное объяснение ниже, которое предоставляет документация по языку Go — что довольно странно, но вроде и умный!

 Jan 2 15:04:05 2006 MST => 1 2 3 4 5 6 -7

Теперь все, что осталось сделать, это отобразить ваш пост на одной странице. Вы можете отредактировать post.html , чтобы настроить макет статьи:

 <article> <header> <h1>{{ .Title }}</h1> <p> Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time> </p> </header> <section> {{ .Content }} </section> </article>

И вот как вы показываете свой контент!

Если вы хотите настроить URL-адрес, обновите файл конфигурации, добавив параметр [permalinks] (TOML), который в этом случае сделает URL-адреса похожими на my-blog.com/post-slug/ :

 [permalinks] posts = ":filename/"

Если вы хотите создать RSS-канал вашего контента (потому что RSS — это прекрасно), добавьте следующее в файл конфигурации вашего сайта (шаблон Saito по умолчанию будет отображать соответствующие теги в файле head.html , если эти параметры будут обнаружены):

 rssLimit = 10 [outputFormats] [outputFormats.RSS] mediatype = "application/rss" baseName = "feed"

Но что, если у вас есть какой-то контент вне поста? Вот где появляются шаблоны данных: вы можете создавать файлы JSON и извлекать их данные, чтобы создать свое меню или элемент на боковой панели. YAML и TOML также являются вариантами, но менее удобочитаемыми для сложных данных (например, вложенных объектов). Вы можете, конечно, установить это в файле конфигурации вашего сайта, но для меня это немного менее удобно и менее щадяще.

Давайте создадим список «крутых сайтов», которые вы, возможно, захотите показать на боковой панели — со ссылкой и меткой для каждого сайта в виде массива в JSON:

 { "coolsites": [ { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" }, { "link": "https://gohugo.io/", "label": "Hugo" }, { "link": "https://netlify.com", "label": "Netlify" } ] }

Вы можете сохранить этот файл в корне репозитория или в корне темы в папке data , например /data/coolsites.json . Затем в вашем частичном sidebar.html вы можете перебрать его с range используя .Site.Data.coolsites :

 <h3>Cool Sites:</h3> <ul> {{ range .Site.Data.coolsites.coolsites }} <li><a href="{{ .link }}">{{ .label }}</a></li> {{ end }} </ul>

Это очень полезно для любых пользовательских данных, которые вы хотите повторить. Я использовал его, чтобы создать список шрифтов Google для своей темы, в каких категориях могут быть сообщения, авторы (с биографией, аватаром и ссылкой на домашнюю страницу), какие меню отображать и в каком порядке. Вы действительно можете многое сделать с этим, и это довольно просто.

Заключительная мысль о данных и тому подобном: все, что вы поместите в свою папку Hugo /static , будет доступно в корневом каталоге ( / ) в live-сборке. То же самое касается папки темы.

11. Развертывание на Netlify

Итак, вы закончили, или, может быть, вы просто хотите увидеть, какую магию использует Netlify? Звучит хорошо для меня, пока ваш локальный сервер Hugo не возвращает ошибку.

Зафиксируйте свои изменения и отправьте их в удаленную ветку разработки ( dev ). Затем перейдите к Netlify и получите доступ к настройкам вашего сайта. Вы увидите опцию «Сборка и развертывание». Здесь нам нужно изменить пару вещей.

1. Во-первых, в разделе «Настройки сборки» убедитесь, что для «Команды сборки» установлено значение hugo , а для параметра «Каталог публикации» установлено значение public (по умолчанию рекомендуется сохранить в файле конфигурации Hugo);
2. Затем в разделе «Контексты развертывания» установите «Производственная ветка» на основную ветку в вашем репозитории. Я также предлагаю установить для параметра «Развертывание ветки» значение «Развертывать только производственную ветку»;
3. Наконец, в разделе «Переменные среды» отредактируйте переменные и нажмите «Новая переменная». Мы собираемся установить среду Hugo на 0,53 с помощью следующей пары: установите ключ на HUGO_VERSION и значение на 0.53 .

Теперь перейдите в удаленный репозиторий и объедините свою ветку разработки с основной веткой: это будет хук, который развернет ваш обновленный блог (это можно настроить, но по умолчанию это приемлемо для меня).

Вернемся к вашей панели управления Netlify. В разделе «Производственные развертывания» вашего сайта должна появиться новая активность. Если все прошло правильно, это должно быть обработано и разрешено на метку «Опубликовано». При нажатии на элемент развертывания откроется обзор с журналом операций. Вверху вы увидите «Предварительное развертывание». Давай, нажимай — ты это заслужил. Оно живое!

12. Настройка пользовательского домена

Наличие URL-адреса my-super-site.netlify.com не в вашем вкусе, и у вас уже есть my-super-site.com ? Я понимаю. Давайте изменим это!

Перейдите к своему регистратору домена и перейдите к настройкам DNS вашего домена. Здесь вам нужно будет создать новую запись: вы можете либо установить запись ALIAS/CNAME, которая указывает на my-super-site.netlify.com , либо установить запись A, которая указывает ваш домен на балансировщик нагрузки Netlify, который 104.198.14.52 на момент написания.

Вы можете найти последнюю информацию в документации Netlify по персональным доменам. IP-адрес балансировщика нагрузки будет указан в разделе настроек DNS в разделе «Ручная настройка DNS для пользовательских доменов root и www».

Когда это будет сделано, перейдите на панель управления вашего сайта в Netlify и нажмите «Настройки домена», где вы увидите «Добавить личный домен». Введите свое доменное имя, чтобы подтвердить его.

Вы также можете управлять своими доменами через панель управления на вкладке «Домены». На этой странице интерфейс кажется менее запутанным, но, возможно, он поможет лучше понять ваши настройки DNS, как это было для меня.

Примечание . Netlify также может сделать все за вас, если вы хотите купить домен через них. Это проще, но это дополнительные расходы.

После того, как вы настроили свой личный домен, в «Настройки домена» прокрутите вниз до раздела «HTTPS» и включите сертификат SSL/TLS. Это может занять несколько минут, но вы получите бесплатный сертификат: теперь ваш домен работает на HTTPS.

13. Редактирование контента в Netlify CMS

Если вы хотите редактировать свои статьи, загружать изображения и изменять настройки своего блога, как вы делаете это в внутреннем интерфейсе WordPress, вы можете использовать Netlify CMS, для которой доступно довольно хорошее руководство. Это один файл, который будет обрабатывать все за вас (и он не зависит от генератора: он будет работать с Jekyll, Eleventy и т. д.).

Вам просто нужно загрузить два файла в папку:

• CMS (один файл HTML);
• файл конфигурации (файл YAML).

Последний будет содержать все настройки вашего конкретного сайта.

Перейдите в корневую папку /static вашего Hugo и создайте новую папку, доступ к которой вы получите через my-super-site.com/FOLDER_NAME (я назову своего admin ). Внутри этой admin папки создайте файл index.html , скопировав разметку, предоставленную Netlify CMS:

 <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>

Другой файл, который вам нужно создать, — это файл конфигурации: config.yml . Это позволит вам определить настройки вашего сайта (имя, URL-адрес и т. д.), чтобы вы могли настроить, что должно содержать вступление ваших сообщений, а также то, как ваши файлы данных (если они есть) должны быть редактируемыми. Его немного сложнее настроить, но это не значит, что это непросто.

Если вы используете GitHub или GitLab, начните файл config.yml с:

 backend: name: git-gateway branch: dev # Branch to update (optional; defaults to master)

Если вы используете Bitbucket, все немного по-другому:

 backend: name: bitbucket repo: your-username/your-hugorepo branch: dev # Branch to update (optional; defaults to master)

Затем для наших загрузок нам нужно будет указать CMS, где их хранить:

 media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

Когда вы создаете новый пост, CMS сгенерирует слаг для имени файла, который вы можете настроить с помощью трех параметров:

slug: encoding: "ascii" # You can also use "unicode" for non-Latin clean_accents: true # Removes diacritics from characters like e or a sanitize_replacement: "-" # Replace unsafe characters with this string

Наконец, вам нужно определить, как структурированы данные в ваших сообщениях. Я также определю, как структурирован файл данных coolsites — на случай, если я захочу добавить в список еще один сайт. Они устанавливаются с помощью объекта collections , который, безусловно, будет самым подробным, наряду с несколькими хорошими опциями, о которых вы можете прочитать здесь.

 collections: - name: "articles" # Used in routes, eg, /admin/collections/blog label: "Articles" # Used in the Netlify CMS user interface folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo create: true # Allow users to create new documents in this collection slug: "{{slug}}" # Filename template, eg, post-title.md fields: # The fields for each document, usually in front matter - {label: "Title", name: "title", widget: "string", required: true} - {label: "Draft", name: "draft", widget: "boolean", default: true } - {label: "Type", name: "type", widget: "hidden", default: "post" } - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"} - {label: "Featured Image", name: "featuredimage", widget: "image"} - {label: "Author", name: "author", widget: "string"} - {label: "Body", name: "body", widget: "markdown"} - name: 'coolsites' label: 'Cool Sites' file: 'data/coolsites.json' description: 'Website to check out' fields: - name: coolsites label: Sites label_singular: 'Site' widget: list fields: - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' } - { label: 'Site Name', name: 'label', widget: 'string' }

Примечание . Вы можете узнать больше о том, как настраивать отдельные поля, в документации по виджетам Netlify CMS, в которой рассказывается о каждом типе виджетов и о том, как их использовать, что особенно полезно для форматов даты.

Аутентификация

Последнее, что нам нужно сделать, это обеспечить доступ к серверной части только авторизованным пользователям! Проще всего это сделать с помощью аутентификации вашего провайдера Git.

Перейдите на свой сайт Netlify и перейдите на вкладку «Настройки». Затем перейдите в «Контроль доступа», который является последней ссылкой в ​​меню с левой стороны. Здесь вы можете настроить OAuth для запуска через GitHub, GitLab или Bitbucket, указав ключ и секретное значение, определенные для вашей учетной записи пользователя (не в репозитории). Вы захотите использовать того же поставщика Git, что и тот, на котором сохранено ваше репо.

Гитхаб

Перейдите на страницу «Настройки» на GitHub (нажмите на свой аватар, чтобы открыть меню) и войдите в «Настройки разработчика». Нажмите «Зарегистрировать новое приложение» и укажите необходимые значения:

• имя, например «Netlify CMS для моего суперблога»;
• URL-адрес домашней страницы, ссылка на ваш сайт Netlify;
• описание, если хотите;
• URL-адрес обратного вызова приложения, который должен быть « https://api.netlify.com/auth/done ».

Сохраните, и вы увидите свой идентификатор клиента и секрет клиента. Предоставьте их системе управления доступом Netlify.

GitLab

Нажмите на свой аватар, чтобы перейти на страницу настроек, и нажмите «Приложения» в меню «Настройки пользователя» слева. Вы увидите форму для добавления нового приложения. Предоставьте следующую информацию:

• имя, например «Netlify CMS для моего суперблога»;
• URI перенаправления, который должен быть « https://api.netlify.com/auth/done »;
• области, которые должны быть проверены:
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

Сохранение вашего приложения даст вам ваш идентификатор приложения и секрет, которые вы теперь можете ввести в контроль доступа Netlify.

Битбакет

Перейдите к настройкам своей учетной записи (щелкните свой аватар, затем «Настройки Bitbucket»). В разделе «Управление доступом» нажмите «OAth». В разделе «Потребители OAuth» нажмите «Добавить потребителя». Вы можете оставить большинство параметров со значениями по умолчанию, кроме следующих:

• имя, например «Netlify CMS для моего суперблога»;
• URL-адрес обратного вызова, который должен быть « https://api.netlify.com/auth/done »;
• разрешения, которые должны быть проверены:
  • Учетная запись: электронная почта, чтение, запись
  • Репозитории: чтение, запись, администрирование
  • Pull Requests: чтение, запись
  • Вебхуки: чтение и запись

После сохранения вы можете получить доступ к своему ключу и секрету, которые вы затем можете предоставить обратно в Netlify Access Control.

После предоставления токенов перейдите в Netlify и найдите Настройки сайта. Перейдите в «Идентификация» и включите эту функцию. Теперь вы можете добавить внешнего поставщика: выберите своего поставщика Git и нажмите «Включить».

Если вам нужны дополнительные сведения, у Netlify CMS есть руководство по аутентификации, которое вы можете прочитать.

Теперь вы можете получить доступ к серверной части вашего сайта Netlify и редактировать контент. Каждое редактирование — это фиксация вашего репозитория в ветке, указанной в вашем файле конфигурации. Если вы сохранили main ветку в качестве цели для Netlify CMS, при каждом сохранении будет запускаться новая сборка. Удобнее, но не так чисто с «промежуточными состояниями».

Сохранение в ветке dev позволяет вам лучше контролировать, когда вы хотите запустить новую сборку. Это особенно важно, если в вашем блоге много контента и требуется больше времени для его создания. В любом случае будет работать; это просто вопрос того, как вы хотите вести свой блог .

Также обратите внимание, что Git LFS — это то, что вы установили локально, поэтому изображения, загруженные через Netlify CMS, будут «обычными». Если вы загружаете свою удаленную ветку локально, образы должны быть преобразованы в LFS, которые вы затем можете зафиксировать и отправить в свою удаленную ветку. Кроме того, Netlify CMS в настоящее время не поддерживает LFS, поэтому изображения не будут отображаться в CMS, но они будут отображаться в вашей окончательной сборке.

Рекомендуемая литература : Обзор генераторов статических сайтов: Jekyll, Middleman, Roots, Hugo

Заключение

Какая поездка! В этом руководстве вы узнали, как экспортировать свою запись WordPress в файлы Markdown, создать новый репозиторий, настроить Git LFS, разместить сайт на Netlify, создать сайт Hugo, создать собственную тему и редактировать контент с помощью Netlify CMS. . Не так уж плохо!

Что дальше? Что ж, вы можете поэкспериментировать со своей настройкой Hugo и узнать больше о различных инструментах, которые предлагает Hugo — многие из них я не упомянул для краткости.

Проводить исследования! Повеселись! Блог!

Дополнительные ресурсы

• Документация Хьюго
  • Установка
  • Быстрый старт
  • Конфигурация
  • Шаблоны
  • Таксономии
  • Шорткоды
  • Хьюго на Netlify
• Сетевая документация
  • Пользовательские домены
  • Управляемый DNS
  • netlify.toml Сценарии развертывания
• Документация Netlify CMS
  • Виджеты
• Гит ЛФС