Home The technology behind this blog
Post
Cancel
header

The technology behind this blog


TLDR

My technology approach is:

  • Use AWS resources** when possible. One of the reasons for creating this blog is to practice with AWS… and as a first step, the blog itself must use AWS resources. However, as a good rule, there is an exception

    GitHub is used as code repository because I want to share my code easily in a public way

  • Serverless architecture
  • Apply the separation of concerns design principle to frontend and backend:
    • Frontend: Static website generated with Jekyll and deployed with AWS Amplify
    • Backend: AWS resources deployed with CDK using the TypeScript language

Frontend

I have included the following in this section:

  • Decision 1: Technology to create the blog
  • Decision 2: Technology to deploy the blog
  • Demo: How to deploy it

I could add much more details but I want to keep it short.

Technology to create the blog

First of all, I needed to choose how to create the blog, and nowadays there are a lot of options to do it in a serverless way:

  • Single Page Application (SPA): React, Angular, Vue.js, Ionic, Ember
  • Server-Side Rendering (SSR): Express.js, Next.js, Nux.js, Gatsby.js
  • Static Site Generator (SSG): Gatsby, Next.js, Nuxt.js, Hugo, Jekyll, Hexo
  • Progressive Web Apps (PWA): React, Angular, Vue.js, Preact, PWABuilder

Since I wanted to keep it simple, I used a static site generator. I must admit I hesitated with Hugo, Jekyll, and Hexo, all three options were good for me and although I liked Hugo for its fast build times and execution performance, I finally decided on Jekyl just because the theme I used (Chirpy) I liked more visually than the other options and I didn’t want to have to customize it too much.

I am a big fan of the KISS design principle!

Technology to deploy the blog

After choosing Jekyll as my static site generator, I needed to know how to deploy it on AWS and, of course, there are many options to do it on AWS:

But like I want it serverless and simple, I’ve leveraged AWS Amplify to help me with this point.

What is AWS Amplify? (Explained by AWS)

AWS Amplify is a set of purpose-built tools and features that enables frontend web and mobile developers to quickly and easily build full-stack applications on AWS.

Amplify provides two services: Amplify Hosting and Amplify Studio.

  • Amplify Hosting provides a git-based workflow for hosting full-stack serverless web apps with continuous deployment.
  • Amplify Studio is a visual development environment that simplifies the creation of scalable, full-stack web and mobile apps. Use Studio to build your frontend UI with a set of ready-to-use UI components, create an app backend, and then connect the two together.

AWS Amplify is the fastest and easiest way to develop and deploy reliable and scalable mobile/web applications on AWS

I used Amplify Hosting for the following reasons (there are more, but the following are important to me):

  • Serverless (uses S3 and CloudFront behind the scenes)
  • Integrates with my existing code in GitHub
  • Supports Jekyll (my static site generator)
  • Manage the CI/CD of my application
  • Easy way to connect my application with my custom domain
  • Instant cache invalidations in new versions
  • Integrated with Amazon CloudWatch

As you can see, this solution is awesome if you want that AWS manage for you the CI/CD, web, cache, the certificate of your domain…

However, this is too “automagic” for me and I am here to practice/play and show you the results… so in the future I’d like to migrate Amplify to a custom solution to have more control and more services to play with (S3, CloudFront, AWS Certificate Manager, Developer Tools)… a lot of fun is waiting for me!

How to deploy it

I wrote it in this post: How to deploy a web with amplify hosting

And I complemented it with this one: How to add CI/CD to my CDK project

Backend

I have included the following in this section:

  • Decision 1: What resources to create
  • Decision 2: Technology to deploy infrastructure
  • Demo: How to deploy infrastructure

What resources to create

No backend is necessary for the blog to work. Simple blogs that only have content don’t need anything more than static pages. However, if you want more functionality like forms, mail subscriptions, or comments you will need to use external plugins (to store the data somewhere else, not on AWS) or create your own solutions.

I don’t want to use external plugins if I can do it “just the same” myself in AWS and practice/play with new services in the process

After creating my empty blog I thought that it would be a good idea to implement the following:

  • Forms (contact form)
  • Mail subscription (to receive blog updates)
  • Add comments to each post (register it and show it)

