I hope you are curious about how I planned, designed, developed, and deployed this website. Let's dive into that.
First, this is not a website powered by React or any other framework. This just renders HTML files, and all of it is server side rendering.
The first thing I did was design the site in Figma. I did not design the entire site, but main pages like the index page, design page, and article page were designed. No components, just pages. I didn't even design the responsive pages. I kept the design pretty simple. Light background, clean typography, nothing fancy. I did not want to over-engineer the visual side. Just something that looks decent and gets out of the way of the content.
After confirming the design, I started developing this site with 11ty. 11ty is a JS based static site generation framework. For styling I used CSS, no LESS, SCSS or anything. Just plain CSS. I also did not use any CSS frameworks like Tailwind or Bootstrap. I wanted full control and I did not want unnecessary bloat. The templating is done with Nunjucks, which 11ty supports out of the box. I have layouts for the article pages and the index page. Articles are written in Markdown and 11ty converts them to HTML at build time. Pretty straightforward. For the article metadata like title, description, date, and tags, I use front matter at the top of each Markdown file. You can see it at the top of this article. 11ty reads that and makes it available in the templates.
I did not do anything complex on the JS side. There is barely any JavaScript. The site does not need it. No hydration, no client side routing, no state management. Just HTML and CSS doing their job.
If I need to update something in this blog such as creating or updating articles, I have to update the source files and deploy again. To simplify that I decided to use Cloudflare Pages. The repository stays in my personal GitHub account, connected with Cloudflare Pages. So when I publish new changes to the main branch, it will automatically be deployed. Cloudflare Pages has a free tier that is more than enough for a personal blog. Build times are fast, the CDN is global, and I do not have to think about servers at all. It just works. In this blog there is no database, no CMS, no backend. Just files. I think that is the right approach for a personal blog. Less moving parts, less things to break, less things to maintain.
If I ever need to add something like a search feature or comments, I will figure it out then. But for now, this setup does everything I need.
~ Lasan