Как установить и использовать Hugo, генератор статических сайтов, в Ubuntu 14.04

Вступление

Hugo - это быстрый и простой в использовании генератор статических сайтов, написанный на Go и доступный на нескольких платформах. Генераторы статических сайтов - отличный выбор для блогов и другого контента, для которого не требуется динамический контент, извлекаемый из базы данных. Такие варианты, как Hugo, позволяют упростить ваш стек, писать в удобной для пользователя разметке и обрабатывать обновления и пользовательский контент без необходимости использования полного решения для управления контентом.

В этом руководстве мы расскажем, как установить и использовать Hugo на сервере Ubuntu 14.04. Это позволит нам настраивать статический сайт, создавать контент и публиковать на одном сервере или развертывать в производственном месте.

Предпосылки

Чтобы следовать этому руководству, вам потребуется доступ к серверу Ubuntu 14.04. На этом сервере у вас должен быть пользователь без полномочий root с правамиsudo, настроенными для выполнения административных задач. Вы можете узнать, как создать пользователяsudo, следуя нашемуUbuntu 14.04 initial server setup guide.

Установка последней версии Hugo

Hugo недоступен в стандартных репозиториях Ubuntu. Однако пакеты доступны на GitHub для различных архитектур и дистрибутивов.

Найди свою системную архитектуру

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

uname -i

Если вы видите следующее, вы запускаете установку Ubuntu64-bit:

Outputx86_64

Если вместо этого ваш результат выглядит так, это означает, что вы работаете с версией Ubuntu32-bit:

Outputi686

Мы будем использовать эту информацию ниже.

Загрузите и установите пакет Hugo

ПосетитеHugo releases page, чтобы найти последнюю стабильную версию Hugo (ближайшую к началу). Если вы прокрутите вниз текст объявления функции, вы должны найти раздел под названием «Загрузки».

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

Если вы находитесь на64-bit version of Ubuntu, щелкните правой кнопкой мыши ссылку, оканчивающуюся наamd64.deb, и скопируйте расположение ссылки.
Если вы находитесь на32-bit version of Ubuntu, щелкните правой кнопкой мыши ссылку, оканчивающуюся наi386.deb, и скопируйте расположение ссылки.

На вашем сервере, войдя в систему как пользователь с правамиsudo, перейдите в каталог, в котором у вас есть разрешение на запись. Используйте командуwget и вставьте ссылку, которую вы скопировали, чтобы загрузить Hugo:

cd ~
wget https://github.com/spf13/hugo/releases/download/v0.14/hugo_0.14_amd64.deb

Теперь вы можете установить пакет сdpkg, набрав:

sudo dpkg -i hugo*.deb

Проверьте, что установка прошла успешно, попросив Хьюго напечатать его версию программного обеспечения:

hugo version

Хьюго должен напечатать свою текущую версию программного обеспечения:

OutputHugo Static Site Generator v0.14 BuildDate: 2015-05-25T21:29:16-04:00

Установка вспомогательного программного обеспечения Hugo

Главное приложение Hugo теперь должно быть установлено. Тем не менее, есть несколько дополнительных программ, которые мы должны установить, чтобы помочь нам начать работу.

Установите Hugo Themes

Основной пакет Hugo не содержит никаких тем. Темы Hugo определяют, как фактический контент сайта отображается для пользователей. Самый простой способ получить темы Hugo - это клонировать репозиторий Hugo themesgit, который предоставляет множество предварительно настроенных тем. Для этого процесса нам нужно будет установитьgit.

Мы можем найтиgit в репозиториях Ubuntu по умолчанию. Обновите локальный индекс пакета, а затем установитеgit, набрав:

sudo apt-get update
sudo apt-get install git

Далее мы можем клонировать репозиторий тем Hugo. Репозиторий на GitHub организован с каждой отдельной темой, включенной в подмодуль.

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

Клонируйте репозиторий тем в свой домашний каталог, набрав:

git clone --recursive https://github.com/spf13/hugoThemes ~/themes

Установите подсветку синтаксиса Pygments

Мы также установим часть программного обеспечения Python под названием Pygments. Это обеспечивает логику подсветки синтаксиса на стороне сервера для любых блоков кода, которые будут включены в наши отображаемые страницы. Мы можем легко установить Pygments с помощьюpip, менеджера пакетов Python.

Мы можем получитьpip из репозиториев по умолчанию, набрав:

sudo apt-get install python-pip

После завершенияapt мы можем использоватьpip для установкиPygments, набрав:

sudo pip install Pygments

