Alojamiento de un sitio web en Amazon S3 -

PorCory LaViska es

Todo el mundo sabe que Amazon S3 es fantástico para almacenar archivos. Es rápido, económico y fácil de configurar. Lo que quizás no sepa es que también puede alojar sitios web estáticos en esta sólida plataforma.

¿Qué es un sitio web estático? En resumen, es un sitio web compuesto únicamente de HTML, CSS y/o JavaScript. Eso significa que los scripts del lado del servidor no son compatibles, por lo que si desea alojar una aplicación Rails o PHP, deberá buscar en otra parte. Para propósitos más simples, ¡bienvenido al maravilloso mundo de alojar sitios web en S3!

Creando un cubo

Si aún no tiene una, lo primero que deberá hacer es registrarse para obtener una cuenta de Amazon Web Services (AWS). Registrarse no cuesta nada, pero tenga en cuenta que deberá pagar las tarifas de almacenamiento y transferencia una vez que comience a colocar objetos en S3. (¡No te preocupes, es barato!)

Una vez que cree una cuenta, tendrá acceso a la Consola de administración de AWS.

Aquí es donde irás para crear tu primer depósito. Un depósito es similar a una carpeta en su disco duro, excepto que está en la nube y tiene almacenamiento prácticamente ilimitado. Hay algunas cosas que debes saber sobre los depósitos antes de crear uno:

• Los nombres de los depósitos deben ser únicos en toda la plataforma S3.
• Puede crear un depósito en una de las muchas regiones admitidas en todo el mundo.
• Si desea utilizar un dominio personalizado, el nombre de su depósito deberá ser el mismo que el de su dominio.

Para crear un depósito, navegue hasta S3 en la Consola de administración de AWS y presione Crear depósito . Se le pedirá que ingrese un nombre y una región.

Si planeas usar tu propio dominio/subdominio, úsalo para el nombre de tu depósito. Para la región, elija la más cercana a usted y presione Crear . Con un poco de suerte, verás aparecer tu nuevo depósito en la consola.

Lo único que queda por hacer es habilitar el alojamiento de sitios web estáticos. Simplemente selecciónelo en el panel de la derecha.

Asegúrese de configurar el documento de índice en index.html. También puede configurar una página de error si lo desea. Cuando hayas terminado, presiona Guardar .

Bueno, eso fue fácil. ¡Ahora subimos la página de inicio!

Subiendo tu primera página

Una ventaja de la Consola de administración de AWS es que puede cargar archivos en su depósito directamente desde su navegador. Comenzamos creando uno llamado index.html. Este será el contenido de la página de inicio:

!doctype htmlhtmlhead title¡Hola, S3!/title meta name="description" content="Mi primer sitio web de S3" meta charset="utf-8"/headbody h1Mi primer sitio web de S3/h1 p¡No puedo creer que haya sido tan fácil!/ p/cuerpo/html

To upload it, select your new bucket and hit Upload.

Once you’ve uploaded index.html, it will appear in your bucket. However, you won’t be able to see it in your browser yet because everything in S3 is private by default.

To make it public, right-click on index.html and select Make Public. (Remember to do this for any other files you upload to your website!)

Now that your homepage is visible to the world, it’s time to test everything out! Select index.html in the console and go to the Properties tab.

Clicking the link will take you to your new homepage.

You’ll notice that the address bar shows s3.amazon.com. This is the default URL for objects stored on Amazon S3. Let’s setup a custom domain and really turn this into a website.

Using Your Own Domain

If your bucket name is the same as your domain/subdomain name, you can point it to your new website by creating a CNAME record in your domain’s DNS settings. It should look something like this:

Domain: example.combrType:   CNAMEbrTarget: s3.amazonaws.com.

Remember to replace example.com with your own domain. After the DNS propagates (which could take up to 24 hours), you should be able to see your website by visiting the domain in a browser. If it doesn’t show up, make sure your bucket name is exactly the same as your domain/subdomain and double check your DNS settings.

How to Edit Your S3 Website

Now that your website is up and running, you’ll probably want to make changes to it. Alas, you can’t install something like WordPress on Amazon S3. So how do you manage content?

Shameless plug: I recommendSurreal CMS. It links up to just about any site using FTP, SFTP, or Amazon S3 and it’s dead simple to integrate. Take that homepage, for example. Let’s make the entire thing editable:

!doctype htmlhtmlhead    titleHello, S3!/title    meta name="description" content="My first S3 website"    meta charset="utf-8"/headbody    div        h1My first S3 website/h1        pI can't believe it was that easy!/p    /div/body/html

Notice how I’ve wrapped the content in a div and given it a class called editable? That pretty much sums upthe integration process. You can make just about any HTML element editable this way.

Setting Up Surreal

Adding Your Site

Start bycreating an account. The first thing you’ll see once you’re in Surreal CMS is the sites page.

Select Add a New Site and you’ll be taken to a form that asks for some information.

Enter your website’s URL. Make sure you change the protocol to Amazon S3 and pick the correct region, otherwise Surreal won’t be able to connect. You’ll also need to enter your access key and secret key. If you don’t have these handy, you can get them from theSecurity Credentials page in the AWS Management console. For added security, considercreating a separate access key just for this purpose.

Once you’re finished, hit Submit and your site will appear in Surreal.

Enabling Pages

The next step is to enable your homepage for editing. Select your site and hit the Enable Pages button. A dialog will appear showing you the contents of your S3 bucket. Select index.html and then hit Done.

Congrats, you’re ready to start editing!

Editing Pages

Remember how you added that editable class to the homepage earlier? Well, you’re about to see why. The glorious thing about Surreal is that you’ll be editing your page inline, just like it appears in the wild. Select it from the list and you’ll be taken straight to the Live Editor.

Of course, you can make any changes you want in the editor—all the usual options are available. When you’re done, go to Save Publish and Surreal will save it to Amazon S3 for you!

Surreal also has a bunch of othergreat features that you’ll find useful. To name a few:Inline editingResponsive UIPhoto gallery editorGoogle Analytics dashboardScheduled publishingChange notificationsWhite-label supportWhile it isn’t free, you cansignup for a free trial and get a full month to play around with it. I may be biased, but it’s definitely worth checking out And there you have it. Now you know how to setup a website on Amazon S3 and edit it with minimal effort. If you have questions, leave them in the comments. If you enjoyed this tutorial,let me know!About Cory LaViska

Cory LaViska is the founder of A Beautiful Site, LLC, a small development studio in New Hampshire. He’s responsible for Shoelace and Surreal CMS, as well as a handful of open source projects on GitHub.

www.abeautifulsite.netclaviskaPosts