Разверните сайт Hugo на AWS S3

Когда сайт сгенерирован с помощью Hugo, пора развернуть его на платформе хостинга. Ниже приведена инструкция по загрузке сайта в AWS S3 и обслуживанию через CDN AWS CloudFront.

Это руководство является частью кластера Веб-инфраструктура — статическая публикация, CDN, индексация и доменные сервисы.

Для полного рабочего процесса развертывания на основе CLI см. Развертывание сайта Hugo в AWS S3 с помощью AWS CLI.

Подготовка сайта

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

Если нет, вот быстрый старт Hugo

Варианты развертывания

Существует несколько вариантов развертывания и размещения сайта, сгенерированного Hugo (https://gohugo.io/hosting-and-deployment/). Лично мне нравятся:

• Как разместить сайт Hugo на GitHub
• Сборка и развертывание с помощью AWS Amplify.
• и развертывание в S3 с помощью команды hugo deploy с обслуживанием через CDN AWS CloudFront, AWS Route53 и AWS Lambda.

Для альтернатив, таких как Netlify, см. Netlify для Hugo и статических сайтов: цены, бесплатный тариф и альтернативы.

Ниже я описываю именно этот — последний — метод.

1. Создание S3-бакета с ослабленными разрешениями

Перейдите по адресу: https://console.aws.amazon.com/s3

1. Создайте бакет с именем, похожим на имя сайта, например: “microsoft.com”

2. Нажмите на бакет => свойства, прокрутите вниз => статическое размещение веб-сайта

3. Нажмите редактировать, затем — включить и “разместить статический веб-сайт”

4. Также укажите там в индексе: index.html и в ошибке: 404.html
5. Нажмите сохранить, запомните “конечную точку веб-сайта бакета”, она будет выглядеть так: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. Перейдите к разрешениям бакета, см. изображения ниже. Доступ из публичной сети не должен быть заблокирован.

7. Политика бакета (замените microsoft.com на ваше доменное имя):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. Создание сертификата

Перейдите в AWS Certificate Manager: https://console.aws.amazon.com/acm выберите правильный регион.

1. Нажмите “Запросить сертификат”
2. Публичный сертификат
3. Доменные имена: укажите два, например: “microsoft.com” и “www.microsoft.com”
4. Можно запросить больше поддоменов, таких как “blog.microsoft.com”, “xmpp.microsoft.com” и т.д.
5. Выполните валидацию DNS. Это гораздо проще сделать через консоль Route53, если ваш регистратор — AWS.

3. Развертывание функции Lambda для Lambda@Edge

Функция Lambda@Edge переопределяет URL-адреса проекта Hugo QuickStart для директорий на объект по умолчанию, index.html. Именно так CloudFront обслуживает URI ‘/posts/my-post/’ с содержимым ‘/posts/my-post/index.html’, возвращая 200 вместо 404.

Код Lambda@Edge от Flavor Cafe (Scotch)

// Hugo на CloudFront, функция Lambda@Edge
// Flavor Cafe (Scotch)
// @starpebble на github
//
// Два правила перезаписи для поддиректорий URI hugo.
// Пример:
//   1. переписать uri /posts/ на /posts/index.html
//   2. переписать uri /posts  на /posts/index.html
//
// Добавьте столько расширений файлов, сколько пожелаете для правила 2.
// URI, заканчивающиеся на известные расширения файлов, не перезаписываются правилом 2.

'use strict';

// @starpebble на github
// hugo flavor cafe (scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // например, /posts/ на /posts/index.html
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // например, /posts на /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Создание CDN AWS CloudFront

Это не будет работать с новым интерфейсом консоли AWS, вам понадобится использовать командную строку aws cli — см. Создание AWS CloudFront по оплате за использование (не бесплатный тариф)

Перейдите по адресу https://console.aws.amazon.com/cloudfront

1. Создать распределение
2. Создать источник, указывающий на ваш S3-бакет

3. Сертификат для вашего сайта
4. Когда предложат конвертировать в статический веб-сайт — согласитесь
5. Создать поведение, указывающее на ваш источник, и перенаправить Http на Https

6. Ниже в ассоциациях поведения/функций — в Origin Request — выберите вашу функцию Lambda

7. Сохранить
8. Перейдите на вкладку “Общие” вашего распределения и скопируйте доменное имя распределения. Оно должно выглядеть так: asdfasdfasdf.cloudfront.net

5. Настройка AWS Route53 DNS для указывания на ваш CloudFront

Перейдите по адресу https://console.aws.amazon.com/route53/v2/hostedzones

1. Создайте или нажмите на хостинговую зону вашего сайта. Она должна называться как ваш сайт, например: “microsoft.com”
2. Создайте пустую запись “A”, указывающую на ваше распределение CloudFront (доменное имя распределения)
3. Создайте запись “A” “www”, указывающую как псевдоним на вашу первую запись “A”

6. Установка AWS CLI

1. Установите инструменты командной строки AWS клиента https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. Настройте подключение AWS CLI
   1. проверьте файл ~/.aws/credentials, в нем должно быть что-то вроде

[default]
aws_access_key_id = .......
aws_secret_access_key = .......

3. Проверьте подключение, введите что-то вроде ниже, чтобы увидеть ваш S3-бакет

aws s3 ls

7. Обновите ваш config.toml

1. Откройте ваш hugo.toml или config.toml в вашем проекте Hugo
2. Добавьте в конец (снова замените microsoft.com на свой):

[[deployment.targets]]
# Произвольное имя для этой цели.
name = "lfs3"

# S3; см. https://gocloud.dev/howto/blob/#s3
# Для совместимых с S3 конечных точек см. https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Если вы используете CDN CloudFront, развертывание будет инвалидировать кэш по мере необходимости.
cloudFrontDistributionID = 	""

Если вы храните свои конфигурации в config.yml, это должно выглядеть так

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"

3. Сохраните этот файл
4. Скомпилируйте ваш сайт

hugo

5. Разверните его с помощью команды hugo deploy

hugo deploy

6. Откройте URL вашего сайта в браузере, чтобы проверить, все ли сработало

Для получения дополнительной информации по вопросам веб-инфраструктуры см. опору веб-инфраструктуры.

Полезные ссылки

• Отправка Google Forms на сайте Hugo
• Добавление разметки структурированных данных на сайт Hugo
• Шпаргалка по Hugo
• Развертывание сайта Hugo в AWS S3 с помощью AWS CLI
• Использование Gitea Actions для развертывания сайта Hugo в AWS S3
• Быстрый старт Hugo: https://gohugo.io/getting-started/quick-start/
• Большой список примеров тем Hugo: https://themes.gohugo.io/
• Размещение и развертывание Hugo: https://gohugo.io/hosting-and-deployment/
• Обработка изображений в теме Mainroad для Hugo: Обработка изображений в теме Mainroad
• Установка интерфейса командной строки AWS (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Самые популярные темы для Hugo
• Как хранить изображения-превью в папке пакета страниц для сайтов Hugo с темой Mainroad

Надеюсь, эта небольшая инструкция вам поможет. Хорошего дня!