Whic Of The Following Services Could Be Used Alone To Host A Static Website?

Static sites are the best. They're fast, they're unproblematic, and they're practically free to host. Since late January 2016, Amazon Spider web Services (AWS) has become ane of the all-time static spider web hosting providers of all time due to their release of AWS Certificate Manager (ACM).

Using AWS, you can now:

Deploy your static site into an Amazon S3 bucket and host it for almost no cost.
Make your website incredibly fast by using CloudFront to proxy and cache your spider web traffic for almost no cost.
Generate gratuitous, zippo-effort SSL certificates for your websites that motorcar-renew without any endeavour whatever on your office.
Hands automate deployments of your website to ensure things are ever fast, cheap, and scalable.

This guide will walk you through everything you need to know to successfully run a uncomplicated, scalable, secure, and cheap static site on AWS.

Go Prepare

Before we continue, you need to have an AWS account. If yous don't already accept one, get sign up now.

You'll also demand to install the official AWS command line tool. Y'all tin can do this using pip, the Python package manager:

We'll use the AWS CLI tool extensively later on to practice things like deploy your website, invalidate your website cache, and a number of other things. It makes working with AWS a lot simpler.

Gear up Up IAM

Once y'all've signed into AWS, you lot need to generate an IAM account for yourself. This is a user business relationship within your main AWS business relationship that can access various AWS services.

To create a new IAM account, follow these steps:

Visit the IAM users page.
Click the Create a new User button.
Enter a username for your new business relationship in the first input box, exit all other options alone, then click the Create push button.

Yous'll now see a confirmation page telling you that your new account has been created.

This page contains your user security credentials. These are your private API keys that are required to work with AWS.

