If you’re building a website for your business or personal brand, there are many hosting options out there. Hosting providers like GoDaddy or Bluehost are popular choices for many people. However, traditional hosting options can create some performance bottlenecks for your site, especially the cheaper plans that often come with limited hardware resources.
That’s where solutions like Amazon S3 come in. S3 is a reliable storage service offered by AWS, but it can also be used to host static websites that don’t require a complex backend.
This project shows how to deploy a fast, secure, and low-cost static website using Amazon S3 and other AWS services. It’s perfect for personal portfolios, company landing pages, or any website that doesn’t need a backend server. By combining S3 with other AWS tools, we’ll build a fast, secure, reliable, and scalable website. Follow along if you’re interested in this kind of solution.
Problem Being Solved
Most websites today use traditional hosting services that can be slow, costly, and come with limited resources, especially the more affordable plans. These plans also often struggle to scale as the business grows and traffic increases.
To fix this issue, using AWS solutions like S3 is a great choice, especially for static websites. AWS S3 is a great option for portfolios, blogs, or landing pages that don’t need server-side features like PHP or databases but may benefit from AWS’s scalability and the ability to integrate with other AWS services for added functionality.
AWS Services Used
- Amazon S3: S3 stores and serves our website files (HTML, CSS, JS, images).
- Amazon CloudFront: Delivers the content quickly to users across the world using edge locations. I will add SSL (HTTPS) for secure browsing through Cloudfront and AWS Certificate Manager.
- AWS WAF: Protects the website from attacks like bots and SQL injection.
Procedure
This project included five key steps:
Step #1: Uploading Files to S3 and Enabling Basic Security
I started by uploading all the static website files, including HTML, CSS, JavaScript, and images to an S3 bucket. For this project, I didn’t write the website code from scratch. Instead, I used a template from a site called HTML5 UP, which offers free website templates that can be used for personal or project work. After that, I also enabled static website hosting on the bucket so it could serve the files directly to users.
Finally, I also enabled public access for the bucket, since static websites need to be accessible over the internet. Then, I added a bucket policy to allow public read access to the files making sure only the necessary permissions were given to avoid security risks.
Step #2: Set Up CloudFront
Next, I created a CloudFront distribution and set the S3 bucket as the origin. This helps deliver content faster by caching it at AWS edge locations around the world. I enabled features like caching and compression to improve performance and reduce load times for visitors in different regions.
To serve the website under my custom domain (s3.nilescript.com), I set the alternate domain name (CNAME) in the CloudFront distribution settings. I also selected the SSL certificate (created earlier in AWS Certificate Manager) to enable HTTPS for the domain. More in this in step #3.
After setting up the distribution, I logged into my Namecheap account (the DNS provider I use) and updated the domain’s DNS settings. I added a CNAME record pointing my custom domain (s3.nilescript.com ) to the CloudFront distribution’s domain name. Once the DNS changes propagated, the custom domain began pointing to the CloudFront-hosted static site.
Enabled HTTPS with Certificate Manager
To secure the site, I used AWS Certificate Manager to request a free SSL certificate. Once the certificate was approved, I attached it to the CloudFront distribution to ensure all traffic used HTTPS.
During the request process, I also had to verify to AWS that I own the domain. To do this, I added a CNAME record in my Namecheap DNS settings, using the exact name and value provided by AWS (as shown in the above screenshot). After the CNAME record was added and the domain was verified, the certificate was issued. I then attached the SSL certificate to my CloudFront distribution, ensuring that all traffic to the site is served over HTTPS for better security and trust.
Secured the Site with AWS WAF
I added an extra layer of protection by creating a Web ACL using AWS WAF and connecting it to CloudFront. The default WAF settings of the firewall include core protections such as IP blocking, rate limiting, threat detection using managed rules (like SQL injection and XSS), bot filtering, and detailed logging to monitor and respond to suspicious activity.
Final Thoughts
Hosting a static website on Amazon S3 is a great way to achieve speed, security, and low cost, especially for personal projects, portfolios, and landing pages. However, it’s important to note that S3 isn’t the best fit for every kind of website. If your site needs server-side features or a backend, AWS solutions like EC2 or Lightsail may be more suitable. The best solution always depends on your project’s specific needs.
