Intro
Building and maintaining a personal website doesn't have to be complicated or expensive. Over the past few months, I've crafted a straightforward, scalable solution for hosting my site. While there are many ways to host a website, I've chosen a combination of simple tools to give me speed, reliability, and control over my content. This approach is both beginner-friendly and scalable for those looking to take their website further down the road.
Here's a high-level breakdown of how I host my personal website, from development to deployment:
Developing Locally with HTML and CSS
The foundation of my website is a simple HTML and CSS structure. I don't rely on complex frameworks or content management systems, just plain web technologies that keep the process lightweight and easy to manage. I prefer this setup because it gives me complete control over the design and structure of the website without the overhead of maintaining extra software.
Version Control with GitHub
Once I'm happy with how my site looks locally, I push the changes to a GitHub repository. Version control is crucial because it allows me to track the history of my changes and collaborate with others, or roll back to previous versions if needed.
This is where automation comes into play: Whenever I push changes to the repository, it triggers a GitHub Action to automate the deployment process. This is a huge time-saver and ensures that my website is always up-to-date without requiring manual intervention.
Deploying Assets to Amazon S3
Once the GitHub Action is triggered, the action automatically uploads the website files (HTML, CSS, images, and any other assets) to Amazon S3 (Simple Storage Service). S3 is a highly scalable and durable storage solution that is perfect for everything from static websites like mine to massive data lakes. It's fast, reliable, and cheap, making it an ideal choice for hosting the files that make up the site.
CloudFront for CDN and Caching
To speed up the delivery of my website and provide better performance to users around the world, I use Amazon CloudFront, which is a Content Delivery Network (CDN). CloudFront caches copies of my website's static assets in edge locations around the globe, meaning visitors can download content from a server that's closer to their physical location. This reduces latency and improves load times significantly.
Each time I update my website, the GitHub Action not only uploads the new files to S3 but also invalidates the cached assets in CloudFront. This step ensures that the latest version of my website is served to all visitors, without them seeing outdated content. Once the cache is invalidated, CloudFront quickly re-caches the new assets, providing an up-to-date experience for everyone.
Protecting My Website with WAF
One of the challenges that comes with hosting a website is dealing with unwanted bot traffic. Bots can slow down your website, scrape content, or even try to exploit vulnerabilities. To prevent this, I've set up AWS WAF (Web Application Firewall), which helps protect my site from malicious traffic.
WAF allows me to define rules that filter out bad traffic before it reaches my website. It's like having a security guard who checks each visitor to make sure they're legitimate. This setup helps keep my website running smoothly and free from unnecessary disruptions.
The Result: A Fast, Reliable, and Secure Website
With these tools in place, I have a website that is:
- Fast: Thanks to S3 and CloudFront, my website loads quickly, regardless of where visitors are located.
- Reliable: By using Amazon S3, I ensure my site's files are stored safely and can be accessed without fail.
- Secure: WAF blocks unwanted bot traffic, ensuring my site isn't overwhelmed or attacked by malicious users.
While the process is largely automated, I still have full control over the website's content. Every change I make is reflected almost immediately, and I can trust that the infrastructure supporting the site will keep running smoothly.
Benefits of This Approach for Content Creators
As someone who focuses on creating content rather than managing infrastructure, this setup has several advantages:
- Low maintenance overhead. Once set up, the system runs with minimal intervention.
- Cost-effective scaling. S3 and CloudFront scale automatically with traffic, and I only pay for what I use.
- Focus on content. I spend more time writing and designing, less time troubleshooting server issues.
- Reliable performance. Even if a post goes viral, the infrastructure handles the load without breaking a sweat.
