Serverless, AWS and CI: my new simple personal website

Architecture and tips of a modern development

A few weeks ago I decided to move on with a new software design for my personal website. Before it, I had a custom CMS developed in PHP in a classic shared server. I used this new project as a proof of concept, using a stack of new technologies. I know that do this is like to crack a nut with a sledgehammer. I kept the same frontend design because I like it, but I also moved the frontend to Angular 2 and the stylesheet from LESS to SASS. For the moment, I kept the social data fetching in the backend, but I didn’t develop a CMS (I prefer to use Medium as blog). The result is this: rogelioorts.com.

So, in summary, this is what the website does:

  • The frontend manages the texts and languages. It’s two pages in a single page: a homepage with a summary and my resume.
  • The backend returns my Github repositories, tweets and Medium posts as JSON to be shown in the homepage.

This is the tech stack in details:

Lambda Framework

This framework is used to develop the backend. It is an OpenSource project started by myself. It helps us developing serverless applications giving provider abstraction and regular server tools for routing, rendering, event listening,… For more information you can visit the Github repository (any contribution is welcome!).

In my personal website, the logic is so simple. The backend only calls the social networks’ APIs with environment encrypted variables, maps the results and returns them as response body in JSON format.

Angular 2

The frontend is two pages in a single page developed with Angular 2. I know that the website is no SEO friendly, but this is not a problem for me now. There are some nice effects with CSS (SASS) and nothing else.

AWS

The following AWS services are used:

  • Lambda: runs the backend serverless function.
  • API Gateway: exposes the backend.
  • S3: hosts the static contents of the frontend.
  • CloudFront: exposes the frontend.
  • Route 53: routes the domain to CloudFront and API Gateway.
  • ACM: creates the domain SSL certificate, allowing HTTPS!

Bitbucket

The frontend and backend are in private repositories. Each one has different pipelines to deploy the projects when they are merged in master. The frontend is deployed to S3 and the backend to AWS Lambda. The pipelines also are used to test the code in develop branch, so develop cannot be merged in master if the code doesn’t pass the test and the lint check.

I work with “Gitflow”, each feature is developed in a feature branch, then this branch es merged to develop and tested. Finally, develop is merged to master (maybe with a few features) and deployed.


Architecture overview
Comments are welcome with observations or suggestions! You can recommend any tech that it worth to test in this proof of concept.