
From a 'simple' website to a webapplication in less than 10 days
Photo by Blue Origin on blueorigin.com
Oh, this escalated quickly…
On the 27th of May 2025 I officially launched my new website but I never made it to finish this blog post telling a bit around the creationg and the architecture.
When I launched the website, it was a “simple” website built on Astro - see my launch-blog on it.
Within less than 10 days, the Website became a web application as I added a “contact” screen as well as a “mailing list”. Unfortunately I never finished this blog post until last week :-)
Architecture
The homepage is nowadays built using a modern JAMstack architecture with Astro as the frontend framework and AWS services for the backend infrastructure. The site includes a blog, social media feed, and contact functionality.
graph TD
subgraph "Frontend"
A[Astro Blog]
B[Static Assets]
end
subgraph "AWS Infrastructure"
C[CloudFront]
D[S3 Bucket]
E[API Gateway]
F[Lambda Functions]
G[DynamoDB]
H[SSM Parameter Store]
I[Step Functions]
J[EventBridge]
K[CodeBuild]
L[CloudWatch]
end
subgraph "External Services"
M[GitHub Repository]
N[Social Media APIs]
end
A --> B
M --> K
K --> D
D --> C
C --> Users
Users --> E
E --> F
F --> G
F --> H
J --> I
I --> F
F --> NThe website uses AWS CloudWatch RUM (Real User Monitoring) to keep track of visitors.
Deployment Process
The deployment process is mainly based on Github actions, but there is a Codebuild component to it which is required as the homepage integrated all of my social media feeds into one page:
flowchart TD
A[Developer] -->|Push Code| B[GitHub Repository]
B -->|Trigger| C[GitHub Actions]
subgraph "Homepage AWS Account"
D[CDK Deployment]
E[AWS Resources]
I[CodeBuild]
G[S3 Bucket]
end
C -->|Deploy Infrastructure| D
D -->|Create/Update| E
C -->|Build Site| F[Astro Build]
F -->|Upload| G
H[Content Update] -->|Trigger| I
I -->|Rebuild & Deploy| GThe regular “content update” trigger based on EventBridge also ensures that I can create blog posts, push them to Github and they will only be visible on the homepage when the “publication date” has been reached.
Dynamic API flow
The homepage now has an API which is based on the AWS API gateway that allows users to contact me or to sign up for a newsletter:
flowchart LR
A[User] -->|Submit Form| B[API Gateway]
B -->|Invoke| C[Contact Form Lambda]
C -->|Store| D[DynamoDB]
C -->|Send Email| E[SES]
E -->|Deliver| F[Site Owner]
B -->|Invoke| G[Newsletter Lambda]
G -->|Store| D[DynamoDB]
I am not yet using the information in the Newletter table, so I have not yet started to send out a newsletter, but this might be following soon.
Next steps
As a next step, I’d love to be able to integrate the “addition” of a new blog with Nexus Share to automatically start pushing out Social Media messages after a blog has been published!
Are you also a builder? Do you have any feedback on the homepage that you would like to share?
