amazon s3_在Amazon S3上托管网站

amazon s3

Everyone knows that Amazon S3 is great for storing files. It's fast, inexpensive, and easy to setup. What you may not realize is that you can also host static websites on this robust platform.

众所周知, Amazon S3非常适合存储文件。 它快速,便宜且易于设置。 您可能没有意识到的是,您还可以在此强大的平台上托管静态网站

What is a static website? In short, it's a website comprised of only HTML, CSS, and/or JavaScript. That means server-side scripts aren't supported, so if you want to host a Rails or PHP app, you'll need to look elsewhere. For simpler purposes, welcome to the wonderful world of hosting websites on S3!

什么是静态网站? 简而言之,这是一个仅包含HTML,CSS和/或JavaScript的网站。 这意味着不支持服务器端脚本,因此,如果您想托管Rails或PHP应用程序,则需要在其他地方查找。 为了简单起见,欢迎来到S3托管网站的美好世界!

创建一个桶 (Creating a Bucket)

If you don't already have one, the first thing you'll need to do is sign up for an Amazon Web Services (AWS) account. It doesn't cost anything to sign up, but keep in mind you will need to pay for storage and transfer fees once you start putting objects on S3. (Don't worry, it's cheap!)

如果您还没有,那么首先需要注册一个Amazon Web Services (AWS)帐户。 注册不需要任何费用,但是请记住,一旦开始在S3上放置对象,您将需要支付存储和转移费用。 (不用担心, 它很便宜! )

Once you create an account, you'll have access to the AWS Management Console.

创建帐户后,您将可以访问AWS管理控制台

The AWS Management Console

This is where you'll go to create your first bucket. A bucket is similar to a folder on your hard drive, except it's in the cloud and it has virtually unlimited storage. There are a few things you need to know about buckets before creating one:

这是您创建第一个存储桶的地方 。 存储桶类似于硬盘驱动器上的文件夹,但存储桶位于云中,并且几乎具有无限的存储空间。 在创建存储桶之前,您需要了解以下几点:

  • Bucket names need to be unique across the entire S3 platform

    存储桶名称在整个S3平台上必须唯一
  • You can create a bucket in one of many supported regions around the world

    您可以在全球许多受支持的地区之一中创建存储分区

  • If you want to use a custom domain, your bucket name will need to be the same as your domain name

    如果您想使用自定义域名,则您的存储桶名称必须与域名相同

To create a bucket, navigate to S3 in the AWS Management Console and hit Create Bucket. You'll be prompted to enter a name and a region.

要创建存储桶,请在AWS管理控制台中导航到S3并点击Create Bucket 。 系统将提示您输入名称和区域。

Creating a bucket in the AWS console

If you plan on using your own domain/subdomain, use that for your bucket name. For the region, pick the one closest to you and hit Create. With any luck, you'll see your new bucket appear in the console.

如果您打算使用自己的域/子域,则将其用作存储桶名称。 对于该区域,选择距离您最近的区域,然后点击创建 。 运气好的话,您会看到新存储桶出现在控制台中。

Viewing your bucket in the AWS console

The only thing left to do is enable Static Website Hosting. Just select it from the panel on the right.

剩下要做的就是启用“ 静态网站托管” 。 只需从右侧面板中选择它即可。

Static Website Hosting settings in the AWS console

Make sure you set the Index Document to index.html. You can also set an error page if you want. When you're done, hit Save.

确保将索引文档设置为index.html 。 您也可以根据需要设置错误页面。 完成后,点击保存

Well, that was easy. Now let's upload the homepage!

好吧,那很容易。 现在,让我们上传主页!

上载您的首页 (Uploading Your First Page)

One nice thing about the AWS Management Console is that you can upload files to your bucket right from your browser. Let's start by creating one called index.html. This will be the contents of the homepage:

AWS管理控制台的一件好事是,您可以直接从浏览器将文件上传到存储桶。 让我们开始创建一个名为index.html 。 这将是主页的内容:

<!doctype html>
<html>
<head>
    <title>Hello, S3!</title>
    <meta name="description" content="My first S3 website">
    <meta charset="utf-8">
</head>
<body>

    <h1>My first S3 website</h1>
    <p>I can't believe it was that easy!</p>

</body>
</html>


	

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

要上传,请选择您的新存储桶,然后点击上传

Uploading a file in the AWS console

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.

