• Intro

    This is part two of a mini series on my journey to build my own blogging site without using WordPress or any blogging site like Tumbler or Medium. I want full control of my published thoughts. This includes if and how I should share my data with advertisers and crawlers.

    I assume you are comfortable with using AWS, git, VScode, and docker. There are other sites that discuss how to get started with AWS, GitHub and programming.

    Architecture Diagram

    RichieBartlett.com Architecture

    Tools

    1. VScode
    2. Git
    3. Docker
    4. NodeJS
    5. HEXO
    6. AWS CLI

    CloudFront LambdaEdge scripts

    1. pull script from git repo
    2. publish to AWS Lambda (US-1:Virginia)
    3. add trigger to CloudFront

    Pipeline infrastructure

    1. GitHub
    2. Docker
    3. Amazon ECS & ECR
    4. AWS S3
    5. AWS Lambda
    6. AWS CodePipeline
    7. Amazon SNS
    8. Amazon SES
    9. Amazon DynamoDB

    Containerization

    1. Install docker locally
    2. Setup environment
    3. Build the container
    4. Push to ECR

    Build the Prod pipeline

    This is the branch that hosts the live website. When you visit my blog, you are viewing the production code. This branch will have all the features that passed code review, multiple test users, multiple test devices for various screen sizes, and SEO verification.

    Production requires minimizing the amount of data sent across the networks. As such, the website must have all the comments and white-space removed. Furthermore, the scripts must be minified and obfuscated.

    1. Setup CodePipeline to detect new push.
    2. Run docker and rebuild environment
    3. Obfuscate the JS code
    4. Minify HTML, CSS, and JS

    Pipeline logic

    1. Listen for repo push updates (via EventBridge)
    2. Run ECS instance (from Lambda)
    3. Pull latest code from origin branch
    4. Run automation scripts
    5. Update website storage

    automation scripts

    1. download the github repo
    2. update nodeJS
    3. Update NPM (packages to latest stable)
    4. Install/update the node modules for project
    5. run: npm run build
    6. remove comments and minify / uglify all code
    7. empty the S3 bucket (only 1x a month; otherwise, overwrite)
    8. compile the website. If error, abort S3 updates and send notification
    9. Copy /public/ folder to S3
    10. Invalidate the CloudFront cache
    11. Send completion notice.

    Dev pipeline

    The development environment employs only a handful of my posts while focusing on feature rollouts. They don’t need a lot of RAM or CPU to compile the site. This makes it very easy for my development team to build the site and test it before code review and production.

    This environment is very basic and simple. To accommodate the troubleshooting process, all comments and scripts are left intact. No minification or uglifying (obfuscation).

    PreP pipeline

    The pre-production (or PreP) environment combines the codebase from the dev branch and all the posts (plus assets) from production. This is the ultimate test environment for how the site would feel and perform. If a feature that worked in dev fails here, it doesn’t get rolled to production. Again, No minification or uglifying (obfuscation).

    Reference

    Prev:
    From Unemployed to Building $30K/month Business in 12 Months
    Next:
    Crypto Scams
    Table of Contents
    Table of Contents