Это позволит нам включать выделенные в синтаксисе блоки кода, поддерживающие более 300 языков, в наш контент, если мы захотим. Вы можете узнать больше оproject’s page.

Включить автозаполнение Hugo Bash

Последнее, что мы сделаем перед тем, как приступить к работе над нашим первым сайтом, - это сгенерировать функции автозаполнения Hugobash. Мы можем сделать это, набрав:

sudo hugo gen autocomplete

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

. /etc/bash_completion

Теперь, если вы наберетеhugo, а затем несколько нажатий клавиши TAB, вы увидите команды, о которых знает Хьюго:

hugo [TAB][TAB][TAB]

Outputbenchmark        config           gen  help             new              undraft
check            convert          gendoc           list             server           version

Создание вашего первого сайта

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

Мы можем создать новый сайт в вашем домашнем каталоге, набрав:

hugo new site ~/my-website

Перейдите на свой новый сайт Hugo и осмотрите:

cd ~/my-website
ls -F

Вы увидите структуру каталогов и основной файл конфигурации, используемый для создания сайта Hugo:

Outputarchetypes/  config.toml  content/  data/  layouts/  public/  static/

Давайте продолжим и свяжем каталог~/themes, который мы клонировали, на наш новый сайт. Чтобы сделать эту ссылку более гибкой для возможного развертывания, мы создадим относительную символическую ссылку. Если вы развернете свой репозиторий Hugo на удаленном сервере, вам просто нужно будет снова клонировать каталог themes в родительский каталог Hugo:

ln -s ../themes .
ls -l

Outputtotal 28
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 archetypes
-rw-rw-r--  1 demouser demouser  210 Nov  5 11:55 config.toml
drwxrwxr-x  3 demouser demouser 4096 Nov  5 11:38 content
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 data
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 layouts
drwxrwxr-x 13 demouser demouser 4096 Nov  5 11:25 public
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 static
lrwxrwxrwx  1 demouser demouser    9 Nov  5 14:21 themes -> ../themes

Как вы можете видеть выше, каталог тем в нашем текущем каталоге на самом деле является просто ссылкой на репозиторий тем, который мы клонировали в наш домашний каталог.

Передача вашего сайта в систему управления версиями

Прежде чем мы настроим наши параметры и создадим некоторый контент, мы должны превратить наш новый сайт в репозиторий Git.

Убедитесь, что вы находитесь в каталоге своего сайта, и инициализируйте новый репозиторийget, набрав:

cd ~/my-website
git init

OutputInitialized empty Git repository in /home/demouser/my-website/.git/

Затем настройте базовые элементы конфигурацииgit, необходимые для фиксации кода в репозитории. Самый простой способ сделать это - использовать командуgit config --global. Нам нужно указать свое имя и адрес электронной почты, чтобыgit мог правильно записывать нашу информацию в качестве коммиттера:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

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

Мы можем добавить скрытый файл.gitkeep в каждый из наших каталогов верхнего уровня (кроме фактического скрытого каталога.git), набрав:

for DIR in `ls -p | grep /`; do touch ${DIR}.gitkeep; done

Мы видим, что скрытый файл.gitkeep был добавлен во все наши каталоги верхнего уровня, набрав:

find . -name .gitkeep

Output./data/.gitkeep
./layouts/.gitkeep
./archetypes/.gitkeep
./static/.gitkeep
./content/.gitkeep

Мы также хотим убедиться, что отображаемое содержимое нашего сайтаnot добавлено в систему управления версиями. Фактические ресурсы HTML, JavaScript и CSS должны генерироваться заново при каждом развертывании, а не храниться в самом контроле исходного кода. Мы можем указатьgit игнорировать каталогpublic, в котором будет храниться сгенерированный контент, добавив это местоположение в файл.gitignore:

echo "public" >> .gitignore

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

git add .
git commit -m 'Initial commit, pre-configuration.'

Настройка начальной конфигурации для вашего сайта

Давайте настроим основной файл конфигурации Hugo, чтобы настроить способ, которым Hugo будет создавать наш сайт.

Откройте файлconfig.toml в своем редакторе:

nano config.toml

Внутри вы найдете несколько пунктов, которые нам нужно настроить:

~/my-website/config.toml

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

Как указывает суффикс файла, этот файл записывается с использованиемTOML language. Это простой язык конфигурации, который в основном использует ключи, значения и разделы.

Первым элементом, который мы должны изменить, является элементbaseurl. Это используется для создания URL-адресов при создании сайта. Измените это, чтобы указать доменное имя или публичный IP-адрес вашего сервера. Вы также должны отредактировать значение, присвоенноеtitle. Это используется для установки заголовка вкладки или окна для вашего сайта и используется на странице для определенных тем:

