Harlanzw.com

Harlanzw.com is an open-source Nuxt 3 personal website boilerplate that showcases production-grade SEO, performance, and accessibility practices for content-driven sites.

What is Harlanzw.com?

Harlanzw.com is a personal website template created by Harlan Wilton, built with Nuxt 3 and Nuxt Content 2, and powered by nuxt-seo-kit and Docus. It takes Markdown files as content input and outputs a fully typed, SEO-ready website with automatic routes, navigation, breadcrumbs, sitemaps, and feeds. The source is hosted on GitHub and the live site runs on Vercel.

Key Features

• Automated Schema.org — Generates structured data for search engines without manual configuration.
• Markdown read time — Calculates estimated reading time for each article automatically.
• Code block metadata — Displays file names and programming language labels on code snippets.
• Server-side icon resolving — Uses iconify and unplugin-icons to avoid flash of unstyled content (FOUC).
• Sitemap and feed generation — Creates sitemap.xml and RSS/Atom feeds for your content.
• Automatic breadcrumbs — Adds breadcrumb navigation annotated with Schema.org.
• Cloudinary image integration — Works with @nuxt/image to serve optimized images from Cloudinary.
• Automatic routes and navigation — Generates routes from the content directory, including 404 handling.

Who is it for?

• Nuxt developers looking for a reference codebase that demonstrates correct SEO, performance, and accessibility patterns.
• Technical bloggers who want a fast, search-optimized personal site with Markdown authoring.
• Startup teams needing a clean starting point for a Nuxt 3 project already wired with linting (ESLint via @antfu/eslint-config), package management (pnpm), and analytics (Fathom).

What can you do with Harlanzw.com?

• Content writers: publish Markdown posts and automatically get Schema.org, sitemaps, feeds, and breadcrumbs.
• Portfolio owners: separate pages and posts into distinct content folders, using the split structure for easy organization.
• Performance auditors: inspect the project to see how server-side icon resolution and Cloudinary image optimization reduce layout shift and load time.

How does it work?

After cloning the repository, install dependencies with pnpm i and start the development server with pnpm dev, which serves the site at http://localhost:3000. Content is added as Markdown files in the content directories; the site automatically builds routes, navigation, and SEO metadata from those files.

FAQ

What tech stack does Harlanzw.com use?

Harlanzw.com uses Nuxt 3 with Nuxt Content 2, styled with WindiCSS, and powered by pnpm, ESLint with @antfu/eslint-config, Fathom analytics, and Vercel hosting.

Does Harlanzw.com include SEO features?

Yes, it includes automated Schema.org, sitemap.xml generation, RSS/Atom feeds, automatic breadcrumbs, and SEO/i18n best practices via nuxt-seo-kit.

How do I run the project locally?

Run pnpm i to install dependencies, then pnpm dev to start the development server on http://localhost:3000.

Is Harlanzw.com free to use?

The repository is publicly available on GitHub and can be freely forked and used as a starting point for your own personal website.