The Challenge
Oyo Town is a historical powerhouse in Nigeria with a population of nearly half a million. However, its digital presence was non-existent.
Information Silos: News was fragmented across WhatsApp statuses and Facebook groups.
Invisible Economy: Local businesses (mechanics, hotels, restaurants) had no search engine presence.
Digital Gap: Existing solutions were heavy WordPress sites that failed to load on the dominant 3G mobile networks in the area.
The Goal
To build a “Digital Town Square” that is:
Performant: Must load instantly on low-end mobile devices.
Scalable: Must handle thousands of articles without slowing down.
Maintainable: Must allow non-technical editors to post content without touching code.
The Process & Architecture
- Tech Stack Selection
I chose Astro as the core framework.
Why Astro? Unlike React or Next.js, Astro ships zero JavaScript to the client by default. This ensures the site achieves a 100/100 Lighthouse score, crucial for users with limited data plans.
Styling: TailwindCSS was used for rapid, utility-first styling, ensuring a consistent design system without bloated CSS files.
Backend: We opted for a Static Site Generation (SSG) model hosted on Netlify. This provides bank-grade security (no database to hack) and infinite scaling at zero cost.
- Key Technical Features
A. The “Serverless” Search Engine
Since the site is static, we didn’t have a backend database to query for search results.
Solution: I built a build-time script that generates a lightweight search-index.json file containing all article metadata.
Implementation: A client-side script fetches this JSON on demand, allowing for instant, real-time filtering of Articles, Places, and Events without a server round-trip.
B. Dynamic Content Collections
To keep the data organized, I utilized Astro’s Content Collections API.
We defined strict TypeSafe schemas (using Zod) for Blog, Places, and Events.
This prevents build errors; if an editor forgets to add a “Date” or “Author,” the build fails locally before breaking production.
C. The “Monarch’s Desk”
A custom-designed section dedicated to the Palace. We engineered a specific layout that differs from the rest of the site to convey authority and heritage, using distinct typography and a dedicated sub-collection in the data layer.
- The CMS Integration
To solve the workflow issue, I integrated Decap CMS (formerly Netlify CMS).
This creates a /admin route on the live site.
Editors can log in, write articles in a Rich Text Editor, and upload images.
Upon hitting “Publish,” the CMS commits to Git, triggering an automatic rebuild and deployment on Netlify.
The Roadblocks
The Challenge: Handling “Related Posts” and Sidebar logic efficiently. Initially, we hardcoded sidebar links, which wasn’t scalable. The Fix: I implemented a tagging system (isFeatured, isTopStory). The layout templates now dynamically query the collection at build time to find articles with these flags, populating the sidebars automatically based on editorial choice.
The Challenge: Mobile Menu Scrolling. The sticky header conflicted with the mobile dropdown, making the menu cut off on small screens. The Fix: We refactored the mobile menu to use position: fixed with a calculated top offset and overflow-y: auto, ensuring the menu is always accessible regardless of page length.
The Result
OyoTimes V1 launched successfully as a fully autonomous media platform.
Performance: 98+ Performance score on Google PageSpeed Insights.
Utility: Features a directory of local businesses (Founding Partners).
Impact: Provides the first-ever dedicated digital archive for the Alaafin of Oyo’s press releases.
This project bridges the gap between modern web engineering and local community needs, proving that hyper-local media can be world-class.