Desplegar un sitio Hugo en AWS S3

Cuando el sitio se genera con Hugo, es el momento de desplegarlo en alguna plataforma de alojamiento. Aquí hay una guía sobre cómo subirlo a AWS S3 y servirlo con la CDN de AWS CloudFront.

Esta guía forma parte del clúster Infraestructura web: publicación estática, CDN, indexación y servicios de dominio.

Para un flujo de trabajo de despliegue completo basado en CLI, consulte Desplegar sitio de Hugo en AWS S3 con AWS CLI.

Preparar el sitio

No describiré aquí cómo crear un proyecto de sitio Hugo ni cómo agregar artículos o entradas de blog. Asumimos que ya ha realizado esto.

Si no es así, aquí hay una iniciación rápida de Hugo

Opciones de despliegue

Existen varias opciones disponibles para desplegar y alojar un sitio generado con Hugo (https://gohugo.io/hosting-and-deployment/). Personalmente, me gustan:

• Cómo se puede alojar un sitio de Hugo en GitHub
• La construcción y el despliegue con AWS Amplify.
• Y el despliegue en S3 con el comando hugo deploy y servirlo con AWS CloudFront CDN, AWS Route53 y AWS Lambda.

Para alternativas como Netlify, consulte Netlify para Hugo y sitios estáticos: precios, nivel gratuito y alternativas.

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

1. Crear un bucket de S3 con permisos relajados

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

1. Cree un bucket con un nombre similar al del sitio, por ejemplo: “microsoft.com”

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

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

4. También coloque allí en index: index.html y en error: 404.html
5. Haga clic en guardar, recuerde el “punto de conexión del bucket del sitio web”, se verá así: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. Vaya a los permisos del bucket, vea las imágenes a continuación. El acceso público no debe estar bloqueado.

7. Política del bucket (reemplace microsoft.com por su 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 al administrador de certificados de AWS https://console.aws.amazon.com/acm Seleccione la región correcta.

1. Haga clic en solicitar
2. Certificado público
3. Nombres de dominio: tome dos, como: “microsoft.com” y “www.microsoft.com”
4. Puede solicitar más subdominios como “blog.microsoft.com”, “xmpp.microsoft.com”, etc.
5. Realice la validación DNS. Es mucho más fácil hacer esto/pusarlo a través de la consola de Route53 si su registrador es AWS.

3. Desplegar función Lambda en Lambda@Edge

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

Código Lambda@Edge de Flavor Cafe (Scotch)

// Hugo en Cloudfront, función Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble en github
//
// Dos reglas de reescritura para URI de subdirectorios de hugo.
// Ejemplo:
//   1. reescribir uri /posts/ a /posts/index.html
//   2. reescribir uri /posts a /posts/index.html
//
// Agregue tantas extensiones de archivo como desee para la regla 2.
// Las URI que terminan en extensiones de archivo conocidas no se reescriben con 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/ a /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 a /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Crear CDN de AWS CloudFront

Esto no funcionará con la nueva interfaz de usuario de la consola de AWS, necesitará usar la línea de comandos aws cli - consulte Crear AWS CloudFront en pago por uso (no el plan gratuito)

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

1. Crear distribución
2. Crear origen apuntando a su bucket de S3

3. Certificado para su sitio
4. Cuando le ofrezca convertir a sitio web estático - acepte
5. Crear comportamiento apuntando a su origen, y redirigir HTTP a HTTPS

6. Abajo en comportamientos/funciones asociaciones - en Solicitud de origen - seleccione su función Lambda

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

5. Apuntar DNS de AWS Route53 a su CloudFront

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

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

6. Instalar aws cli

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

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

3. Pruebe la conexión, escriba algo como lo siguiente para ver su bucket S3

aws s3 ls

7. Actualizar su config.toml

1. Abra su hugo.toml o config.toml en su proyecto de Hugo
2. Agregue al final (reemplace nuevamente microsoft.com por el suyo):

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

# S3; vea https://gocloud.dev/howto/blob/#s3
# Para puntos de conexión compatibles con S3, vea https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

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

Si mantiene sus configuraciones en config.yml, debería verse así

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

3. Guarde este archivo
4. Compile su sitio

hugo

5. Despliegue con el comando hugo deploy

hugo deploy

6. Abra la URL de su sitio en el navegador para ver si todo funcionó

Para más temas de infraestructura web, consulte el pilar de infraestructura web.

Enlaces útiles

• Enviar formulario de Google en sitio web de Hugo
• Agregar marcado de datos estructurados al sitio web de Hugo
• Hoja de trucos de Hugo
• Desplegar sitio de Hugo en AWS S3 con AWS CLI
• Usar Gitea Actions para desplegar sitio web de Hugo en AWS S3
• Iniciación rápida de Hugo: https://gohugo.io/getting-started/quick-start/
• Lista grande 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 el tema Mainroad de Hugo: Manejo de imágenes del tema Mainroad
• Instalar la 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 la carpeta de paquete de página para sitios de Hugo con el tema Mainroad

Espero que este pequeño documento de guía le sea útil. ¡Que tenga un excelente día!