Vadakkanady Builders is a construction firm based in Kerala, handling residential and commercial projects across the region. When they came to me, they had no web presence at all -- no site, no way for potential clients to find them online, no place to showcase their completed work. The ask was straightforward: build something that represents the firm professionally.
The approach
The obvious path would have been to set up a WordPress site or drop something into a page builder. But thinking through what they actually needed, neither felt right. The site was essentially a portfolio: a homepage, an about page, a projects gallery, and a contact section. No user accounts, no dynamic content, nothing that required a database or a server running 24/7. What they needed was something fast, good-looking, indexed properly on Google, and maintainable without depending on a developer every time a new project needed to be added.
So I built a custom static site generator in Node.js instead.
The core idea was simple: all project data lives in JSON files. Each project folder has a meta.json with the name, description, images, tags, and a rank for display order. Running the build script reads all of that, processes it through HTML templates, and outputs a fully compiled, optimized static site. Adding a new project to the site is just adding a folder with a JSON file and photos -- no code changes needed.
What the build process does
The build script handles quite a few things at once:
Every CSS and JavaScript file gets content-hash fingerprinted before deployment. The filename changes only when the file content changes, so browsers can cache assets aggressively (a year-long cache header) without ever serving stale files. This is important for repeat visitors on mobile networks.
Images go through an optimization pipeline. Every uploaded photo gets converted to WebP for modern browsers, with a mobile-specific variant resized for smaller screens, and a JPEG fallback for compatibility. The <picture> element in the templates handles the serving logic automatically.
Each page gets its own metadata: title, meta description, canonical URL, Open Graph tags for social sharing. The homepage gets a LocalBusiness schema markup in JSON-LD format -- the structured data that helps Google understand what the business is and where it's located. Individual project pages each get their own Product schema. The sitemap includes image entries per project.
There's a quality gate at the end of every build: the script scans all generated HTML for any unreplaced {{PLACEHOLDER}} tokens. If it finds one, the build fails completely rather than deploying a broken page. That was a deliberate decision -- it's the kind of silent mistake that can go unnoticed for days.
Design
The typography uses three self-hosted WOFF2 fonts (no external requests at load time): Cinzel for headings and the logo, Inter for body text, and Playfair Display for taglines and accents. The color language is centered on a deep navy blue that fits a construction firm -- professional without being cold.
The site has 13 project detail pages, each with an image slider, a client quote section if available, and prev/next navigation between projects. All the JavaScript is vanilla, loaded with defer, and each file only loads on pages that actually need it. The 404 page loads no JavaScript at all.
Deployment
The site deploys through GitHub Actions to Cloudflare Pages. Pushing to the main branch triggers the pipeline: install dependencies, run the build script, push the output to Cloudflare. The hosting is on Cloudflare's global CDN, so load times are fast regardless of where the visitor is. The deployment pipeline was something I figured out as part of this project -- getting GitHub Actions, the build step, and Cloudflare Pages to work together correctly was a good hands-on learning experience.
The whole thing is zero ongoing hosting cost, which was one of the goals from the start.