~/my-website/config.toml

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"

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

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

~/my-website/config.toml

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"
newContentEditor = "nano"
theme = "nofancy"
pygmentsStyle = "native"

Вы можете найти дополнительную информацию о доступных настройках вthis page. Пока сохраните и закройте файл.

Давайте передадим наши изменения конфигурации, прежде чем продолжить:

git add .
git commit -m 'Initial configuration complete'

Создание новых страниц для вашего сайта

Теперь мы готовы начать создавать контент сайта. Содержимое в Hugo написано с использованием простых в использовании языков разметки. Метаданные страницы предоставляются в специальном разделе на каждой странице, который называется «передний план», с использованием тех же синтаксисов конфигурации, которые доступны для основного файла конфигурации.

Мы можем сгенерировать новый контент с Hugo, используя командуhugo new, за которой следует путь к контенту, который мы хотим создать. По умолчанию контент Hugo записан в Markdown. Чтобы Hugo мог правильно сгенерировать HTML с наших страниц Markdown, нам нужно создать файлы с расширением.md.

Создать страницу «О нас»

Страницы, которые будут связаны с главной страницей, и относительные пути, которые понадобятся вашим страницам, в значительной степени определяются вашей темой. Просмотрите страницу темы на GitHub, чтобы узнать больше о том, что он ожидает. Наша тема «nofancy» имеет ссылку на страницу «о». Давайте начнем с создания этой страницы:

hugo new about.md

В каталогеcontent будет создана новая страница с именемabout.md. Поскольку мы установили параметрnewContentEditor в нашем файле конфигурации, файл должен автоматически открываться в предпочитаемом вами редакторе. Это должно выглядеть так, чтобы начать:

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "about"

+++

Параметры и метаданные для страницы конфигурируются в «главном разделе» страницы, раздел отмечен с обеих сторон линиями «+». Основная тема, включенная по умолчанию, часто определяется темой, которую вы используете.

Наша текущая тема включает в себя три элемента в начале сгенерированных страниц. Вы можете настроить их или добавить дополнительные элементы по своему усмотрению. Общие переменные, доступные Хьюго, можно найти вhere. Выбранная вами тема может также использовать свои собственные переменные. Ознакомьтесь с README вашей темы вHugo theme repository, чтобы получить подробные сведения о вашей теме.

Некоторые важные общие вопросы переднего плана:

date: дата, которая должна использоваться для сортировки вашего контента
description: описание содержимого страницы
draft: пометит страницу как не готовую к публикации, если установлено значение true
slug: установите это, если вы хотите указать альтернативное имя URL-адреса для содержимого.
publishdate: можно установить дату в будущем, если вы хотите создать страницу только после определенной даты
title: заголовок вашей страницы

А пока давайте просто отредактируем заголовок нашей страницы «О нас»:

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"

+++

Теперь мы можем добавить текст Markdown под нижним знаком «+». Это будет переведено в основной текст HTML. Мы добавим несколько абзацев, заголовок и картинку под лицензиейCreative Commons, доступную изEva Hejda, которая нам понравилась:

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"

+++

Hello and welcome to my site!

## A Bit About Me

I like alpacas and I'm a fan of static sites.