Be sure to salve these somewhere (we'll demand them later), simply almost chiefly: Continue THEM Condom! Don't publish these keys to Github, email them to anyone, or put them anywhere on the public net. If you do this, someone volition use your keys to do all sorts of nasty things on AWS that will cost Y'all coin.

Side by side, you lot demand to requite your newly created IAM user some access permissions. To do this, first return to the IAM users page and click on your newly created user business relationship.

Now that you're on the user page, practice the following:

Click the Permissions tab.
Click the Attach Policy button. This volition give you the power to assign permissions to this user business relationship.
The offset listed policy you lot should see is called AdministratorAccess. Select this policy only, then click the Attach Policy button.

This creates an administrator account that you can use to do work with any AWS services.

Fix the CLI

Now that nosotros've got our user business relationship setup, let'due south configure the AWS CLI tool then we tin can apply it to simplify some tasks later on.

Open up your terminal and run the post-obit command:

This will open up an interactive prompt which will collect your AWS credentials you created in the previous step, and relieve them into your habitation folder then you don't need to recall them for each command in the future.

Put your credentials in as requested, and leave all the default settings alone.

At present that you've got all the tools and accounts setup, let'southward move onto the more interesting stuff!

Create an S3 Bucket

Amazon S3 is where you'll be storing your static site files: your html, css, js, images, videos, etc. It'south one of the cheapest and almost pop file storage services on the internet.

S3 requires yous to create a saucepan, which acts similar a directory for storing files. This is where you'll shop your static site files.

You'll create one saucepan for each website y'all desire to host. S3 charges a little over 3 cents per month for storing each GB of data and 4/10ths of a cent for each 10,000 requests. S3 besides charges 9 cents per GB to transfer data out to the public internet (+1 gratis GB of transfer per month).

Let'south say you run a rather large website that consists of roughly 1GB of text, images, CSS, etc. Let'southward also say that this website gets one million page views per month.

If we were exclusively using S3 to host this website, we'd be looking at a monthly hosting cost of roughly 88 cents per calendar month (this factors in 6GB of data transfer). Practiced luck finding a cheaper web host for a site with such high traffic!

Anyhow: back to creating a bucket.

Run the following command in your last to create a new bucket for your website:

$ aws s3 mb s3 : //www.mywebsite.com

$ aws s3 website s3 : //www.mywebsite.com --index-document index.html --error-certificate fault.html

This will create your new saucepan for your website (make sure you specify the full domain name for your website during this step), and tell S3 to treat your saucepan like a static website, rendering index.html when a user visits the root URL, /, and showing the error.html file when a user tries to visit a page that does not be.

Deploy Your Website

The next affair you need to do is deploy your static files into your new bucket. When this step is washed, yous'll have a functional website that you can examination.

To deploy your website, run the post-obit command in your terminal:

$ aws s3 sync --acl public-read --sse --delete /path/to/static/site/ s3 : //www.mywebsite.com

The above control volition ensure that all the files within of the /path/to/static/site/ folder are copied into your bucket. The –acl public-read option tells Amazon to ensure all the files you upload are publicly readable. The –sse options tells Amazon to shop these files encrypted at balance. The –delete flag tells Amazon to delete whatsoever files from your bucket that don't be in your local folder.

Once this performance has finished, your site should be live, and you will exist able to view it by visiting: http://www.mywebsite.com.s3-website-us-eastward-1.amazonaws.com

Just swap www.mywebsite.com for the domain name of your site.

By this point, yous should have a working website that is hosted purely by Amazon S3. At present, if you wanted to, yous could prepare a DNS CNAME tape correct now and your website would be live — but that wouldn't exist very fun.

In the next section, we'll speed your website upward by using Amazon CloudFront.

Create a CloudFront Origin

The next matter nosotros need to do is setup a CloudFront origin. CloudFront is a CDN service that Amazon provides.

The way this works is that when users visit your website, they will really exist visiting a cached copy of your website that CloudFront stores in various datacenters all over the world.

So, for instance, if a user visits your website from the west coast of the US, they will actually be getting a re-create of your website from a server located in the west declension somewhere nearby. This geographically shut mirror of your site will make your website much quicker to load than would otherwise exist possible using Amazon S3 lonely.

CloudFront can also shrink your web pages to minimize bandwidth transfer, and cease SSL so you can easily secure your site.

To start, visit the CloudFront dashboard and click the Create Distribution button, followed by the Get Started push button in the Web section (brand sure non to select the RTMP one).

Adjacent, you need to:

Put www.mywebsite.com.s3-website-us-eastward-ane.amazonaws.com into the Origin Domain Name box. Don't forget to substitute www.mywebsite.com with your S3 bucket name.
Nether the Viewer Protocol Policy section, select Redirect HTTP to HTTPS (because we plan on serving this site over SSL).
Nether Object Caching, click Customize then input 31536000 for all of the iii input boxes: Minimum TTL, Maximum TTL, and Default TTL.
Under the Compress Objects Automatically department, select the Yes chimera. This will plough CloudFront compression on for us automatically.
Under the Alternate Domain Names section, input your real domain name. For case: www.mywebsite.com
Under the Default Root Object department, input index.html into the box. This tells CloudFront to render your index.html by default when a user visits your website directly.
Under the SSL Document section, select the Custom SSL Certificate button. This is where we'll generate a new SSL Certificate.
Next, click the Request or Import a Certificate with ACM button (this will open a new window).
Enter your domain proper noun (www.mywebsite.com), so click the Review and Request button. Then confirm the request.
Now, become check your email that is registered for that domain (whoever the admin of the domain is should receive an email), and click the verification link Amazon sends you. This lets Amazon know yous are the owner of the domain and generates a new SSL cert for your website.
Now, go back to the CloudFront configuration page y'all were on, and click the trivial refresh icon in the Custom SSL Certificate department. You lot tin now select your SSL certificate from the drop downwardly menu.
Finally: click the Create Distribution button at the very bottom of the folio!

Now that y'all've created your CloudFront origin, you will need to await roughly fifteen minutes for the origin to be provisioned in all the AWS datacenters around the world. If you lot take a look at the CloudFront dashboard page, y'all will encounter a Country field that will read Enabled when the provisioning process has finished.

Once your origin is fully provisioned, y'all can view your website through the CloudFront CDN by clicking on your Origin in the CloudFront dashboard and copying out the Domain Name address that is listed on the page. This is your CloudFront origin public address. If you re-create it into your browser you should see your website.

For me, this ended up being: https://d1p1m6ca3melg2.cloudfront.cyberspace/

Make Your Static Site Public

Now that y'all've gotten everything fix and deployed, yous demand to get your bodily domain name to return your CloudFront site.

To do this, you'll need that CloudFront origin Domain Proper noun you got after creating your origin.

Visit your DNS provider (I'm a huge fan of DNSimple), and add a CNAME record for your domain that points to your CloudFront origin.

For case, if you wanted your website to be www.mywebsite.com, y'all would add a CNAME record on mywebsite.com that points: www -> xxx.cloudfront.internet

This CNAME tape is what will ensure that when users visit www.mywebsite.com, the CloudFront origin is what services that request from the nearest geographical location.

Once you lot've added this CNAME record, it may accept up to one 60 minutes before your website starts working properly.

Once your DNS has been updated, visiting your website will initiate a request to CloudFront to display your website. You can also take note that if y'all visit your website over HTTP (eg: http://www.mywebsite.com), you will be automatically redirected to HTTPS (eg: https://www.mywebsite.com). This is a nice characteristic that CloudFront handles for united states.

Y'all at present have a alive website, served via a global CDN, that is fully secured via SSL for near no cost =)

Automate Your Website Deploys

Now that everything is live and working, let's talk about the process of automating your website deploys.

For people edifice websites that change frequently (blogs, visitor websites, etc.) — automating the deployment of your website is a huge timesaver.

The mode I recommend you automate deploys is to utilise the Amazon CLI tool from earlier to:

Sync the latest copy of your website files into your S3 saucepan.
Invalidate the existing CloudFront enshroud, ensuring that the new website files you but uploaded are used in the future. This ensures users visiting your site won't see an older version of the site.

If yous're using an automated deployment tool similar Travis CI, this procedure might look something like this:

$ pip install awscli

$ aws s3 sync --acl public-read --sse --delete /path/to/static/site/ s3 : //www.mywebsite.com

$ aws configure prepare preview . cloudfront true

$ aws cloudfront create-invalidation --distribution-id thirty --paths '/*'

This is the same deployment command equally earlier. The new bits here are the CloudFront invalidation pieces.

The starting time CloudFront command is required as currently (at the time of writing) the AWS CLI tool has CloudFront features in beta, which must exist enabled.

After the CloudFront beta has been enabled on the CLI, the final command will instruct CloudFront to purge its cache of all your cached web pages. Exist sure to fill in the appropriate Distribution ID field hither (and remove the xxx bit). You tin can find this value on the origin folio after y'all visit the CloudFront dashboard.

Annotation: The CloudFront invalidation process will accept a chip of time to process. It will happen asynchronously. Yous may need to wait around 15 minutes before the latest changes on your site appear.

If y'all'd similar to see a full case of this in action (on a real static site), check out the Github repository for one of my pet projects, ipify: https://github.com/rdegges/ipify-www Specifically, take note of the .travis.yml file which contains the TravisCI automatic deployment steps.

In this project, each time I push a change to the master branch, TravisCI will deploy my new changes to Amazon S3, besides as invalidate my CloudFront cache.

Y'all may also be wondering how information technology is that I'1000 deploying an open source project on AWS from a public service like TravisCI — the answer is that I can hide my AWS API keys as encrypted environment variables using Travis. For more data on how you tin do this, see the TravisCI encryption docs. Many other continuous integration / commitment services have similar functionality.

Finally, if you are deploying your websites using a public service similar TravisCI, you will most likely want to create a new IAM user for the project, and instead of granting it ambassador access similar we did earlier, only grant it specific permissions to write to S3, and invalidate CloudFront caches. You can practice this using the same method nosotros did above, just but selecting the minimal permissions you need.

A Side Note

I hope you found this guide useful. Now, for a shameless plug.

If you're interested in spider web technologies, and services that make your life every bit a programmer easier, you should definitely requite our service Stormpath a endeavor.

Stormpath is an API service that stores user accounts for your web, mobile, and API services, and handles stuff like authentication, authorization, social login, single sign-on, multi-tenancy, etc. If information technology has to practice with user accounts and user security: we make it easier.

Go check information technology out, sign upward, and build something cool! I use it for all my personal projects and actually enjoy it.