CASEPublication · SEO & GEO
A personal site that ranks
liupurnomo.com is where I write about drones, aviation rules and software. It is a full publication: categories, tutorials, events, books, comments on highlighted text, newsletters and an AI-assisted editor. Its articles rank on the first page of Google and are cited as sources in Google’s AI Overviews.
- Role
- Author, designer and full stack engineer
- Period
- 2011 - now
- Platform
- Web
- Page 1
- on Google for competitive drone searches such as “flight controller drone”
- AI Overview
- cited as a source in Google’s AI answers, e.g. for “DJI Matrice 5T”
- 1 app
- site, CMS and API in a single Next.js codebase, no separate backend server
- 10 versions
- since 2011: from Blogspot and WordPress to a Next.js app with its own CMS and API
01The problem
Writing that gets found
A blog that nobody finds is a diary. I wanted my writing on drones and regulation to reach pilots and companies through search, and to be the source AI assistants quote, not just a link shared once on social media.
That meant treating the site as a product: fast pages, rich structured data, a clean information architecture, and an editor that makes publishing well-structured articles quick.
It has grown with me since 2011: a Blogspot blog that turned to drones in 2014, moved to its own domain on WordPress in 2016, was rebuilt in Next.js in 2020, gained an LMS and a separate Express backend in 2025, and in version 10 (2026) became a blog again, with the API folded back into Next.js and an aviation-inspired design.
02Product
What I built
01 · Publication
Categories, series, tags and tutorials with a mega menu that previews the newest articles in each section.
02 · Reading experience
Serif typography, a table of contents with flight-plan styling, reactions, bookmarks and share actions.
03 · Inline comments
Readers highlight a sentence to react, comment or share it, like annotations in a printed book.
04 · AI-assisted editor
Draft from a source URL, describe media with AI, and pull a matching Pexels photo into the media library, with the author always editing the result.
05 · Partnership page
Rate card and formats for banners, sponsored articles and drone reviews, with a direct WhatsApp channel.
06 · Tools & data
GSD calculator, QR generator, events and a live flight-log map pulled from drone.co.id.
03Results · SEO & GEO
On page one, and in the answer
Search has two front doors now: the classic results and the AI answer above them. Articles on liupurnomo.com show up in both, ranking on the first page and being cited by Google’s AI Overview as a source.
That comes from the basics done thoroughly: clear headings that answer one question each, FAQ and HowTo markup, author and organization data, breadcrumbs, and pages that load fast.
Hard parts
What made it difficult
Folding a backend into the frontend
The API used to run as a separate Express server. I ported its routes into Next.js behind a single dispatcher, so the site, CMS and API now deploy as one app.
Rich features without a slow page
Comments, reactions and menus load around static article pages, with data cached in the browser so return visits are instant.
Structured data that stays correct
Article, FAQ, HowTo, Event, Book and Person markup is generated from the content, so it never drifts from what readers see.
Outcome
Who it helps
For readers
Clear, well-sourced articles on drones and regulation in Indonesian, easy to find and pleasant to read.
For partners
An audience reached through search, with transparent formats for sponsorship.
For me
A home for my writing, books and projects that keeps bringing in work and invitations.
04Skills · What it took
The craft behind it
SEO & GEO
Found by search and by AI
- JSON-LD for Article, NewsArticle, BlogPosting, FAQPage, HowTo, Event, Book, Person, Organization and BreadcrumbList.
- Information architecture with categories, series and internal links; sitemaps split by content type.
- Content written to answer one question per heading, which is what both rankings and AI citations reward.
Design
Editorial, with personality
- Lora serif headlines with red italics, monospace aviation labels, and a compass motif that ties the brand to flying.
- Light and dark themes designed together, and a mega menu that shows content, not just links.
Engineering
One app, no extra server
- Next.js 16 with the React Compiler, Prisma 7 on PostgreSQL, JWT auth with jose, and TanStack Query with a persisted cache.
- API routes ported from Express into a catch-all dispatcher; PDFs, QR codes, email and readable-article extraction on the server.
- Next.js
- React Compiler
- TypeScript
- Tailwind CSS
- Prisma
- PostgreSQL
- TanStack Query
- jose
- Nodemailer
- PM2
05Screens
A closer look
Next case study
Djati
Mining management system for a contractor’s head office and pit sites