Как использовать генератор статических сайтов Hugo в Linux
Гайд в разделе Linux "Как использовать генератор статических сайтов Hugo в Linux" содержит информацию, советы и подсказки, которые помогут изучить самые важные моменты и тонкости вопроса….
Фатмавати Ахмад Дзэнури / Shutterstock
Статические веб-сайты легко создавать и невероятно быстро использовать. Если вы научитесь использовать Hugo, вы сможете создавать статические веб-сайты на основе тем в Linux. Создавать веб-сайты снова весело!
Генератор веб-сайтов Hugo
Статический сайт – это сайт, который не создает и не изменяет веб-страницы на лету. Нет фоновой базы данных, обработки электронной коммерции или PHP. Все веб-страницы полностью построены заранее и могут быть обслужены посетителями очень быстро.
Но это не значит, что статический сайт должен быть утомительным. Они могут использовать все, что предоставляет HTML, а также каскадные таблицы стилей (CSS) и JavaScript. У них также могут быть такие вещи, как карусели изображений и веб-страницы, скользящие по фоновым изображениям.
Генератор сайтов Hugo работает с шаблоном и любым созданным вами контентом для создания готового веб-сайта. Затем вы можете разместить его на платформе хостинга и сразу получить живой веб-сайт.
Hugo использует уценку для страниц и записей в блогах, которые вы создаете. Markdown – это почти самый простой язык разметки, который упрощает обслуживание вашего сайта.
Файлы конфигурации Hugo находятся на очевидном, минимальном языке Тома (TOML) и YAML Ain’t Markup Language (YAML), которые являются так же просто. Еще один бонус – Hugo работает невероятно быстро – некоторые сайты загружаются менее чем за секунду. В нем есть много шаблонов, из которых вы можете выбирать, и постоянно добавляются новые, поэтому начать работу легко. Просто выберите шаблон и добавьте контент, который сделает его вашим.
Hugo также действует как крошечный веб-сервер прямо на вашем компьютере. Вы можете видеть живую версию своего веб-сайта во время его проектирования и создания, а также всякий раз, когда вы добавляете новую публикацию. Он также автоматически обновляется каждый раз, когда вы «Сохраняете» в редакторе, поэтому вы можете сразу увидеть эффект ваших изменений в браузере.
Хостинг вашего сайта
Когда дело доходит до хостинга вашего статического сайта, вы избалованы выбором. Большинство компаний предлагают бесплатный хостинг для личного использования или использования с открытым исходным кодом. Конечно, вы также можете выбрать обычную веб-хостинговую компанию, например любую из следующих:
- Aerobatic
- Amazon S3
- Azure
- CloudFront
- DreamHost
- Firebase
- GitHub Pages
- GoDaddy
- Google Cloud Storage
- Heroku
- GitLab Pages
- Netlify
- Rackspace
- Surge
Установка Hugo
Наряду с Hugo вам необходимо установить Git. Git уже был установлен в Fedora 32 и Manjaro 20.0.1. В Ubuntu 20.04 (Focal Fossa) он был добавлен автоматически как зависимый от Hugo.
Чтобы установить Hugo в Ubuntu, используйте эту команду:
sudo apt-get install hugo
В Fedora вам нужно ввести:
sudo dnf install hugo
Команда для Manjaro:
sudo pacman -Syu hugo
Создание веб-сайта с Hugo
Когда мы просим Hugo создать новый сайт, он создает для нас набор каталогов. Они будут содержать различные элементы нашего веб-сайта. Однако это не последний веб-сайт, который будет загружен на вашу хостинговую платформу. Эти каталоги будут содержать тему, файлы конфигурации, содержимое и изображения, которые Хьюго будет использовать в качестве входных данных, когда мы попросим его создать настоящий веб-сайт.
Это похоже на разницу между исходным кодом и скомпилированной программой. Исходный код – это то, что компилятор использует для создания конечного продукта. Точно так же Хьюго берет содержимое этих каталогов и создает рабочий веб-сайт.
Команда, которую мы собираемся запустить, создаст каталог с тем же именем, что и сайт, который вы хотите создать. Этот каталог будет создан в каталоге, в котором вы запускаете команду.
Итак, перейдите в каталог, в котором вы хотите создать свой веб-сайт. Мы используем наш домашний каталог, поэтому вводим следующее:
hugo new site geek-demo
Это создает каталог geek-demo. Мы вводим следующее, чтобы переключиться в этот каталог и запустить ls:
cd geek-demo / ls
Мы видим файл конфигурации «config.toml» и каталоги которые были созданы. Тем не менее, они практически пусты, поскольку это всего лишь строительные леса для веб-сайта.
Инициализация Git и добавление темы
Нам нужно добавить тему, чтобы Хьюго знал, как должен выглядеть готовый сайт. Для этого нам нужно инициализировать Git. В корневой папке вашего сайта (той, которая содержит файл «config.toml») запустите эту команду:
git init
Есть сотни тем вы можете выбирать из них, и у каждого из них есть веб-страница, описывающая его. Вы можете запустить демонстрацию темы и узнать, какая команда предназначена для ее загрузки. Мы воспользуемся тем, который называется Meghna.
Чтобы включить эту тему на наш веб-сайт, нам нужно переключиться в нашу папку «Темы» и запустить команду git clone:
cd themes git clone https: // github.com/themefisher/meghna-hugo.git
Git отображает некоторые сообщения по мере выполнения. Когда все будет готово, мы используем ls, чтобы увидеть каталог, содержащий тему:
ls
Темы Hugo включают рабочий пример веб-сайта. Вы должны скопировать этот сайт по умолчанию в каталоги вашего сайта.
Сначала вернитесь в корневой каталог вашего сайта. Мы используем параметр -r (рекурсивный) cp для включения подкаталогов и параметр -f (принудительно) для перезаписи любых существующих файлов:
cd .. cp themes / meghna-hugo / exampleSite / * -rf.
Запуск вашего сайта локально
Мы сделали достаточно, чтобы запустить новый сайт локально. Он по-прежнему будет содержать замещающий текст и изображения, но это просто косметические изменения. Давайте сначала проверим, что технические детали работают.
Мы говорим Hugo запустить его веб-сервер и использовать параметр -D (draft), чтобы убедиться, что все файлы, которые могут быть помечены как «draft», включены в веб-сайт:
hugo server -D
На изображении ниже показан результат нашей команды hugo.
Нам сказали, что Хьюго построил сайт за 142 миллисекунды (мы же сказали, что это было быстро, верно?). Он также говорит нам нажать Ctrl + C, чтобы остановить сервер, но пока оставьте его работающим.
Откройте браузер и перейдите по адресу localhost: 1313, чтобы увидеть свой веб-сайт.
Изменение содержимого сайта по умолчанию
Пока он работает таким образом, Хьюго обслуживает веб-страницы по памяти. Он не создал веб-сайт на жестком диске, а создал его рабочую копию в оперативной памяти. Тем не менее, он отслеживает файлы и изображения на жестком диске. Если какой-либо из них будет изменен, он обновит сайт в вашем браузере – вам даже не нужно нажимать Ctrl + F5.
Откройте другое окно терминала и перейдите в корневой каталог вашего сайта. Откройте файл «config.toml» в редакторе. Измените «baseURL» на домен, на котором будет размещен ваш веб-сайт, и измените «заголовок» на имя вашего веб-сайта. Сохраните изменения, но оставьте редактор открытым.
Хьюго обнаруживает, что в файл «config.toml» были внесены изменения, поэтому он их читает и перестраивает сайт и обновляет браузер.
Теперь вы должны увидеть имя, которое вы выбрали для своего сайта, на вкладке браузера. Получение немедленной визуальной обратной связи о сохраненных изменениях значительно ускоряет процесс настройки веб-сайта.
Все темы разные, но мы обнаружили, что те, которым мы привыкли, довольно просты. Разные разделы веб-сайта имеют очевидные названия, как и настройки в каждом разделе, поэтому всегда очевидно, что вы меняете.
И, опять же, как только вы сохраните изменение, вы увидите, что вы переделал в вашем браузере. Если вам это не нравится, просто отмените изменение и повторно сохраните.
Различные файлы конфигурации, управляющие веб-сайтом, предназначены для одного задания и имеют значимые названия. Отследить их несложно, так как в каталоге не так много мест, где они могут быть. Обычно они находятся в папке «Data».
Поскольку мы используем двуязычный шаблон, наши файлы конфигурации на английском языке находятся в подкаталоге «En».
Если вы откроете папку Data & gt, En & gt, баннер.yml в редакторе, вы увидите набор настроек, которые управляют областью баннера веб-сайта.
Когда вы измените «Заголовок» и « Контент », вы изменяете текст на странице баннера.
Мы также изменили настройку« Ярлык », поэтому текст кнопки гласит« Узнать больше ». Для своего сайта вы, вероятно, тоже захотите изменить изображение.
Как только вы сохраните изменения, вы увидите их в своем браузере.
Изменение других элементов веб-сайта
Вы можете изменить все остальные элементы аналогичным образом. Просто найдите соответствующий файл конфигурации и измените настройки и текст в соответствии со своими потребностями.
Вы также захотите изменить изображения. Образ по умолчанию будет указан в файле конфигурации. Вы можете легко найти и взглянуть на исходное изображение, чтобы узнать его размеры.
Изображения помещаются в каталог «Статические & gt, изображения» с подкаталогами для различных разделов веб-сайта. Поместите любые значки и логотипы прямо в каталог «Статические & gt, изображения».
Добавление нового содержания блога
До сих пор мы пытались изменить то, что уже есть. Но как нам добавить новую запись в блог? Хьюго использует концепцию под названием «Архетипы» для создания нового контента. Если мы не создадим архетип для наших записей в блоге, файл по умолчанию будет создаваться для нас каждый раз, когда мы просим Хьюго создать новую запись в блоге.
Это нормально, но с архетипом мы можем сэкономьте немного усилий и убедитесь, что для нас указано как можно больше основных материалов.
В этой теме записи блога расположены в разделах Содержание & gt, Русский язык & gt, Блог. Если мы откроем существующую запись в блоге в редакторе – например, «simple-blog-post-1.md» – мы сможем увидеть главный вопрос.
Нам нужно скопировать этот раздел, отредактировать текущие записи, чтобы его можно было использовать в качестве шаблона архетипа, а затем сохранить его в папке «Архетипы». Если мы назовем его «blog.md», он будет автоматически использоваться в качестве шаблона для новых записей блога.
В gedit мы можем сделать это следующим образом:
gedit content / english / blog / simple-blog-post-1.md
Выделите верхний раздел, включая две пунктирные линии, а затем нажмите Ctrl + C, чтобы скопировать его. Нажмите Ctrl + N, чтобы создать новый файл, а затем Ctrl + V, чтобы вставить то, что вы скопировали.
Теперь внесите следующие изменения и обязательно оставьте пробел после двоеточия (:) в каждой строке:
- Заголовок: измените это на “{{replace .Name” – “” “| title}}” (включите кавычки). Заголовок для каждого нового сообщения в блоге будет вставлен автоматически. Он формируется из имени файла, которое вы передаете команде hugo new, как мы увидим.
- Дата: измените это на {{.Date}}. Дата и время создания блога будут введены автоматически.
- Image_webp: это путь к изображению заголовка блога в формате webp. Если тема не может найти его, она будет использовать изображение из следующей строки.
- image: это путь к изображению заголовка блога в формате JPEG. Вы также можете оставить их, указывая на изображения по умолчанию. Тогда все сообщения в блоге будут иметь временное изображение, даже до того, как вы найдете, измените размер или сохраните пользовательское изображение. Как только вы это сделаете, вы можете легко отредактировать имя файла, чтобы оно соответствовало имени вашего пользовательского изображения.
- Автор: измените это на свое имя.
- Описание: вы вводите короткое описание каждого поста здесь. Если вы измените это значение на пустую строку (“”), вы можете вводить описание для каждого нового блога, не редактируя старый текст.
Сохраните этот новый файл как «archetypes / blog.md», а затем закройте gedit. Теперь Хьюго будет использовать этот новый архетип всякий раз, когда вы захотите создать новую запись в блоге.
Обратите внимание, что наш файл должен иметь расширение «.md», потому что мы будем использовать разметку для записи нашей записи в блоге:
hugo new blog / first-new-blog-post-on-this-site.md
Теперь мы хотим открыть нашу новую запись в блоге в редакторе:
gedit content / english / blog / first-new-blog-post-on-this-site.md
Наша новая запись в блоге открывается в gedit.
Для нас были добавлены все следующие части основного материала:
- Название: Это было выведено из файла имя. Если требуется какая-либо настройка, вы можете отредактировать его здесь.
- Время и дата: они добавляются автоматически.
- Изображение по умолчанию: вы, вероятно, захотите найти подходящее, лицензионное- бесплатное изображение. Перетащите его в Статический & gt, Изображения & gt, Блог. Здесь вам нужно будет ввести фактическое имя файла изображения.
- Автор: ваше имя добавляется автоматически.
- Описание: это было отредактировано.
Напишите блог, используя разметку и используйте стандартную разметку для заголовков – жирным шрифтом, курсивом, изображениями, ссылками и т. д. Каждый раз, когда вы сохраняете файл, Хьюго перестраивает веб-сайт и обновляет его в вашем браузере.
На изображении ниже показано, как наша новая запись в блоге отображается на домашней странице.
На изображении ниже показано, как новая запись в блоге выглядит на отдельной странице.
После того, как вы закончите писать сообщение в блоге, сохраните изменения, а затем закройте редактор. Вы также можете закрыть браузер, потому что мы собираемся остановить сервер Hugo.
В окне терминала, в котором запущен сервер Hugo, нажмите Ctrl + C.
Создание веб-сайта
В корневом каталоге вашего веб-сайта введите следующую команду для создания вашего веб-сайта:
hugo
Hugo создает веб-сайт и перечисляет количество страниц и других созданных компонентов. На создание нашего сайта ушло 134 миллисекунды.
Хьюго создает новый каталог под названием «Public» в корневом каталоге вашего веб-сайта. В каталоге «Public» вы найдете все файлы, которые нужно перенести на платформу хостинга.
Обратите внимание, что вы должны загружать файлы и каталоги из каталога «Public» на вашу хостинговую платформу, а не в сам каталог «Public».
Теперь вы знаете основы
Каждая тема потребует небольшого изучения, чтобы понять, как заставить ее выглядеть так, как вы хотите, но это самое интересное! Учитывая способность Хьюго отображать изменения немедленно в окне браузера, ничего не занимает много времени.
Вы, вероятно, обнаружите, что написание текста, поиск и обрезка изображений – это части процесса, которые занимают больше всего времени.
Сайт документации Hugo также полезен, но обширен. Надеюсь, этого базового пошагового руководства будет достаточно, чтобы вы начали.
Если вы используете Git и Github, GitLab или BitBucket, для этих платформ также доступны интеграции. Они следят за вашим удаленным репозиторием Hugo и перестраивают ваш действующий сайт всякий раз, когда вы вносите в него изменения.