I need the development cycle to be as painfree as possible. This means building the CI/CD processes on GitHub and AWS. I’ve configured the webhooks on AWS CodePipeline to grab the code committed to GitHub.com. Then AWS CodeDeploy pushes the code to an S3 bucket with updated ACL permissions along with updated cache metadata. AWS CloudFront reads the updated metadata and pushes out the latest copies to the edge servers that serve the site. AWS CloudFront is not without it’s flaws, however. I still need to write some NodeJS code to manage the routing of all incoming HTTP requests. This is because CloudFront won’t serve the webpage of a folder unless you explicitly requested the website page file (e.g. index.html). If you ask for
RichieBartlett.com/js/, you will get an error page. The same if you don’t type the final ‘/‘ slash. So, to get around this “design feature,” you have to roll your own URI parser and return the index.html file in the event trigger. This requires that you build a AWS Lambda script in NodeJS to handle these events. Then push to edgeLambda on CloudFront.
So, all I have to do is update my code and commit to GitHub. The rest is automated. Update the code, commit, and wait a few minutes for the website to update. Then browse around. This is far more efficient than the old process of manually uploading the files to AWS S3 along with manually changing the object permissions for web viewing and invalidating the cache on CloudFront. Anything I can automate that frees up my mental bandwidth is worth my time to setup.
AWS has a lot of great features around the full stack of online technologies. If you know your way around that tech-stack, you can easily build a website and service that is very affordable. Otherwise, AWS will happily charge you thousands of Dollars until you learn how to do it right. Of all the services I’ve used, I have grown great fondness for AWS. I’m even certified in their architecture.
Now that I’ve prepared the infrastructure of the website, it’s time to research how to best deploy HEXO to match my redesigned theme for the main site www.RichieBartlett.com. I must admit that I’m no wizard at drawing art. I can use the Adobe CC suite, but have never spent enough time to become a master at Adobe tools. I’ve started looking at several interesting designs and documented them on my GitHub repo. But none of the existing HEXO theme designs have everything I want. I found 12 Blog Layout Examples (and Best Practices to Follow) in 2021 article and started from there. My blog needs to look good on both the small and large screen devices. So my iPhone will have a different layout compared to my MacBookPro and large 4K screens.
If I do all the work alone, it will take me months to complete. And, I’m not that intested in graphics design. So, I have enlisted the help of some great talent that should help me complete this project by the end of June 2021. Meanwhile, I will focus on the UX design while the graphics guy will draw out the UI. During all this time, this blog site will likely get broken several times until I get it where I want it.