Josh Waihi - Thought Leadership Site

An elegant VitePress site for publishing thought leadership articles on strategy, leadership, digital transformation, and business innovation.

🚀 Quick Start

Prerequisites

• Node.js 18 or higher
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The development server will start at http://localhost:5173

📁 Project Structure

joshwaihi.com/
├── .vitepress/
│   ├── config.mts          # VitePress configuration
│   └── theme/
│       ├── index.ts        # Theme customization
│       └── custom.css      # Corporate styling
├── articles/               # All articles
│   ├── index.md           # Articles listing page
│   ├── topics/            # Topic-based organization
│   └── *.md               # Individual articles
├── public/                 # Static assets
│   └── logo.svg           # Site logo
├── index.md               # Homepage
├── about.md               # About page
├── contact.md             # Contact page
└── package.json

✍️ Adding New Articles

1. Create a new markdown file in /articles/:

---
title: Your Article Title
description: Brief description for SEO and previews
date: 2026-05-05
author: Josh Waihi
tags: [Strategy, Leadership]
---

# Your Article Title

<div class="article-header-meta">
  <span>📅 May 5, 2026</span>
  <span>⏱️ 8 min read</span>
  <span class="article-tag">Strategy</span>
</div>

Your content here...

2. Update /articles/index.md to include the new article in the listing

3. The article will automatically appear in the site with full styling

🎨 Customization

Theme Colors

Edit .vitepress/theme/custom.css to customize:

• Brand colors (currently deep blue corporate theme)
• Typography
• Spacing and layout
• Component styles

Site Configuration

Edit .vitepress/config.mts to modify:

• Site title and description
• Navigation menu
• Social links
• Footer content

Logo

Replace /public/logo.svg with your own logo design

🌐 Deploying to Cloudflare Pages

Method 1: Git Integration (Recommended)

1. Push your code to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/joshwaihi.com.git
git push -u origin main

2. Log in to Cloudflare Dashboard

3. Go to Pages > Create a project > Connect to Git

4. Select your repository

5. Configure build settings:

   • Build command: npm run build
   • Build output directory: .vitepress/dist
   • Node version: 18 or higher

6. Click Save and Deploy

Your site will be live at https://your-project.pages.dev

Method 2: Direct Upload

1. Build your site:

npm run build

2. Go to Cloudflare Pages and click Create a project > Direct upload

3. Upload the .vitepress/dist folder

Custom Domain

1. In Cloudflare Pages, go to your project
2. Click Custom domains > Set up a custom domain
3. Follow the instructions to configure DNS

📝 Content Guidelines

Article Structure

• Clear, descriptive titles
• Engaging introductions that hook readers
• Well-organized sections with headers
• Practical insights and actionable advice
• Conclusion that reinforces key points
• Related articles at the bottom

SEO Best Practices

• Include frontmatter with title, description, date
• Use descriptive headings (H2, H3)
• Add internal links between related articles
• Optimize images (if added) with alt text
• Keep URLs clean and readable

Writing Style

• Professional but accessible
• Evidence-based insights
• Real-world examples
• Balanced perspective
• Thought-provoking without being prescriptive

🛠️ Built With

• VitePress - Static site generator
• Vue 3 - Progressive framework
• Custom CSS - Corporate elegant theme
• Cloudflare Pages - Hosting platform

📄 License

Copyright © 2026 Josh Waihi. All rights reserved.

---

Built with VitePress | Deployed on Cloudflare Pages