Now, I have a basic implementation of these points but I will improve it in the future.

This is the architecture diagram of the AWS resources created:

architecture_diagram Backend Architecture Diagram

The backend can also be integrated with the frontend with Amplify Studio, but I am not interested in doing it that way. I want separation of concerns and manage both independently.

Forms

  • Used here: Contact form
  • External option easy to integrate: Google Forms.
  • Custom AWS solution:

      flowchart LR
      A(Contact form) --> B(API Gateway)
      B --> C(Lambda)
      C --> D(SES)
      D --> E(My email)  
    

Mail Subscription

  • Used here: Mail subscription
  • External option easy to integrate: Mailchimp
  • Custom AWS solution:

      flowchart LR
      A(Mail subscription form) --> B(API Gateway)
      B --> C(Lambda)
      C --> D(DynamoDB)
    

At this moment, I only store the subscription information and if I want to send emails I have to do it manually. However, in the future, I will automate it and I will add the option to unsubscribe (to the sent mail)

Comments (updated January 27, 2023)

  • It is used at the end of each post
  • In the first year of my blog, the solution was as follows:

      flowchart LR
      A(Mail subscription form) --> B(API Gateway)
      B --> C(Lambda)
      C --> D(DynamoDB)
    
    • This solution was a custom AWS solution to use more AWS services, but only received comments in the database but I didn’t implement the system to display them on the blog. Maybe someday…
  • However, now I am using the giscus plugin

Technology to deploy infrastructure

Honestly, I did not evaluate other options, since I knew which one to choose.

I use CDK (Cloud Development Kit) with TypeScript programming language to create the backend services.

What is CDK? (Explained by AWS)

CDK is an open-source software development framework to define your cloud application resources using familiar programming languages.

AWS CDK provisions your resources in a safe, repeatable manner through AWS CloudFormation, but also is available (in alpha phase) a CDK for Terraform cdktf and a CDK for Kubernetes cdk8s. To find all of these CDKs in one place, check out Construct Hub, a place to discover and share construct libraries published by the open-source community, AWS, and partners.

To me, with a developer background, CloudFormation is complex and CDK fills the gap because it allows me to use a programming language to create the infrastructure easily, it’s wonderful.

How to deploy infrastructure

I wrote it in another post: How to create infrastructure with CDK

Price estimation of the blog

I just created the AWS Account, so I will use the free tier.

Price information by services used:

I will update it when my free tier expires

AWS resourceActionFree Tier (per month)Estimation price
Route53Domain Registration$1 for domain$1
Route53Hosted Zone$0.50 per Hosted Zone for the first 25$0.50
AWS AmplifyBuild & Deploy$0 for 1000 build minutes$0
AWS AmplifyHosting5 GB stored$0
AWS AmplifyHosting$0 for 15 GB served$0
API GatewayAPI calls for REST API$0 for 1 million$0
DynamoDB On-demandData Storage on Standard table$0 for 25 GB$0
DynamoDB On-demandData transfer out to the internet$0 for 100 GB$0
LambdaRequests per month$0 for 1 million$0
LambdaCompute time$0 for 400,000 GB-seconds$0
CDK & CloudFormationFree to use $0

TOTAL 1.5$ per month. Taxes are NOT included.

The domain name purchase on Route53 is annual and is paid in the month of purchase, but for simplicity, I split it into each month. Also, the invoice category is NOT Route53 but “Registrar”, “Global Region”, and “Amazon Registrar DomainRegistration”.

Use Route53 for Register Domain is not the cheapest option. I paid $12 instead of around $1 for the first year with GoDaddy, but it’s worth it (to me)

Next steps about blog technology

I have many next steps identified, but I’ll put here the ones related to the content of this post.

  • Update comments form –> March 17, 2022 –> A form was available and comments were recorded in a database
  • Show comments in the posts –> January 27, 2023 –> giscus plugin has been integrated into my web
  • Automate Mail subscription
  • Migrate AWS Amplify Web to S3 + CloudFront + AWS Certificate Manager + Developer Tools
This post is licensed under CC BY 4.0 by the author.

-

How to deploy a web with Amplify Hosting