August 15, 2024
System.exe
Website
This blog post will be about my website' process, flow and how I generate content for this one.
There is nothing impressive but I try to avoid over engineering with too many dependencies.
For this project, I followed the KISS principle ("Keep it simple, stupid!") that nobody talks anymore today...
For web hosting, I use Amazon Web Service (AWS). Not easy to use for non-technical people but very powerful with different services provided.
The main one I use is Amazon Simple Storage Service (S3) where I use a bucket as a repository of my website.
You can also use the S3 service as a backup system for your data.
For the locality and better latency, I use Amazon CloudFront service where it will replicate your S3 bucket on multiple data centers across the world.
For example, if your S3 bucket is located on the USA West coast, an user from Europe fetches your content from a AWS datacenter located in Europe (e.g. Germany).
Same pattern for Asia (e.g. Tokyo). Amazon CloudFront offers multiple replication types optimized for performance.
Some stats and info about AWS:
- "Over 90% of Fortune 100 and most Fortune 500 companies use AWS Partner solutions and services in their business."
- "AWS has 5x more deployed cloud infrastructure than their next 14 competitors combined"
- "Amazon S3 is designed to provide 99.999999999% resiliency and scale to over trillions of objects worldwide"
- "AWS Partner Netflix, accounts for up to one-third of peak Internet traffic"
AWS has a free tier so you can try "before to pay" but my first suggestion will be to create multiple Billing Alarms.
Some services could become expensive and if you don't monitor it, you could get some surprises.
I never busted the last alarm levels but I triggered some lower levels when I did some big refactors like adding the new audio blogs speech versions.
For the edition, I use Visual Studio Code to edit mostly html and javascript files.
I like the auto completion and it works very well with the html tags. For web browsers: Google Chrome and Firefox.
I use Git as source control!
System / Tooling
Now the interesting part!
For my website, I created a tiny tool in C++ called System.exe with commands for validation, protection and generation...
At that time, I had 28 command lines which is low compared to the Chromium project with over 1600 command lines.
Below are the 28 commands in detail:
-revision: this command updates the version with the current commit on my main page located in top-left corner: Changelog (XXXXXXXXX)
-images: convert all images from .webp file format into .jpg. Some old web browsers (at that time) didn't support the .webp file so it will fallback to the .jpg. Protection added during the parsing to validate that all images contain the fallback logic to use .jpg instead of .webp
-audio: convert all wav files into mp3, ogg and flag formats. ffmpeg is your friend for that (same as images command above)
-copyright: my website is static and this command update all the copyright year on my website with the current year (© Copyrights, 2025 All Rights Reserved)
-blog: a quick and easy way to generate blog posts. Only need to call system -blog. After prompting the title and the date,
it will generate some data based on my created template: html page, cover image, first image inside the blog post, add entry into blog page, RSS, ...
-html: this validator command parses all web pages and apply some sanity check like html tag order:
success: <b><i></i></b>
failed: <b><i></b></i>, </b><b>
-trim: trim and remove useless tabs and spaces on all webpages
-misterpug: generate a template for my MisterPug tool and use my songs as content
-youtube: download all videos from my youtube channels and generate a MisterPug page as mirror content
-audioblog: parse all blog post pages and validates that audio blog files are present
-gallery: generate a gallery web page from all images on the website with source and preview
-source: validate all source data (e.g. hyperlink, file) with casing.
Windows platform doesn't do the difference between lowercase and uppercase characters but it's different on Linux platform which could lead to error 404 and AWS uses Linux under the hood on many services
-changelog: generate changelog page based on the rss file
-links: validate that all links on my website are available (online). Some sources like external links could be dead over time (e.g. dead website) or I could make a typo inside a hyperlink
-email: auto generate a newsletter based on my update "database" and send email to the newsletter contact list
-yduplicate: detect duplicate youtube videos embedded on the website. Mostly use as "warning / info" logs
-vgallery: same as -gallery but with youtube video embedded on the website
-sitemap: generate the Sitemap of the website
-archive: validate and detect missing / invalid archive files inside the archive page
-generateaudio: detect new blog posts and request multiple audio (male/female) speeches with AWS Polly
-blogplaylist: aggregate all blog posts and generate 2 audio playlists: (female voice) (male voice)
-projects: this command will validate that any new projects will follow the "update" flow process (email newsletter, rss, changelog, ...)
-downloadaudio: download audio blog posts generated from AWS polly. Pairing with -generateaudio like producer / consumer style
-blogpostyoutube: validate that the youtube embedded video at the end of the blog post is updated. I always put a music or a youtube video related to the topic at the end of the blog post
-text: generate a lightweight text version of the website with no javascript labeled: Alternative Version
-base: detect base url ("https://www.jsr-productions.com/") and prohibit it. The reason is I have multiple domain names for this website
-alternative: detect if an alternative link ( Alternative Version ) is present or not on all html pages
-deadfiles: detect dead files (unused) on the website repository. Useful to clean-up
To finalize, I also created 2 batch file scripts that regroup some commands above called "Prepare.bat" and "Synchronize.bat" where the first one is for development and the other one for production (e.g. deployment).
After creating this blog post, I updated my system tool and adapted it with some parameter description above. Clean-up pass !
Thanks for reading,
JS.