Host a responsive static website for less than a dollar on AWS

Maybe you’re a startup looking to create a new website for your company or an established small business trying to revamp your website.  There are many options when it comes to website design and hosting, as well as content management systems (CMS) such as WordPress and Drupal, to name a few.  In addition to the different technologies available, there are budgetary considerations to make that are associated with each option.  WordPress, at the time of writing, offers $25 per month for managed hosting at the Business tier.  You could also be ambitious and design a website from sratch and host it on AWS S3 for very little money.

Ultimately, the technology that you decide to use may be heavily influenced by your budgetary constraints.  So, how do you create a professional looking website without spending an arm and a leg? Great question! You’ve come to the right place.  The good news is, it is relatively easy to create a beautiful and responsive website that has the look and feel of a professionally designed WordPress website without having to spend lots of money.

If you’re looking to create a static website to help promote your business, then this tutorial may be of interest to you. However, this strategy will not work if you are looking to develop an interactive website, such as a blog.  We will be writing more posts on cost-effective ways to host interactive websites in the near future (stay tuned!).

In this post, I will describe using Bootstrap, Bootstrap Studio, and AWS S3, AWS CloudFront (and optionally AWS ACM) to design and create a professional looking website for very little money.

Here’s the breakdown (pricing based on us-east-1 or US/Canada at the time of writing):

Once you’ve exported your website, we are ready to configure your AWS S3 to serve your new and beautiful static responsive website.  If uploading the files to S3 manually is a hassle, you can use a GitHub repository and AWS CodePipeline to automate deploying your website (more on this in a separate blog).

