For as long as I can remember, I've harboured a strong desire to create a website that truly embodies who I am and showcases my body of work. The motivation behind this is twofold: first, to exhibit the various projects I've dedicated myself to(and not completed), and second, to gain a comprehensive understanding of website hosting. My journey with this passion project began back in 2016 during my time in college. Since then, I've embarked on multiple iterations of this website, all while sticking to a primary constraint: to host this solution entirely for free and to constantly explore new technologies and frameworks.

As a developer with over 6 years of experience, I've maintained a strict versioning system for each iteration of my project, currently at version 2.2.0 as I write this blog. Alongside adhering to semantic versioning principles, I diligently incorporated unit tests to thoroughly assess all major components. Initially, my website was “built” as a WordPress application utilizing a WordPress subdomain. However, this setup lacked the sense of ownership I craved, particularly with the use of a subdomain. Seeking greater control over the deployment cycle, I transitioned to an Angular application hosted on Hostinger's static pages. While this offered some benefits, it still fell short of providing the level of control I desired. Experimenting with platforms like WordPress, Squarespace, and Wix, I found their pricing models to be somewhat predatory for my needs. Consequently, I opted to host the page as a GitHub page, marked as version 0.0.1. This iteration involved a React App deployed as a Single Page Application (SPA). However, alongside showcasing my projects, I also yearned for a platform to host my blogs, thus leading me to embark on the journey detailed in this article.

Step 1: Define the problem

My problem statement was:

“Create a website with blogging capabilities and achieve this with minimum to no cost”

Defining a problem is crucial as it provides us with a clear understanding of the desired outcome or appearance of the end product.

Step 2: Design Phase

The subsequent logical progression would be to design the desired outcome and strategise the steps required to attain our goal.

The design Phase for this project had three main facets.

1. Wireframes and designs.
   Before embarking on the latest iteration of the website, I chose to develop the entire design using Figma. However, this decision came with its challenges, as I had to learn how to navigate and utilize Figma effectively. This step carries importance as it offers a visual roadmap of the project, providing a clear understanding of the tasks ahead.
2. Technical Design and Architecture
   This part is important because it serves as the foundation upon which a project is built, providing a structured framework that ensures scalability, efficiency, and maintainability of the system. In the realm of Technical Design and Architecture, I faced the task of developing two primary architectural designs to effectively structure and guide the project's development process:

   • Code DevOps Architecture
     Code DevOps Architecture is the design and implementation of an integrated infrastructure that automates and streamlines software development and operations processes. It is crucial for enabling continuous integration and delivery, enhancing productivity, collaboration, and agility within software development teams.

   • Deployment Architecture
     The Application interactions will be as illustrated below:
     The frontend utilized ReactJS, and the backend was a fusion of Node.js, interacting with CosmicJS. Next.js was employed to connect React and Node.js, enabling server-side rendering (SSR) for specific pages. 
     The deployment was on a managed instance hosted and supported by Vercel. The plan is to move out of Vercel in future iterations. Ref: https://vercel.com/blog/behind-the-scenes-of-vercels-infrastructure.

3. Plan the tasks.
   Planning and task breakdown before starting a project is important to establish realistic goals, coordinate resources effectively, and anticipate and mitigate potential risks. I used Github projects to plan out my tasks. Here’s the link to the project: 

   https://github.com/users/Keith3895/projects/2/views/1?layout=roadmap
   

Step 3: Development

The development of this project will be done using NextJS. This will handle both the frontend and the backend integrations with CosmicJS. Cosmic is a Headless CMS that empowers you to create, edit, & manage content across limitless websites & applications, from one convenient interface. A detailed walkthrough of the development process will come in a future blog.

Step 4: Deploy

First Create a Vercel Account and then create a project and follow the steps to link your project. I took the CLI route to creating a project and deploying the project. The reason I went with the CLI was that I had the ultimate goal of running the deployment from the CI/CD tool. 

Here’s the action script that I used: 

Conclusion

In conclusion, while ready-made solutions like Squarespace or WordPress could have expedited the process and provided greater robustness, I opted for a more hands-on approach to relearn ReactJS and explore new tools available in the market. Your feedback and suggestions are invaluable, so please feel free to share your thoughts in the comments section to help enhance and refine the project further.