How To Update Static S3 Website Without Uploading The Entire Site

Last updated on Jan 19, 2021

Hosting static websites is becoming more and more popular, and there is no dubiousness that we volition exist seeing many more websites shifting towards serverless. Why? The reply is simple: static website hosting is convenient. With all the advantages of static websites, hither it is: nosotros are serving our entire website sufle.io serverless! Let'due south start by looking at the advantages of hosting static websites on Amazon S3. Then nosotros'll walk through the steps to create our instance static website: configure our S3 bucket, provision our custom SSL certificate for our custom DNS and lastly speed upward our static website with Amazon CloudFront.

The Advantages of Static Websites

First things first, hosting a static website is extremely simple, no specific programming language or framework is needed. All you need to host your website on Amazon S3 is serving your static assets. You lot don't worry nigh server management or maintenance: create your static file, and then replicate them all effectually the world for maximum speed via CDN. Static websites reduce the development time, effort, toll and expertise needed to serve your website.

Speaking of the speed, your content will exist ready to be served when requested since your website is non connected to a database or a template. This reduces the TTFB drastically, and allows you to achieve what y'all demand to compete: maximum speed. Beyond the simplicity and speed advantages of hosting static websites, there are also huge performance comeback opportunities through reliability and scalability of the cloud. No database means no worries on server health when there is unexpected traffic. You can hands scale your website without compromising your operation. Also the static files and their replicates increase your reliability, which means that you don't have to worry about downtimes or failures when something goes wrong.

Final but not the least, static websites likewise meliorate your security posture, since you don't accept to manage and handle the server updates or patches for continuous security events and fixes.

In this blog mail, we volition walk through basic steps to host our website on Amazon S3. Other services nosotros will be using are Amazon Route 53, Amazon CloudFront and AWS Certificate Managing director.

Serving Our Static Website with Custom Domain

In this case, we want to serve our static website with the custom domain of our choice rather than machine-generated endpoints, which would exist confusing and inconvenient for our visitors. To exercise this, we'll utilise Amazon Route 53, AWS'south DNS solution. We have an existing domain named sufle.deject in our account, just for those who are new to AWS Route 53 you can simply buy a domain name. You can also import your existing zone records and update the proper noun server records in Route 53 to direct traffic to your existing domain name that you lot have already bought from a different DNS provider. Said that, we will exist continuing with creating a subdomain named anyonecandoit.sufle.cloud for our example static website. Please note that, the proper noun of your subdomain (or the name of your root domain, if you lot volition exist directing your subdomain to the root domain) should be exactly the same as your bucket name.

Creating Our Bucket with Amazon S3

So, let's go ahead and create our bucket. Call up, although the bucket view is global and you can see all your separate buckets within the same view, each bucket is created in a specific region of your choice.

For our case static website, I'll name my S3 bucket anyonecandoit.sufle.deject (the same name with my subdomain name) and choose the region as eu-west-i (Republic of ireland), which is the closest region for my users. Besides the saucepan name and region, we'll get out everything as default for now.

Create an S3 Bucket

Now, information technology is time to upload our files to our S3 bucket. Nosotros must take an index.html and error.html files by default. I've too added a new-folio.html and my assets to the bucket to add some flavor for our example static website. You tin can hands elevate your called files to the uploading surface area and hitting Upload, leaving permissions and properties as default for now. We'll handle the permissions in the following steps.

Upload your files to S3 Bucket

Enabling Our S3 Bucket to Host a Static Website

Now, it is time to enable our S3 bucket's static website hosting option. Become to the Backdrop department from the height of your saucepan view and choose Static Website Hosting. Don't forget to blazon your required index.html and error.html files, and make sure you have checked the option: Use this saucepan to host a website.

Enable static website hosting in S3 Bucket

Now, y'all can come across that the saucepan hosting is enabled.

Static website hosting enabled in S3 Bucket

Disabling The Default Block Public Access Setting of Our Bucket

Now, information technology is time to alter our access level permissions of our bucket, since we exercise want to serve our static website to the users all around the globe. However, equally you should have noticed when you first created your S3 bucket, the buckets and objects are non public by default.

S3 Bucket and objects are not public

For example when nosotros effort to admission our index.html file using the object URL within the object, we go the mistake message that says admission is denied. Since the saucepan is not public at all, we can't make the individual alphabetize.html file public through the object level actions. So, we'll beginning by enabling public access to our saucepan.

Select your bucket, click on edit public access settings of your bucket and uncheck "block all public access".

Edit S3 buckets public access settings

The console will ask yous to confirm your choice in this step. But type confirm and go ahead.

DNS Validation and Custom SSL Certificates with Amazon Route 53 and AWS Document Manager

Before we get to piece of work with Amazon CloudFront to speed up our website, there is 1 concluding thing we should do. Nosotros desire to enable only HTTPS access to our static website for security. Since we are using our custom domain, we demand a Custom SSL document. We can simply provision our Custom SSL Certificate with AWS Certificate Manager. Go to AWS Certificate Manager and choose "Provision Certificates". We'll request a public certificate for our static website. I'll simply type my domain name, including the wildcard " * " and a dot (.) before my domain proper name and too add my root domain to get my domain fully qualified. Please notation that the wildcard SSL certificate is not a requirement here. I plan to use my domain in my time to come test projects with maybe some other subdomains, so the wildcard SSL certificate will enable me to use it for all my subdomains. You can e'er create individual certificates for your subdomains if you similar. Just one little only important detail: you must create your ACM certificates in the us-east-1 region to exist able to use them in CloudFront distribution.