Now that you have your website files, it’s time to setup an AWS S3 bucket to host your website.  If you haven’t already created an AWS account, get started by creating your free-tier eligible account (https://aws.amazon.com/free/).  Remember, the first 12-months gives you access to free tier services, including the S3 bucket and CloudFront!

Once you’ve created your AWS account, hop on over to your AWS console (http://console.aws.amazon.com) and search for S3 under “Find Services”.

Hopefully you’ll see “S3 Scalable Storage in the Cloud” as one of the options. Click on S3 and navigate to the Amazon S3 console. To create a bucket, which is where you will store you website files, click on the “+ Create bucket” button.

Once you’ve picked a bucket name and region, click create to finish the setup.  You should return to the Amazon S3 console where you will see the bucket you just created. Click on the bucket name to start configuring it for static web hosting.

The first step is to upload your website files to your bucket.  You can easily upload files by dragging and dropping your website files and folders to your S3 bucket, or by clicking the “Upload” button.  Manually uploading your website files every time you update a content can be a hassle.  We can automate this process with GitHub and AWS CodePipeline to update your website each time you push new files to your GitHub repository (more on this in a separate blog).

Once your files are uploaded, we need to configure the correct permissions for your website.  You first want to hop on over to Permissions and disable “Block public access.”

Now that we have disabled “Block public access,” we need to add a policy to allow anyone on the web to be able to view your website files.  To configure your bucket policy to allow public access for anyone on the web, use the example JSON bucket policy below, but make sure to change the bucket name to the one you picked.

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

Place the above bucket policy in the text editor of the Bucket Policy permissions section.

Once bucket policies are set, we need to enable static web hosting for our bucket. Navigate to the properties tab and click “Static web hosting” to enable it and specify “index.html” as your index document. You can optionally specify an error page as well (which I recommend doing).

Voilà, and your website is ready! Navigate to the endpoint URL you saw when configuring your static web hosting to check that your website is visible to the public.  The URL will take the following format:

http://<bucket name>.s3-website-<region>.amazonaws.com

In our example, the endpoint URL is:

http://www.myawesome-example-website.com.s3-website-us-east-1.amazonaws.com

You may have noticed that the website does not use HTTPS.  Although you can change HTTP to HTTPS and use Amazon’s S3 certificate, you cannot use a custom domain with SSL directly from a S3 origin.

Read on to learn how to configure a content delivery network (CDN) and associate it with a custom domain and SSL.

A content delivery network (CDN) is a network of geographically distributed proxy servers that help enhance performance and availability.  There are many CDN services available, but we will be configuring AWS’s CDN service called CloudFront.  From the AWS console dashboard, navigate to CloudFront.

From the CloudFront console we will be creating a new distribution. Click on “Create distribution” then select “Get Started” under Web.

You’ll be directed to a page called “Create Distribution” which has many fields and options, but fret not – it’s really simple.  To start, type the FQDN domain name of your S3 bucket under Origin Domain Name. When you start typing, you’ll notice a drop down list with the bucket you just created – but don’t be fooled! Since we are trying to create a distribution for a static web host, we have to use a different domain name. Remember the URL from earlier?

<bucket name>.s3-website-<region>.amazonaws.com

Using the bucket name and region (us-east-1) from our example, the Origin Domain Name will be:

myawesome-example-website.com.s3-website-us-east-1.amazonaws.com

Next select the following options:

• Viewer Protocol Policy – Redirect HTTP to HTTPS
• Compress Objects Automatically – Yes

We can also configure the CNAME and SSL certificate at this stage, but we will leave that for the next section so that we can walk through the process of creating a distribution using the default CloudFront certificate and automatically assigned domain name. Once the options have been set, click “Create Distribution” and hopefully you are redirected back to the CloudFront console without any errors.

After creation it may take a few minutes for the distribution to complete deployment. You can check on the status periodically to see if the state is “Enabled”. Once enabled, you can navigate to your new distribution using the Domain Name that is assigned. In the above example, I have edited out the ID and Domain Name to fake values (SOMEID and ABCDZYZ.cloudfront.net, respectively). Open a new browser and navigate to the domain name to view your new CDN distributed website!

Cool right?! Ok, now let’s configure an SSL certificate for your custom domain using Amazon’s Certificate Manager.

To get an SSL certificate for your custom domain, you’ll first need a domain name.  If you haven’t purchased a domain name yet, then come back to this step later.

The first step to obtaining an SSL certificate for your custom domain is provisioning a new certificate through Amazon Certificate Manager (ACM). From the AWS console, navigate to ACM. Next, make sure that the region on the top right is set to “N. Virginia (us-east-1)”, and if not change it to “us-east-1”.  ACM certificates requested in the “us-east-1” region are made available to global CloudFront distributions (https://docs.aws.amazon.com/acm/latest/userguide/acm-regions.html).

If this is your first certificate, click on “Get Started.” Otherwise, click on “Request a certificate.” In either case you will be directed to a page asking if you want a public or private certificate. Select “Request a public certificate” and click “Request a certificate.”

Next, add your domain names. You can add each domain name you wish to protect with an SSL (like in the example below) or also use the wildcard (*), for example *.myawesome-example-website.com.

Next, for validation method, I highly recommend DNS validation as it is faster and more reliable.

Click, next, then the “Review” button unless you wish to add tags to your certificate request. You will be asked to review your request one last time. Double check that all values look correct and then click “Confirm and request.”

Once confirmed, you will be presented with the CNAME records that need to be added to your domain to complete the validation. Validation can take anywhere from a few minutes to 24 hours.

After successful validation, you will see the status of your certificate change from “Pending validation” to “Issued” in green.  Once issued, navigate back to CloudFront and click on the distribution you created in the last section. Under the “General” tab click on “Edit.”

Add the domain names that you have issued certificates for under Alternate Domain Names (CNAMEs) and select the Custom SSL Certificate option. In the text box below, a dropdown list should appear with the SSL certificate that you just requested and was issued from the previous steps.

Save the changes you’ve made and let the distribution reconfigure (may take a few minutes). Once complete, you now have a SSL certificate for your custom domain name for your website! Don’t forget to add the CloudFront issued domain name to your domain as a CNAME record so that people can successfully navigate to your website using your custom domain name.

Configuring AWS to host your Bootstrap enabled responsive static website is relatively straight forward.  This can be a great cost-saving strategy for businesses and freelancers wanting to host a static websites to help promote their business.

This tutorial covered the basics for creating a new S3 bucket for your static responsive website, configuring a content delivery network (CDN) and an additional SSL certificate for your custom domain name.  However, there are definite limitations to this implementation, including the inability to create custom forms.  These limitations can be worked around using 3rd party solutions, such as Google Forms or SendGrid’s embedded contact form.

I hope this tutorial has been helpful in getting you started with your website project, and hopefully you’ll keep us in mind when you are ready to expand your tech to the cloud.