IBM Cloud Docs
Creación de un sitio web estático

Creación de un sitio web estático

Esta guía de aprendizaje muestra cómo alojar un sitio web estático en IBM Cloud® Object Storage, incluida la creación de un grupo, la carga de contenido y la configuración del nuevo sitio web.

El alojamiento de sitios web estáticos con IBM Cloud Object Storage sirve contenido estático para el acceso público que proporciona a los usuarios flexibilidad, facilidad de entrega y alta disponibilidad. Esta guía de aprendizaje contiene instrucciones para utilizar cURL, la CLI deAWS, así como la Consola. Elija la vía de acceso para esta guía de aprendizaje utilizando los enlaces para conmutar entre las instrucciones sobre el título de este tema.

El caso de ejemplo

El escenario de esta guía de aprendizaje simplifica el alojamiento web a sus aspectos esenciales para resaltar los pasos implicados. Aunque no todas las opciones de configuración se cubrirán en esta guía de aprendizaje, completar correctamente esta guía de aprendizaje da como resultado contenido accesible en la web.

Antes de empezar

Asegúrese de que tiene lo que necesita para iniciar:

  • Una cuenta para IBM Cloud Platform
  • Una instancia de IBM Cloud Object Storage
  • Contenido en formato fijo, como texto (HTML sería perfecto), y archivos de imagen

Compruebe que tiene el acceso adecuado para la instancia de IBM Cloud Object Storage que va a utilizar o los permisos adecuados para los grupos que va a utilizar en esta guía de aprendizaje.

Para utilizar la CLI deIBM Cloud con esta guía de aprendizaje, tendrá que configurar el plugin Object Storage para especificar la instancia de servicio que desea utilizar y la región predeterminada donde desea que se cree el nuevo grupo.

Crear un grupo configurado para acceso público

La creación de un grupo para un sitio web estático requerirá acceso público. Existen varias opciones para configurar el acceso público. En concreto, el uso del rol de IAM de ObjectReader impedirá la lista del contenido del grupo al mismo tiempo que permite que el contenido estático se visualice en Internet. Si desea permitir la visualización del listado del contenido, utilice el rol de ContentReader IAM para el grupo.

Crear un grupo

Después de configurar el plugin de CLI, sustituya el contenido del marcador tal como se muestra en el mandato de ejemplo para crear un grupo:

ibmcloud cos bucket-create --bucket <bucketname>

Una vez que haya iniciado sesión en la consola y después de crear una instancia de IBM Cloud Object Storage, puede crear un grupo. Haga clic en el botón etiquetado "Crear cubo" y elija entre las opciones como se muestra en la Figura 1. Seleccione la tarjeta que indica "Personalizar el grupo".

Personalizar el grupo

El contenedor para los archivos estáticos en el sitio web residirá en un grupo que puede nombrar. El nombre que cree debe ser exclusivo, no debe contener información personal o de identificación, no puede tener dos puntos, puntos o guiones en una fila y debe empezar y terminar con caracteres alfanuméricos (elementos de juego de caracteres ASCII 3-63). Consulte la Figura 2 para ver un ejemplo.

Grupo de nombres para sitio web estático

Establecimiento del acceso público

En todos los escenarios de esta guía de aprendizaje, deseará utilizar la interfaz de usuario de en la consola para permitir el acceso público a su nuevo sitio web.

Al crear un grupo para alojar contenido de sitio web estático, existe una opción para habilitar el acceso público como parte del proceso de creación del grupo. Consulte la Figura 3 para ver la opción para habilitar el acceso público al grupo. Para obtener la explicación de las opciones para el "documento de índice" y el "documento de error" tal como se muestra, encontrará más información a continuación en la sección Configurar las opciones para su sitio web. Puede completar la configuración básica con este paso, antes de cargar el contenido en el grupo, tal como se muestra en el paso siguiente.

Habilitar acceso público

Cargar contenido en el grupo

El contenido de sus archivos de sitios web estáticos alojados se centra naturalmente en la información y los medios. Un enfoque popular para crear contenido para sitios web estáticos son los generadores de código abierto listados en StaticGen. Para los fines de esta guía de aprendizaje, sólo necesitamos dos archivos:

  • Una página de índice, normalmente escrita en HTML y denominada index.html, que se carga de forma predeterminada para los visitantes del sitio
  • Una página de error, también en HTML y aquí denominada error.html; normalmente la página de error se carga cuando un visitante intenta acceder a un objeto que no está presente o no tiene acceso público

Otros archivos, como imágenes, PDF o vídeos, también se pueden subir a su grupo (pero este tutorial se centrará sólo en un conjunto mínimo de requisitos).

A efectos de esta guía de aprendizaje, coloque las páginas HTML para el índice y el manejo de errores en un directorio local. Sustituya el contenido del marcador tal como se muestra en el mandato de ejemplo para cargar los archivos html:

ibmcloud cos object-put --bucket BUCKET_NAME --key KEY [--body FILE_PATH]

Es posible que ya haya completado la configuración básica para alojar su sitio web estático. Los archivos se pueden cargar directamente en la consola una vez que haya nombrado y configurado el grupo. Tenga en cuenta que el paso es opcional como se muestra en la Figura 4, y puede ocurrir en cualquier momento antes de la prueba de su nuevo sitio web alojado.

Cargar archivos

Para el resto de la guía de aprendizaje, asumiremos que la clave de objeto para la página de índice es index.html y la clave para el documento de error es error.html, aunque se puede utilizar cualquier nombre de archivo adecuado para el sufijo o clave.

Configurar las opciones para su sitio web

Hay más opciones de las que esta guía de aprendizaje puede describir, y para los fines de esta guía de aprendizaje sólo necesitamos establecer la configuración para empezar a utilizar la característica de sitio web estático.

Cree un archivo JSON con la información de configuración adecuada:

{
  "ErrorDocument": {
    "Key": "error.html"
  },
  "IndexDocument": {
    "Suffix": "index.html"
  }
}

Sustituya el contenido del marcador tal como se muestra en el mandato de ejemplo para configurar el sitio web:

ibmcloud cos bucket-website-put --bucket BUCKET_NAME --website-configuration file://<filename.json>

Es posible que haya completado este paso durante la creación del grupo, ya que la configuración básica del sitio web estático alojado determina cuándo y cómo se muestra el contenido. Para los visitantes de su sitio web que no pueden proporcionar una clave, o página web, el archivo predeterminado se mostrará en su lugar. Cuando los usuarios encuentran un error, la clave de la página de error determina qué contenido recibirán los visitantes. Las opciones de configuración para las páginas predeterminadas y de error se repiten como referencia.

Configurar opciones

Probar y visitar su nuevo sitio web

Una vez que haya configurado el grupo para proporcionar cabeceras HTTP utilizando el mandato de ejemplo, todo lo que tiene que hacer para probar el nuevo sitio es visitar el URL del sitio. Tenga en cuenta el protocolo mostrado (http), después de sustituir los marcadores de posición por sus propias opciones realizadas anteriormente en esta guía de aprendizaje:

http://<bucketname>.s3-web.<endpoint>/

Con las pruebas satisfactorias de su nuevo sitio, ahora puede explorar más opciones y añadir más contenido.

Próximos pasos

La descripción detallada de las opciones de configuración para IBM Cloud Object Storage sitios web estáticos alojados se puede encontrar en la Documentación de la API.