Provision SSL Certificate in ACM

In the next step, cull DNS validation as the validation method and ostend your validation.

DNS Validation

Finally, consign your DNS configuration in the last footstep of ACM to a file and download it. Copy the tape name of your domain. Now go to your hosted zone on Route 53, select "Create Tape". I've done this using the onetime panel, and then the steps might differ. Anyhow, the tape proper noun will be the record name written in your CSV file that you've copied. Choose CNAME - Canonical Proper noun for the type of your tape. Leaving TTL as default, re-create and paste the record value written in the CSV file to the value area. Setting our routing policy every bit uncomplicated, we then become alee and create our tape gear up. Now, we've validated our DNS to become eligible for the certification. For simplicity, y'all can likewise but click to Create a Record Set up in Route 53 when you are done creating your certificates in ACM.

Speeding Up Our Website with Amazon CloudFront

Your certificate volition exist approved in a short amount of time. In this stride, we finally get to the Amazon CloudFront to speed up our static website. Amazon CloudFront is simply AWS'due south CDN offering, which enables you to send and cache your website at border locations all around the world and serve it much faster. In this way, the users will be able to accomplish the cached content inside the nearest edge location instead of requesting it from the origin of your S3 bucket. Click to create a web distribution, and select your bucket's endpoint in the dropdown menu of the Origin Domain Name.

We'll likewise select Yeah for restricting bucket access, since nosotros don't want our website visitors to reach our bucket directly. Using our existing identity, nosotros'll also select updating our S3 bucket policy to enable read permissions. One last thing to exercise for origin settings is that defining a header and value for our web distribution. Define your custom origin header equally Referer and type a value that only you know to ensure but you lot tin can have direct access to your bucket. In this way, we will only grant read admission to our users through CloudFront distribution, restricting direct access and protecting our bucket.

CloudFront create distribution

Continuing with the Default Cache Behaviour Settings section, nosotros enable Redirect HTTP to HTTPS because we only want secure access to our website.

CloudFront cache behavior settings Redirect HTTP to HTTPS

For the Distribution Settings department, we type our called subdomain name, anyonecandoit.sufle.cloud for the CNAME area. Also, we will exist using the Custom SSL Certificate that we have just created considering we want to use our custom domain rather than the CloudFront domain name. Allow'southward become ahead and select our custom SSL certificate.

CloudFront set Custom SSL Certificate

Leaving everything else as default, we create our distribution. Now, we'll look until the distribution condition is Deployed, which might take some time.

Editing Our Bucket Policy with Our CloudFront Settings

Now, get dorsum to your saucepan, and create a saucepan policy based on your newly generated custom origin header and value in the CloudFront web distribution.

                      {            "Version"            :            "2012-10-17"            ,            "Id"            :            "http referer policy instance"            ,            "Argument"            :            [            {            "Sid"            :            "Permit get requests originating from yoursubdomain."            ,            "Effect"            :            "Allow"            ,            "Primary"            :            "*"            ,            "Activity"            :            [            "s3:GetObject"            ,            "s3:GetObjectVersion"            ]            ,            "Resource"            :            "arn:aws:s3:::yourbucket/*"            ,            "Condition"            :            {            "StringLike"            :            {            "aws:Referer"            :            "your key value"            }            }            }            ]            }

Final Pace: Configuring our Route 53 Record Gear up with Our CloudFront Distribution

Go to Amazon Road 53, select your zone and create a tape set up again. For the record name, nosotros'll type our subdomain proper noun, anyonecandoit. Choose the type equally CNAME, select Allonym as No. We want our custom domain to serve from the CloudFront web distribution, then go ahead and copy your CloudFront domain proper noun and paste it into the value area of your new tape set up in Road 53. Leave TTL and Routing Policy equally default and save the record prepare.

Create Record CNAME on Route53

Voila! Get type your domain name into your browser and run into your website. We are now serving our static website through our S3 bucket: https://anyonecandoit.sufle.cloud/ No servers, no extra evolution effort, almost no fourth dimension!

To brand our links wait prettier, we can remove the page extensions, Amazon S3 supports that. However, please note that your index.html file has to stay with the extension and while uploading your extensionless html files, you should brand sure that their Content-Blazon metadata is set to text/html. That is the way Amazon S3 understands and recognizes information technology as an html file.

Open your html file and remove extensions from your links.

                      <!--Remove .html from link-->                                          <a              href                              =                "/new-page"                            >            Permit's go to new page!                              </a              >

At present become dorsum to your S3 bucket and upload your updated files. Select your file, click actions and rename, and remove the .html extension.

S3 remove extension of html file

And so, from the Actions tab once again, select metadata and make sure that at that place is a Content-Blazon key with text/html value exists. If non, add this central/value pair through adding a new metadata. Y'all tin can generally upload your extensionless files to your bucket and then alter their metadata, this as well works without updating your files' extensions individually.

S3 change Content-Type of object

That's all! You can go further and integrate your statically generated website's (Gatsby, Hugo, Next.js etc) repository to AWS CodePipeline to build, copy to output to your bucket and automate all of this process, as we practise for our website, sufle.io.