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

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

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

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

Если нет, вот быстрый старт Хуго

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

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

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

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

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. Разверните функцию Lamnda в Lambda@Edge

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

Flavor Cafe (Scotch) Lambda@Edge Code

// 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

перейдите на https://console.aws.amazon.com/cloudfront

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

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

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

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

5. Настройте DNS AWS Route53 на ваш CloudFrount

перейдите на 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, deploy будет отменять кэш при необходимости.
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 в веб-сайте Хуго
• Добавление разметки структурированных данных на веб-сайте Хуго
• Справочник Хуго
• Использование Gitea Actions для развертывания сайта Хуго на AWS S3
• Быстрый старт Хуго: https://gohugo.io/getting-started/quick-start/
• Большой список примеров тем Хуго: https://themes.gohugo.io/
• Хостинг и развертывание Хуго: https://gohugo.io/hosting-and-deployment/
• Обработка изображений в основной теме Хуго Mainroad: Обработка изображений в теме Mainroad
• Установка AWS Command Line Interface (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Наиболее популярные темы для Хуго
• Как хранить миниатюрные изображения в папке page bundle для сайтов Хуго с темой Mainroad

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