Развертывание статического сайта Hugo с NGINX

Многие люди (такие как я) стараются по возможности избегать веб-разработки. Я менее разочарован, глядя на 1000 строк сборки, чем пытаясь центрировать какой-то текст на веб-сайте.

При этом у меня нет времени тратить время на работу со стеком LAMP и создание сложного сайта, когда все, что мне действительно нужно, это платформа для публикации и обмена проектами. Вот тут-то и вступает Hugo. С помощью Hugo вы можете писать простые файлы markdown и динамически генерировать статический сайт на основе html, как этот.

Предпосылки:

  • ОС Linux: я рекомендую выделенную систему только для хостинга, если она собирается в производство. Либо система, которую вы не используете, либо VPS на провайдера, такого как Digital Ocean или Linode.

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

Установка Hugo

Посетите руководство по быстрому старту Hugo для получения конкретной информации. Я смог установить Hugo на мою систему Ubuntu Server

$ sudo apt install hugo

и на Arch с

$ sudo pacman -Syu hugo

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

Создание быстрого сайта

Найдите каталог, в котором вы хотите сохранить свой сайт, и запустите

$ hugo new site <site name>

где имя сайта - это имя папки, в которой будет создан ваш сайт.

Добавление темы

Просмотрите этот обширный список тем Hugo, пока не найдете ту, которая вам нравится. Найдите его на github и просто клонируйте в каталог тем. Здесь я выбрал тему m10c.

$ cd mysite
$ git clone https://github.com/vaga/hugo-theme-m10c themes/m10c

Затем добавьте следующую строку в файл config.toml в корневой папке вашего сайта.

theme = "m10c"

Добавление поста

Чтобы создать новый пост, просто запустите

$ hugo new posts/my-first-post.md

Это создаст сообщение my-first-post в папке content/posts. Отредактируйте это как хотите.

Наконец, нам нужно запустить сайт. Перейдите в корневой каталог проектов и запустите

$ hugo server -t m10c -D

Наконец, посетите localhost:1313, чтобы увидеть сайт

Logo

Настройка NGINX

Во-первых, убедитесь, что вы установили NGINX, который доступен практически во всех репозиториях по умолчанию.

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

$ cd /etc/nginx/sites-available/
$ cp default mysite
$ vim mysite

Есть много комментариев, но конфигурация вашего сервера должна выглядеть примерно так:

server {
       listen 80;
       listen [::]:80;

       server_name mysite.com www.mysite.com;

       root /home/username/mysite/public/; #Absolute path to where your hugo site is
       index index.html; # Hugo generates HTML

       location / {
               try_files $uri $uri/ =404;
       }
}

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

$ sudo rm /etc/nginx/sites-enabled/default
$ sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/mysite

Мы можем запустить и включить NGINX с помощью следующих команд:

$ sudo systemctl start nginx
$ sudo systemctl enable nginx

Быстрые проверки

  • Вы настроили свои серверы имен регистраторов так, чтобы они указывали на сервер, который вы используете для хостинга?
  • Вы создали записи A с вашим хостинг-провайдером для направления запросов на правильный сервер? (добавить отдельную запись A для субдомена www)

Добавление SSL

SSL является обязательным в наши дни, и его никогда не было проще реализовать. Я пошел с Certbot, потому что он прост в использовании и, эй, кто не любит EFF?

Посетите сайт certbot, чтобы получить индивидуальные инструкции, основанные на ваших настройках, но вот процесс для NGINX, работающего в Ubuntu 18.04:

Сначала мы добавляем certbot PPA:

$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository universe
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update

Затем мы устанавливаем сам Certbot

$ sudo apt-get install certbot python-certbot-nginx

И наконец мы запускаем скрипт установки:

$ sudo certbot --nginx

и пройти через шаги.

Заключение

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

Чтобы обновить сайт, просто напишите больше файлов разметки и запустите hugo из корня сайта, чтобы восстановить сайт.