Introduction

when people think of making a personal site what first comes to mind is the cost of hosting a site that probably won't get that much visits during the year, but i always though it's nice to have a personal site, and not just the social networks presence, it helps show who you are in a creative way, while the fact still stands it won't get much visits. This is my case and that's why i decided to use AWS services and the serverless approche to host my site without incurring cost (since it's low on pageviews).

AWS is known for being one of the leading cloud hosting platform, but its known for not being very cost effective when it comes to small sites, especially when you have other options like (DigitalOcean/Linode/Hetzner) that offers cloud servers as low as 2.5$, but AWS covers a varity of services that would be nice to have access to.

In this article I will show you an example of how i managed to host my site (naemh.com) on AWS without paying more than a few bucks per year, while harvesting the power of AWS services.

Note: this solution works best for moderately/low visited sites, high traffic sites might need to consider a better option. also we will cover a high level architecture and pricing rather than technical implementation and configuration. this article assumes previous technical knowledge.

Architecture

My site uses NuxtJs framework using SPA (Single Page Application) mode, we're not gonna go through the development process as it's not the focus of this post.

Assuming you have developed your site on your machine, the first obvious thing is to push your code into a git repo for better CI/CD, I'm using github but feel free to use any other service.

After pushing your code let's jump into the AWS part, so the AWS services we will be using is

• S3 for static files hosting
• Codepipeline for CI/CD
• Route 53

Optional if you have a backend part

• Lambda
• API Gateway
• CloudWatch
• DynamoDB

Below is a diagram showing how to setup these services

So the first thing you need to do is to register your domain using Route53 then create an S3 bucket with the same domain name and point your it to an S3 bucket, example if your domain was naemh.com then your bucket name should also be naemh.com.

Next let's setup the CI/CD by creating a CodePipeline that takes your code from github for example and build it and deploy it to the S3 bucket we created, in my case i used NodeJs to build the static pages from Nuxt and then these files got pushed to the S3 bucket

Let's test our setup by making a commit to the git repository and making sure that our build pipeline ran successfully, so this concludes the first part of your site hosting, in the next section we will explore what additional things i can do.

Extra addons

In case your app needs a backend API we can use AWS Lambda functions with API Gateway to make calls to the backend and fetch some data, also if you need a database to store your data we can use DynamoDB.

Pricing: let's crunch some numbers

Note: if you're new to AWS then when you sign up you get a Free tier for a year, which means basically for your personal site you don't pay anything.

An important fact when dealing with the pricing is that AWS prices change with regions so we cant have an exact pricing estimate because everything depends on your region of AWS but we will take Ohio region for example and do the math.

so assuming you will get around 1000 pageviews per month because lets face it its a personal site, so that's 12000 requests per year, lets see whats the expected billing amount you will get

1. Route53 and Hosted zones

   Domain name registration 10-15$ on average, it can be less or a little more depending on your domain (.com .org etc) i paid 12$, i won't be considering the domain registration cost since its a global thing across all hosting platforms.

   every hosted zone occur 0.50$ per month so that's 6$ per year

2. S3

   assuming you site takes about 500 MB, even if it takes more it's not a big deal, don't worry

   (storage $0.023 per GB) + ($0.0004 per 1000 GET request) + (Transfer $0.00 per GB Up to 1 GB / Month) = 0.1428$ yearly

3. CodePipeline and CodeBuild

   CodePipeline pricing is $1.00 per active pipeline, an active pipeline basically means it has been created for more than 30 days and you deployed at least once to your website, this means that every month you dont push any changes you won't be charged that 1$, for a personal site you won't change much once you finalized everything so you will be pushing a lot the first 30 days and then you probably will forget you had a site.

   Codebuild charges $0.005 per minute on the lowest instance type, in my case npm build takes around 2.2 minutes per build so if i would to push 5 times per month thats 0.011$ per month and thus 0.132$ per year

   so to calculate this im gonna assume that our pipeline will be active 3 month per year, so that's 3$ yearly

4. Summary per year:

   Route52 hosted zone: 6$

   S3: 0.1428$

   CodePipeline and CodeBuid: 3.132$

   
   

   in total : ~9.27$ per year

   Note: if you hosted your code on github you can use Github actions for free builds up to 2000 minutes per month this is what i ended up doing.

Conclusion

of course there are always alternatives with less cost, but this is my example of what i pay for my site, i chose AWS since i'm planning to expand to other services like API gateway/DynamDB ...etc , also the cost might be much less than calculated like if you hosted your site and never updated it then you wont pay for your pipelines thats 3$ less.

I hope you enjoyed this overview and please let me know if you have any questions or feedback.