上传index.html ,它将显示在您的存储桶中。 但是,由于默认情况下S3中的所有内容都是私有的,因此您将无法在浏览器中看到它。

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!)

要使其公开,请右键单击index.html然后选择公开 。 (请记住对您上传到网站的任何其他文件执行此操作!)

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.

既然您的主页对全世界都是可见的,那么现在该测试所有内容了! 在控制台中选择index.html ,然后转到“ 属性”选项卡。

Getting the link to your file in the AWS console

Clicking the link will take you to your new homepage.

单击该链接将带您到新的主页。

Homepage Preview

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.

您会注意到地址栏显示s3.amazon.com 。 这是存储在Amazon S3上的对象的默认URL。 让我们设置一个自定义域,并将其真正变成一个网站。

使用您自己的域 (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:

如果存储桶名称与域名/子域名相同,则可以通过在域名的DNS设置中创建CNAME记录来将其指向新网站。 它看起来应该像这样:

Domain: example.com
Type: CNAME
Target: 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.

请记住用您自己的域替换example.com 。 DNS传播后(最多可能需要24小时),您应该能够通过在浏览器中访问域来查看您的网站。 如果未显示,请确保您的存储桶名称您的域/子域完全相同,然后仔细检查您的DNS设置。

如何编辑您的S3网站 (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?

现在您的网站已启动并正在运行,您可能需要对其进行更改。 las,您无法在Amazon S3上安装WordPress之类的东西。 那么您如何管理内容?

Shameless plug: I recommend Surreal 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:

无耻的插件:我建议使用Surreal CMS 。 它可以使用FTP,SFTP或Amazon S3链接到几乎任何站点,并且集成起来非常简单。 以该主页为例。 让我们将整个事情变成可编辑的:

<!doctype html>
<html>
<head>
    <title>Hello, S3!</title>
    <meta name="description" content="My first S3 website">
    <meta charset="utf-8">
</head>
<body>

    <div id="content" class="editable">
        <h1>My first S3 website</h1>
        <p>I 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 up the integration process. You can make just about any HTML element editable this way.

注意我如何将内容包装在<div>并给它一个名为editable的类? 这几乎可以概括集成过程 。 您可以通过这种方式使几乎任何HTML元素都可编辑。

设置超现实 (Setting Up Surreal)

添加您的网站 (Adding Your Site)

Start by creating an account. The first thing you'll see once you're in Surreal CMS is the sites page.

首先创建一个帐户 。 进入Surreal CMS后,您会看到的第一件事是网站页面。

Surreal CMS sites page

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

选择添加新站点 ,您将被带到询问一些信息的表单。

Adding a site in Surreal CMS

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 the Security Credentials page in the AWS Management console. For added security, consider creating a separate access key just for this purpose.

输入您网站的URL。 确保将协议更改为Amazon S3并选择正确的区域,否则Surreal无法连接。 您还需要输入访问密钥和秘密密钥。 如果您没有这些方便的工具,则可以从AWS管理控制台的“ 安全凭证”页面获取它们。 为了提高安全性,请考虑为此创建一个单独的访问密钥

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.

下一步是启用您的主页进行编辑。 选择您的站点,然后单击“ 启用页面”按钮。 将出现一个对话框,向您显示S3存储桶中的内容。 选择index.html ,然后点击完成

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.

还记得您之前如何将editable类添加到主页吗? 好吧,您将要知道为什么。 关于Surreal的光荣之处在于,您将内联编辑页面,就像它在野外出现一样。 从列表中选择它,您将直接进入实时编辑器。

The Live Editor in Surreal CMS

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将为您将其保存到Amazon S3!

附加功能 (Extras)

Surreal also has a bunch of other great features that you'll find useful. To name a few:

超现实世界还具有许多其他有用的功能 ,您会发现它们很有用。 仅举几例:

  • Inline editing

    内联编辑
  • Responsive UI

    响应式用户界面
  • Photo gallery editor

    图片库编辑器
  • Google Analytics dashboard

    Google Analytics(分析)仪表板
  • Scheduled publishing

    预定发布
  • Change notifications

    变更通知
  • White-label support

    白标支持

While it isn't free, you can signup 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!

那里有。 现在,您知道如何在Amazon S3上设置网站并进行最小的编辑。 如有疑问,请在评论中保留。 如果您喜欢本教程,请告诉我

翻译自: https://davidwalsh.name/hosting-website-amazon-s3

amazon s3

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值