Implementar un sitio de Hugo en AWS S3

Cuando el sitio se genera con hugo, es el momento de desplegarlo en alguna plataforma de alojamiento. Aquí está la forma de empujarlo a AWS S3 y servirlo con AWS CloudFront CDN.

Preparar el sitio

No se describirá aquí cómo crear un proyecto de sitio web de Hugo o agregar artículos o publicaciones de blog allí. Se asume que ya has hecho esto.

Si no, aquí está un inicio rápido de Hugo

Opciones de despliegue

Hay varias opciones disponibles para desplegar y alojar un sitio web generado por Hugo (https://gohugo.io/hosting-and-deployment/). Personalmente, me gusta

• Cómo un sitio de Hugo puede alojarse en GitHub
• AWS Amplify para construir y desplegar.
• y desplegar en s3 con hugo deploy comando y servirlo con AWS CloudDront CDN y AWS Route53 y AWS Lambda.

A continuación, describiré exactamente este - último - método.

1. Crear s3 bitbucket con permisos relajados

ir a: https://console.aws.amazon.com/s3

1. crear un bucket con un nombre como el nombre del sitio, por ejemplo: “microsoft.com”

2. hacer clic en el bucket => propiedades, abajo => alojamiento de sitio web estático

3. hacer clic en editar, luego - habilitar, y “alojar un sitio web estático”

4. también poner allí en índice: index.html y en error: 404.html
5. hacer clic en guardar, recordar “bucket website endpoint”, se verá así: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. ir a permisos del bucket, ver las imágenes a continuación. el acceso público no debe estar bloqueado.

7. política del bucket (reemplazar microsoft.com con tu nombre de dominio):

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

2. Crear certificado

ir a AWS certificate manager https://console.aws.amazon.com/acm seleccionar la región correcta.

1. hacer clic en solicitar
2. certificado público
3. nombres de dominio: tomar dos como: “microsoft.com” y “www.microsoft.com”
4. puedes solicitar más subdominios como “blog.microsoft.com”, “xmpp.microsoft.com” etc
5. hacer la validación de DNS. Es mucho más fácil hacer/push esto a través del console de Route53 si tu registrador es AWS.

3. Desplegar función Lamnda a Lambda@Edge

La función Lambda@Edge tomará y reescribirá las URLs del proyecto de inicio rápido de Hugo para directorios a un objeto predeterminado, index.html. Así es como Cloudfront sirve el URI ‘/posts/my-post/’ con contenido ‘/posts/my-post/index.html’ devolviendo 200 en lugar de 404.

Flavor Cafe (Scotch) Lambda@Edge Código

// Hugo en Cloudfront, función Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble en github
//
// Dos reglas de reescritura para URI de subdirectorio de hugo.
// Ejemplo:
//   1. reescribir URI /posts/ a /posts/index.html
//   2. reescribir URI /posts a /posts/index.html
//
// Añadir tantas extensiones de archivo como desees para la regla 2.
// URI que terminan en una extensión de archivo conocida no son reescritas por la regla 2.

'use strict';

// @starpebble en 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) === '/') {
    // e.g. /posts/ to /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)$/)) {
    // e.g. /posts to /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Crear AWS CloudFront CDN

ir a https://console.aws.amazon.com/cloudfront

1. Crear Distribución
2. crear origen apuntando a tu bucket de s3

3. Certificado para tu sitio
4. cuando le ofrece convertir a sitio web estático - aceptar
5. crear comportamiento apuntando a tu origen, y Redirigir Http a Https

6. abajo en asociaciones de comportamiento/funciones - en Solicitud de Origen - seleccionar tu función Lambda

7. Guardar
8. Ir a la pestaña General de tu distribución y copiar el nombre de dominio de distribución. Debería verse así: asdfasdfasdf.cloudfront.net

5. Puntar AWS Route53 DNS a tu CloudFrount

ir a https://console.aws.amazon.com/route53/v2/hostedzones

1. crear o hacer clic en la zona alojada de tu sitio. Debería llamarse como tu sitio: por ejemplo: “microsoft.com”
2. crear un registro “A” vacío apuntando a tu distribución de CloudFront (nombre de dominio de distribución)
3. crear un registro “A” “www” apuntando como alias a tu primer registro “A”

6. Instalar aws cli

1. Instalar herramientas de línea de comandos de cliente de aws https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. configurar conexión de aws cli
   1. revisar el archivo ~/.aws/credentials, debería tener algo como

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

3. probar la conexión, escribir algo como a continuación para ver tu bucket de s3

aws s3 ls

7. Actualizar tu config.toml

1. abrir tu hugo.toml o config.toml en tu proyecto de hugo
2. agregar al final (reemplazar nuevamente microsoft.com con el tuyo):

[[deployment.targets]]
# Un nombre arbitrario para este objetivo.
name = "lfs3"

# S3; ver https://gocloud.dev/howto/blob/#s3
# Para endpoints compatibles con S3, ver https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Si estás usando una CDN de CloudFront, el despliegue invalidará la caché según sea necesario.
cloudFrontDistributionID = 	""

Si guardas tus configuraciones en config.yml, debería verse así

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

3. guardar este archivo
4. compilar tu sitio

hugo

5. desplegarlo con comando hugo deploy

hugo deploy

6. abrir tu url del sitio en el navegador para ver si todo funcionó

Enlaces útiles

• Enviar formulario de Google en sitio web de Hugo
• Añadir markup de datos estructurados al sitio web de Hugo
• Hoja de trucos de Hugo
• Usando Gitea Actions para desplegar sitio web de Hugo a AWS S3
• Inicio rápido de Hugo: https://gohugo.io/getting-started/quick-start/
• Gran lista de ejemplos de temas de Hugo: https://themes.gohugo.io/
• Alojamiento y despliegue de Hugo: https://gohugo.io/hosting-and-deployment/
• Manejo de imágenes en tema Mainroad de Hugo: Manejo de imágenes en tema Mainroad
• Instalar Interfaz de Línea de Comandos de AWS (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Temas más populares para Hugo
• Cómo almacenar imágenes de miniatura en carpeta de paquete de página para sitios de Hugo con tema Mainroad

Espero que este pequeño documento de cómo hacerlo te ayude. ¡Tenga un excelente día!