![Great alpaca picture](https://upload.wikimedia.org/wikipedia/commons/c/c4/Alpaka_33444.jpg)

Когда вы закончите, сохраните и закройте файл.

Создайте свой первый пост

Мы создали страницуabout.md в корне нашего каталога содержимого, потому что это то место, где наша тема ожидает. Однако большую часть наших сообщений лучше всего хранить в подкаталогеpost (вместо этого некоторые темы ищут сообщения в подкаталогеposts).

Давайте создадим первый пост в каталоге «posts». Hugo автоматически создаст все необходимые каталоги при создании страниц:

hugo new post/My-First-Post.md

Если мы используем тире в имени файла Markdown, они будут преобразованы в пробелы для автоматически заполненного заголовка:

~/my-website/content/post/My-First-Post.md

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"

+++

Заполните все недостающие метаданные и добавьте некоторую уценку на страницу. Мы добавим здесь пример кода, чтобы вы могли видеть выделение кода, предоставляемое инструментом Pygments. Для этого вместо того, чтобы использовать обычные тройные обратные пометки Markdown для включения блока кода, мы помещаем код между двумя выделенными тегами, которые выглядят так:

{{< highlight language >}}

code_goes_here

{{< /highlight >}}

Это применит стиль Pygment к коду внутри. Имейте в виду, что некоторые темы включают CSS-файлы, которые будут переопределять выбор стиля Pygment. К тегу<pre> часто применяется дополнительный стиль, который может переопределить цвет фона для темы Pygment. Однако наша конкретная тема не страдает от этой проблемы.

На нашей странице готовый контент будет выглядеть так:

~/my-website/content/post/My-First-Post.md

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"

+++

This is my first post on the site.  I hope that you like it!

## Welcome Function

Here is a little Python function to welcome you:

{{< highlight python >}}
def hello_world():
    print "Hello there!"
{{< /highlight >}}

Сохраните и закройте файл, когда вы закончите. Если вам понадобится отредактировать эти страницы позже, вы можете найти их в каталогеcontent вашего сайта Hugo.

Давайте зафиксируем наши новые страницы в нашем репозиторииgit:

git add .
git commit -m 'First pages of our site'

Создание и обслуживание сайта

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

Чтобы создать свой сайт, вы можете просто набрать:

hugo

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

Note

[.note] # Hugo не очищает выходной каталог после каждой сборки. Это означает, что существует вероятность того, что устаревшее содержимое останется в каталогеpublic из предыдущей сборки. Разработчики Hugo рекомендуют удалять каталогpublic после каждой сборки (особенно перед переходом в рабочую среду), чтобы весь контент можно было воссоздать заново.
#

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

Чтобы сделать ваши страницы доступными на сервере Hugo, используйте командуhugo server. Это отобразит ваши страницы (нет необходимости заранее запускать командуhugo), а затем запустит веб-сервер.

Мы будем использовать параметр--bind, чтобы указать, что мы хотим сделать сайт доступным для всех интерфейсов (если вы установили Hugo локально, вы можете удалить это). Нам также нужно включить опцию--bindUrl. Мы установили это в нашем файле конфигурации, но он не обнаруживается сервером в текущей версии Hugo. Установите это для доменного имени вашего сайта или IP-адреса:

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/

Если вы установитеdraft = true на любой из ваших страниц или установитеdate на будущее время в некотором вашем контенте, вы можете создавать и просматривать эти страницы, включая-D и-F соответственно:

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ -D -F

Теперь, если вы зайдете на доменное имя или IP-адрес своего сервера в своем веб-браузере и добавите в конец спецификацию порта:1313, вы увидите созданный вами сайт:

http://your_domain_or_IP:1313

Hugo test site

Мы можем щелкнуть по нашему первому сообщению, чтобы проверить нашу отцененную уценку. Наш стиль Pygments был применен к блоку кода:

Hugo first page

Если щелкнуть ссылку «О нас», мы перейдем на страницу «О себе»:

Hugo about page

Как видите, наша тема довольно проста, но работает именно так, как мы и ожидали.

Если вы хотите опробовать альтернативные темы, вы можете добавить параметр--theme= в конец строки сервера:

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge

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

Если вы хотите использовать Hugo для обслуживания контента через порт 80, как на обычном веб-сервере, вам нужно будет добавить параметр--port в командную строку. Вам также нужно будет добавить к командеsudo, поскольку порты ниже 1024 ограничены для обычных пользователей:

rm -r public
sudo hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge --port=80

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

После запуска сервера Hugo сsudo вам также нужно будет предварять командуrmsudo:

sudo rm -r public

Заключение

Хьюго - отличный способ быстро и легко оторваться от земли. Статические сайты предлагают менее ресурсоемкую альтернативу традиционным сайтам CMS. Большинству пользователей не требуется контент на основе базы данных и они не используют дополнительные функции, которые предоставляют системы управления контентом. С Hugo вы можете сосредоточиться на создании контента, а не на администрировании сложной системы.

Нашnext guide продвинется дальше в этой настройке, рассказав, как развернуть сайт Hugo с помощью Git Hooks.

TOC

Как установить и использовать Hugo, генератор статических сайтов, в Ubuntu 14.04

Вступление

Предпосылки

Установка последней версии Hugo

Найди свою системную архитектуру

Загрузите и установите пакет Hugo

Установка вспомогательного программного обеспечения Hugo

Установите Hugo Themes

Установите подсветку синтаксиса Pygments

Включить автозаполнение Hugo Bash

Создание вашего первого сайта

Передача вашего сайта в систему управления версиями

Настройка начальной конфигурации для вашего сайта

Создание новых страниц для вашего сайта

Создать страницу «О нас»

Создайте свой первый пост

Создание и обслуживание сайта

Заключение

Related