Understanding the Requirements and Architecture of my Blog

Table of Contents

1. Introduction
2. Motivation
3. User Story
4. Requirements
   1. Functional Requirements
   2. Non-functional Requirements
5. Tech Stack & Vendors
6. Tech Best Practices
7. Architecture
8. Cost Analyses

Introduction

As you read through this article, you will see different aspects of a project from different stakeholders point of view. From a Product Owner (PO) perspective, you will see an EPIC with a user story as a starting point to break down tasks. From a Sponsor perspective, you will see the motivation to justify financing this project and the estimated monthly cost with infrastructure. As an architect, you will see requirements and the solution architecture. As a Tech Lead, you will find information to guide your team in executing the project. As a developer, you will find documentation of used technologies and best practices to follow up on the project. As a DevOps Engineer, you will find requirements to deploy the application in the cloud.

Motivation

I’m passionate about learning new things. I breathe science and (computer) engineering every day. It’s amazing how math, physics, chemistry, and biology are interconnected and how we can, through computer engineering, achieve so many awesome things with these disciplines. Having a blog to write my discovery journey was something I wanted for a while but actually never had the time to do so. This recently changed and I think there is no better time (for me) than now. Artificial Intelligence assistants (agents), such as GitHub Copilot and Abacus.AI , are helping me to be more productive and agile than ever. Please don’t get me wrong! My goal is not to ask for a GPT tool to write the content of my blog but to help me learn something new and deliver software.

User Story

As a developer and content writer, I want to be able to write technical articles and manage the Content Management Solution (CMS) platform in a single Integrated Development Environment (IDE) so that all my articles, cloud infrastructure, and CMS are managed in a single place, monorepo strategy, with CI/CD pipeline(s) to automate the deployment to production.

Requirements

Version 1.0.0

Functional Requirements:

1. Support for Diagrams as Code (DaC) strategy.
2. Capable of rendering Mathematical Expressions.
3. Writing articles using Markdown syntax .
4. Search Engine Optimization (SEO) optimization features.
5. Analytics Tool to collect and interpret metrics about user’s behavior.
6. Dark theme mode: because light attracts bugs.

Non-functional Requirements:

1. Cost efficiency.
2. The site must load fast from anywhere in the world.
3. The design should be clean with the main focus on the articles.
4. Infrastructure as Code (IaC) is a must. Avoid ClickOps as much as possible.
5. Privacy regulations compliant

Tech Stack & Vendors

1. Hugo : the CMS tool.
2. Mermaid.JS : diagram as code tool.
3. Iconify Design : Open source icon set. It is mainly used in Mermaid.JS diagrams.
4. KaTeX : Math typesetting library.
5. Amazon Web Services (AWS) : the cloud provider.
6. Google Analytics : customer behavior metrics and analysis.
7. GitHub : Git repository for this project.
8. GitHub Actions : CI/CD platform.
9. Terraform : a tool for Infrastructure as Code.

You might be asking why Hugo? Although many popular CMS tools, like Wordpress , could help me partially achieve the requirement, since I’m a developer, not leaving my hands from the keyboard and being able to use tools like Git to manage versioning - of everything: infra, code, and articles - is the ideal world. Additionally, being able to build the project in native HTML with all the content pre-rendered (not depending on additional calls to the backend) is great for SEO and cost-efficient as I don’t need to sping-up database servers, develop different APIs, and add complexity into the infrastructure. All it takes is a web server.

Tech Best Practices

1. Trunk Based Development : only a single long-lived branch, the main, shall exist in this project.
   1. All pull requests must be rebased.
   2. No unnecessary commits. We must keep the main branch as clean as possible. Refine/clean your commits before creating a pull request.
   3. Once it gets merged into the main branch, it will be deployed to production. Commits direct to the main branch are not allowed.
2. Conventional Commits : specifies how commit messages shall be written. The scope is encouraged in all commit messages. Suggested scopes are:
   1. article: relates to posts/articles. For instance, a new article uses feat[article]: <description>. To update a published article use fix[article]: <description>
   2. theme: relates to theme configuration and functionalities. For instance use feat[theme]: <description>
   3. config: to change Hugo’s settings in this project.
3. Code Styling: no particular style is enforced in this project, however at least the following must comply:
   1. Respect code indentation of 4 spaces.
   2. Follow Hugo Directory Structure

Architecture

CI/CD Pipeline Flow

---
title: Production Release Pipeline
---
flowchart LR
    start((Start))
    prMerged[PR merged 
    into Main branch]
    buildHugo[Build Hugo
    project]
    uploadS3[Deploy to S3 Bucket static web server]
    expireCDN[Invalidate AWS CloudFront Cache]
    done(( End ))

    prMerged --> start
    start --> buildHugo
    buildHugo --> uploadS3
    uploadS3 --> expireCDN
    expireCDN --> done

Cloud Architecture

architecture-beta
    group vpc(logos:aws-vpc)[Virtual Private Cloud]

    service awsIAM(logos:aws-iam)[AWS Identity Manager]

    service siteBucket(logos:aws-s3)[S3 with Static WebServer Host] in vpc
    service cloudFront(logos:aws-cloudfront)[CloudFront CDN] in vpc
    service dns(logos:aws-route53)[DNS Server] in vpc
    service sslCertificate(logos:aws-certificate-manager)[SSL Certificate Manager] in vpc
    service waf(logos:aws-waf)[WAF] in vpc
    

    cloudFront:L -- R:siteBucket
    dns:L -- T:cloudFront
    sslCertificate:L -- R:cloudFront
    waf:R -- T:cloudFront

    group github(logos:github-icon)[GitHub]

    service githubRepository(logos:bitbucket)[Repository] in github
    service githubActions(logos:github-actions)[Actions] in github

    githubActions:L -- R:githubRepository

    githubActions:R -- L:awsIAM
    awsIAM:R -- L:siteBucket

Cost Analyses

Cloud cost estimation to maintain the project in a production environment:

Total cost:

• Monthly: $13.00
• 12 months cost: $156.00