SEO friendly AWS static website with SSL

Q: What is static website?
A: It is website without dynamic data.

A: What is dynamic data?
Q: Well, it is data that can or can't be changed due to user's (visitor) interactions, user's (visitor) location, some internal conditions (for example whether conditions, currency exchange rate) and so-on.

A: When do I need static website?
Q: Well, you probably don't need it at all. From my perspective static website is great decision if you keep something in the Internet with no frequent changes. For example, you need company's website, but you don't really have many news and information that you need to share on daily / monthly basis. You just need it, because others have it. Well, you just need it because you need to show your contact details and explain what you do.

Let's go ahead and do static website with almost no cost (just domain registration fee if you don't have your domain). This is what we are going to build.

Static website diagram (AWS)

Prerequisites

In order to build your personal static website you will need the following:

  • AWS account (even free tier will work);
  • Registered domain (if you don't have it, don't worry, we will walk through this in AWS console);
  • Sample website files (if you don't have it, don't worry, we can create sample, you can update your content later);
  • Basic knowledge on AWS. I would suggest to check fundamentals of AWS;
  • Mail service for enabling MX records and receiving emails for your domain (e.g. gmail, yandex or any other of your choice).

S3 with Static Website Hosting

Go to "S3" section of your AWS console and create two buckets, - "example.com" and "www.example.com". Now let's enable static website service on each domain by typing on "Static Website Hosting" and selecting actions, that we want to perform on ether show files from the bucket or redirect to another bucket. It does not really matter where you store your bucket, since we will be using CloudFront for caching data across entire world through edge locations of AWS.

So if we plan to serve our website's content from naked domain, setup your "example.com" accordingly by pointing it's configuration to index and error files. Another bucket ("www.example.com") should be configured with "Redirect requests" to naked domain.

One more important settings that we need to place to our new buckets - bucket policy since we want to have all new data automatically have public access. Let's add this policy in "Permissions" -> "Policy":


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::example.com/*"
        }
    ]
}

Make sure you use this policy for both buckets, but change Resource part accordingly for "www" bucket. There is good AWS article about it.

S3 configuration is done, let's move to CloudFront now.

Amazon Certificate Manager (ACM) for SSL

Since we want to access our website using HTTPS protocol, let's get SSL through ACM (Amazon Service). This is free service, so you don't have to worry about additional costs in your monthly billing. Make sure you request for both naked domain and your subdomain (I used asterisk symbol to have all my further subdomains SSL'ed by default). At least I'll need it for "www" and "mail" zone. You will need to configure "admin@domain" email in order to confirm this action. You can use of the free service for mail (I have short instruction down below in Route 53 section of this tutorial).

CloudFront configuration

Now when we have our S3 buckets, SSL certificates we can start to create new distributions for serving our static website globally. Jump to CloudFront section and create two distributions.

CloudFront Distribution with SSL and CNAME

Make sure you have CNAME with your domain name and pick your ACM SSL cert from the drop down section "Customer SSL Certificate".

The most important part here is "Origin Domain Name". Make sure you don't go your bucket name from list, instead, copy and paste your endpoint. It should be something like this: your-domain.s3-website.region.amazonaws.com. Make sure you have CNAME and Origin Domain Name fit each other.

Amazon Route 53 and public hosted zones

Whether you have or not your own domain, sign in into your AWS console and jump to "Route 53" section where we are going to configure our domain records (and register new domain if you don't have it yet).

Domain registration

Let's register our domain by going to "register new domain". If you have yours, just skip this part.

AWS Route 53 domain registration

Domain registration should be straight forward, so I skip this part. At the end of this you should be able to see your domain in "Registered domains" section.

NS configuration

Now, let's jump into "Hosted zones" and add our new domain. Since we want everybody access our website, let's put "Public Hosted Zone" in it's type. Click "create" and you should be in your zones configuration. We need to grab NS records and point our domain to those records whether you have domain registered through AWS or through domain registrator. Usually you are looking at four NS records something like the below:


ns-111.awsdns-44.com.
ns-2222.awsdns-33.org.
ns-3333.awsdns-22.net.
ns-4444.awsdns-11.co.uk.

Don't forget to grab "." (dot) at the end of each zone since it is required.

A zones configuration (both naked and www)

We want to use CloudFront for our A zones. Let's "Create Record Set" and select "A - IPv4 address" and set "Alias" to "Yes". You can select from drop down field target that you want to use. In our case we have two CloudFront distributions and we want to setup naked and www zones. Don't mix them up. Decide which one you want to redirect (www -> naked or vise versa). See my example for www below:

A zone configuration for www

At the end of this configuration we need two "A" records, - for naked domain and www.

MX and CNAME (optionally) for mail services

For the sake of this tutorial I used Yandex mail service (free). You just need to add your domain and set MX record. If you'd like to get personal mail.something.domain address to access web-interface for mail check, add CNAME record to point to domain.mail.yandex.net.. MX record is super simple as well, just use 10 mx.yandex.net. in your MX record value. That's it, proceed with domain validation in pdd.yandex.ru and start making your mailboxes. One of the mailbox you'll need later is "admin@domain" for ACM approval.

Website content

Final step here is upload your "index.html" and "error.html" files to primary bucket (depends on which way you do redirect). You can do this either with AWS CLI, s3_website, CloudBerry Explorer or even through web console.

Now, try to check your www, non-www, https, http etc. You should be able to see your content from the only address, which is good for SEO!

That's it. If you have any questions - welcome to the comments!


In short, this is about:
#static site
#seo
#amazon

Start discussion:
Related articles:
122 what is possible with aws free tier preview
I made light talk on one of our recent #AWSRus community gathering in Moscow and decided to discover this topic with further series of posts in my blog covering various AWS services. ... more
about 1 month#free tier #amazon
81 mount aws s3 bucket to your el capitan preview
Learn how to mount S3 bucket to your Mac OS ... more
120 ec2 user data script example preview
Launching AWS EC2 can be supplied by something what is known as "user data" and it helps to have things ready before you access it. ... more
111 data backup and disaster recovery with aws preview
CloudAcademy webinar: how to use AWS services for Backup and DR challenges. I am presenter! ... more
58 jekyll for static site kb with search engine json and lunr js based preview
Not too bad combination for static web site content delivery. I even can put it to AWS S3 for serving through CloudFront. ... more
118 how to send sms using amazon sns and python preview
Send text messages (SMS) with few lines of Python code using Amazon SNS and boto3 SDK. ... more
79 mount aws s3 bucket to your debian preview
In this very short tutorial we are going to mount S3 bucket from AWS to the local folder of Debian. ... more
88 amazon solutions architect associate exam preview
August, 9th, 2016 - passed my Amazon CSAA. Few tips I'd love to share here. ... more
61 amazon web services cloudfront with subdirectory preview
In this article we are going to set up CloudFront for static site. And there is nice tip how to nested content (i.e. subfolders) available. ... more
101 aws ec2 linux backup preview
Amazon Web Services (AWS) has its own AWS Linux AMI (also free tier). There are several reasons you want to use this AMI for your projects. ... more
110 awsrus russian st petersburg user group for aws preview
AWSRus — Official AWS User Group Russia (St. Petersburg). ... more
116 aws efs windows preview
AWS Elastic File System is scalable file system in the cloud, requires NFSv4.1 client and does not support Windows at the moment. However let's see what we can do.. ... more
119 smtp server for notifications preview
AWS SES supports SMTP settings for sending through it-self. This is really helpful if we want to configure personal outbound server. ... more
121 aws ec2 user data script windows preview
How to pre-deploy App using user data script for Windows OS with powershell powered script in EC2? Example inside. ... more