My personal website visitable at https://www.manuelenolli.ch 🚀
The base framework is Next.js written in Typescript, additional libraries are:
- PrimeReact: UI components
- Tailwind CSS: CSS framework for styling
- tsparticles: Particles animation
- gsap: Animation library
- AOS: Animate on scroll library
- Octokit: GitHub API client via GraphQL
- node: 20.16.0
- yarn: 1.22.22
yarn installyarn devsrc/ # All source code
app/ # pages and components
layout.tsx # Header and Providers
page.tsx # Home Page
error.tsx # Error Page
components/ # Components
constants/ # Constants
context/ # Contexts
providers/ # Providers
services/ # Services
public/ # static assets
assets/ # images, icons, etc.The website is hosted on AWS using the following services:
- Amazon S3: Static website hosting
- AWS Lambda: Serverless functions (Yes, NextJs Server Side Rendering on AWS Lambda 😄)
- Amazon API Gateway: API management
- Amazon CloudFront: Content delivery network
- Amazon Route 53: Domain name management
- Amazon Certificate Manager: SSL certificates
- Amazon WAF: Web application firewall
- Amazon Simple Email Service: Manage email
The AWS Infrastructure can be seen in the following diagram:
A more detailed explanation of the AWS Infrastructure can be found in the project PersonalWebsiteAWS, where the Infrastructure as Code is implemented using the AWS CDK.
In addition, there is an email service to create the "contact me" form that uses AWS SES, more details on AwsLambdaSimpleEmailService.
For fetching my github repositories I created another service using lambda: AwsLambdaGithubRepositoriesService.
This section provides an overview of the estimated costs for hosting a personal website on AWS.
| Service | Free Tier Limit | Sources |
|---|---|---|
| CloudFront | 10,000,000 HTTPS requests per month | CloudFront Pricing |
| API Gateway | First 1,000,000 HTTP API calls per month | API Gateway Pricing |
| Lambda | 1,000,000 free requests per month | Lambda Pricing |
| S3 (Amazon Simple Storage Service) | 5GB of standard storage, 20,000 GET requests, and 2,000 PUT requests for the first 12 months. For a personal website, the cost would be less than $3.00 per month. | S3 Pricing |
| Simple Email Service | 3,000 messages per year | SES Pricing |
Those resources are not included into the project, I configured them manually on AWS console.
| Service | Cost | Sources |
|---|---|---|
| Route 53 | $0.50 per month for domain name management | Route 53 Pricing |
| Budgets | $0.01 per report to monitor costs and usage | Budgets Pricing |
| Certificate Manager (SSL) | Free SSL certificates for use with AWS services | Certificate Manager Pricing |
| WAF (Web Application Firewall) | $5.00 per month for web security protection | WAF Pricing |
The total monthly cost for the AWS infrastructure is estimated to be less than $5.00 per month (plus $5.00 for security), considering the resources used and the free tier limits.
Not bad for a personal website! 🚀
The CI/CD pipeline is implemented using GitHub Actions, the workflow is defined in the file main.yml.
There are four steps:
- Tests: Run the tests (Never failed a test 😎)
- Build: Build the Next.js application with cache and divide the output into
static,dependenciesandcodefiles. - Upload:
- Upload the
staticfiles to the S3 bucket. - Upload the
dependenciesfiles to the Lambda Layer. - Upload the
codefiles to the Lambda function.
- Upload the
- Refresh Lambda: Refresh the Lambda function to apply the changes and delete older layer versions.