security-studies.net
HTML, CSS, JavaScript • AWS S3, CloudFront, Route 53 • Status: Active
This project (the website you're viewing right now!) involved iteratively designing the appearance, readability and content of the site as a whole. This website is built using HTML, CSS and JavaScript. The technologies used are AWS S3 for static site hosting, AWS' Route 53 for domain registration, and assistance from Google Gemini when I needed extra help.
The entire purpose of this site is to demonstrate and showcase my ability to teach myself new concepts, to put them into use, and demonstrate my understanding of some core underlying technologies; AWS, domain hosting, HTML, CSS, and even how to ask an LLM the right questions.
I wanted this site to be available to anyone, and for it to be available securely, so there is emphasis on accessibility and security.
WordPress is great, and it's got a lot of functionality, but when I was looking into using it, I was frustrated by the visual editor. I learned more by starting with basic HTML and CSS sites.
I started this process by identifying the need for a portfolio. I knew that I wanted it to be a static site, and that I wanted to host it on AWS. I chose AWS because I'm currently working on my Cloud Practitioner certification, and the overlap in learning is beneficial to me. I get a portfolio, and I get more AWS experience.
Some considerations I took into account were ease of development, cost, and the amount of time required to set everything up.
I drew up my outline for the basic structure of the site in Apple Freeform, a basic vector graphics app available on all Apple devices. Defining the structure this way helps with the overall organization of the site, as well as keeping things manageable.
As for costs; the most expensive part of setting this site up will most likely be the domain registration process, at roughly $12 USD/year. The site is fairly miniscule, so it shouldn't come close to the AWS Free Tier for S3 storage.
This might seem obvious to some people, but I wanted to make sure that I did this the right way. The structure of the site looks like this:
.
├── index.html
├── output.css
├── script.js
├── aboutme.html
├── homelab.html
├── projectportfolio.html
├── securitysite.html
├── threatmodel.html
└── images/
├── profile/
└── projects/
├── homelab/
├── projectportfolio/
├── securitysite/
└── threatmodel/In VSCodium, I created a folder labeled "Portfolio Project". Then I created each file, such as index.html, output.css, etc.
This is where a tool like Google Gemini is extremely useful. I had the basic structure of my HTML down, the structure of the folders/files. But while reviewing the site in Preview, I thought, what if this had a LIGHT mode toggle for the site? I had Gemini whip up a quick JavaScript and CSS/HTML toggle system, but the result was not great.
At this point I decided that overall, I liked the simplicity of the site without a dark mode toggle. It might feel clunky for mobile users, and I prefer the dark mode look. At this point I reverted the changes and pushed ahead.
Documenting a project is not easily done, and I have to give a lot of credit to people who are able to document processes well (YouTubers, iFixit, everyone on HowTo.com). Sometimes I feel maybe there's too much information, or maybe not enough. Again, this is where an LLM tool can be extremely useful. It can make critiques about the content, in a helpful manner. It's also incredibly fast.
For capturing images of the process, I simply use macOS' built in Screenshot.app and then copy/paste them into an Apple Notes document. This lets me keep track of them all in one place, and I find it easier than simply putting them in a folder until I'm sure what I want to name the images. Remember, this isn't a How-To guide, this is just documenting my process.
The final phase was deploying to AWS. This turned out to be quite the adventure, with several important lessons learned along the way. Here's my detailed journey through setting up a secure, scalable hosting solution.
I needed two S3 buckets for this setup:
Main Content Bucket:
us-east-2 (Ohio)WWW Redirect Bucket:
us-east-2 for consistencyRoute 53 Domain Registration: Registered directly through Route 53, which automatically created a Hosted Zone.
AWS Certificate Manager (ACM): Certificate requested in us-east-1 (required for CloudFront), covered main domain and wildcard subdomains, used DNS validation for easy setup.
This was the most complex part, requiring two distributions:
Main Site Distribution:
index.html as Default Root ObjectWWW Redirect Distribution:
www subdomain
After setting up all the components, I conducted thorough testing to ensure everything worked as expected. This revealed several issues that needed addressing:
Issues Encountered:
www redirect not working as expectedSolutions Applied:
/* pathwww redirect bucket settingsSecurity Measures:
Cost Breakdown:
After working through all the challenges, the site successfully deployed with full HTTPS security, proper redirects, and optimal performance through CloudFront's CDN. The www subdomain redirect is working perfectly (try it yourself!), and the main site is fully functional and secure.
In fact, if you're reading this right now, you're experiencing the successful result firsthand! The page you're viewing is being served through CloudFront's global CDN, with geographic restrictions limiting access to the United States, proper HTTPS encryption, and all the security measures we discussed. Pretty meta, right? 😎
Status: ✅ Successfully Deployed and Running
While AWS provides robust features and great learning opportunities, I found that other platforms might offer simpler solutions for static sites. For example, I used Netlify for another project, simplesecurity.gg, which is documented in detail on my security site project page.
Netlify's workflow with GitLab proved more seamless for updates and deployments compared to manually uploading to S3. The CI/CD pipeline automatically builds and deploys on push, which streamlines the development process significantly.
However, the AWS approach provided valuable hands-on experience with cloud services, security configurations, and infrastructure management that wouldn't be gained from a more automated platform.