Creating a Simple Website on a Budget
Static website hosted on Amazon Simple Storage Service (S3)
NOTE: I have since migrated my website onto WordPress. Updating static pages was getting unwieldy, and I wanted to focus on content rather than website building. Therefore, this article does not reflect how this current website is built.
I’ve spent quite a bit of time thinking about how I wanted to deploy this website. Given I have little to no web development experience and wanted to keep costs minimal, I downloaded a premade front-end web template, edited the html pages and a bit of the javascript code, and uploaded it to Amazon S3. Some of the key features I implemented was SSL encryption and an API for the Contact Me form to post data to a database and notify me of the new message via e-mail.
Architecture
Below is an architecture diagram showing the services I used for this website.
A: DNS Resolution
I used Route 53, which is AWS’s DNS service. Within Route 53, I purchased my domain name and set up alias records to redirect users to to the CloudFront Distribution when they perform a DNS lookup for joshuacmin.com or www.joshuacmin.com.
B: Static Content Hosting
For static content hosting, I used CloudFront and S3. Cloudfront is a content delivery network, which serves content to end users quickly and securely. Cloudfront allows for a SSL connection to be made between the end user and AWS infrastructure, which was the key reason I decided to use it. Amazon S3, or Simple Storage Service, stores all of my static content with high durability and availability. Whenever a web request comes in, CloudFront pulls the objects from Amazon S3 and serves it to the end user. It also caches objects for 24 hours, reducing latency and the need to constantly pull files from S3.
C: Contact Webform Submission
The contact page of the website has a form where users can submit data. Setting this up took quite a bit of work as it required API Gateway, Lambda, DynamoDB, and SNS. API gateway provides an endpoint for users to post data. From there, a Lambda function is invoked. The Lambda function stores the posted data into DynamoDB, a NoSQL database, and publishes a message to Simple Notification Service (SNS). SNS then sends an email to notify me of a new message.
Cost
I mentioned before that cost is one of the key constraints for this project. Therefore, I developed a cost estimate spreadsheet for hosting the website on AWS.
You can see above that although relatively cheap (even cheaper in free tier), the AWS pricing structure is complicated. For a simple static website, there are 18 different line items to account for! I guess I encountered one of the pitfalls of cloud computing pretty early on. I also noticed that the CloudFront Data Transfer Out line item will incur a high cost if there is an increase in number of users. This made me realize the importance of minimizing file sizes to control costs.
Implementation
I will publish the implementation details on GitHub and post the link here shortly. Stay Tuned!
Closing Remarks
Currently, my website is pretty simple, and I could certainly optimize many things. However, I view this as a work in progress and hope to provide more features and better content over time. As always, I am open to feedback anyone has.