AI-Powered Personal Website Development - Building a Modern Website with HonoX and Claude

Recently, I built this personal website leveraging the power of AI. In this blog post, I'll explore the technical stack, architecture, and implementation process behind this site, showcasing how AI-driven development enables efficient and innovative web development.

Technology Stack Selection

This website is built using the following carefully selected technology stack:

• HonoX: A lightweight web framework supporting Cloudflare Workers and Static Site Generation (SSG). As an extension of Hono, it adds static site generation capabilities to generate HTML at build time for faster page loads. It also provides developer experience improvements like JSX route definitions and asset optimization.

• TypeScript: For type-safe development that maintains code quality and facilitates refactoring even as projects grow. This project uses strict type checking with detailed type definitions for all components, utilities, and data structures.

• MDX: For content management of both blog posts and "ideas" sections. As an extension of Markdown that includes JSX functionality, it enables rich content creation. Frontmatter is used to manage metadata, with content organization by tags and categories.

• TailwindCSS: A utility-first CSS framework for efficient styling and responsive design. The Typography plugin beautifies MDX content presentation. Custom color schemes and animations are defined to establish a consistent design language throughout the site.

• Cloudflare Workers: A serverless platform that runs code at the edge in globally distributed locations. Benefits include low latency, high availability, and minimal maintenance overhead. Combined with SSG, it efficiently delivers both static assets and dynamic functionality.

• Vercel OG: A service for dynamic OG image generation. It creates customized OG images based on page metadata, enhancing visual appeal when content is shared on social media. Design variations based on title, category, and language are automated.

• Vite: A modern frontend build tool providing fast development environment and production builds. Hot Module Replacement (HMR) allows changes during development to be reflected almost instantly, enabling an efficient development workflow.

I chose these technologies for the following key reasons:

1. Performance: The combination of SSG and Cloudflare Workers ensures fast page loads from anywhere in the world
2. Developer Experience: TypeScript and Modern JSX provide a comfortable development experience
3. Content Management Flexibility: MDX enables seamless integration of content and code
4. Scalability: The architecture facilitates easy addition of features and scaling
5. Cost Efficiency: Serverless architecture optimizes operational costs
6. Modern Technology Exploration: Maximizing the potential of Jamstack architecture

Autonomous AI Development Process

The most notable aspect of this project is that it was developed almost entirely using AI. With minimal human intervention, AI led the entire process of building a complex website. The following AI tools played key roles:

Claude Code

Claude Code by Anthropic assisted with nearly all aspects of the coding process:

• Initial Project Structure Design: Designed appropriate directory structure for a HonoX project, setting up initial files and folders. It proposed file organization following MVC patterns while adapting to modern Jamstack architecture.

• HonoX Configuration and Routing: Implemented HonoX configuration with complex routing design (dynamic routes, nested routes, parameterized routes), SSG parameter settings, and efficient route handlers.

• TypeScript Interfaces and Type Definitions: Built a robust type system ensuring code safety and quality. Applied strict typing to everything from blog and idea frontmatter to UI component definitions.

• MDX Integration and Processing Pipeline: Created a complete pipeline for loading, parsing, and rendering MDX files, including frontmatter validation, content sorting, and filtering capabilities.

• Component Development and Styling: Built a library of reusable UI components establishing a consistent design system using TailwindCSS, with attention to responsive design and accessibility.

• Internationalization (i18n) Implementation: Constructed an efficient multilingual support system with locale-based routing, translation management, and localized date and number formatting.

• SEO Optimization: Applied SEO best practices including meta tags, OG images, structured data, and canonical URLs to maximize search engine visibility.

• Performance Optimization: Improved various aspects of web performance including image optimization, efficient CSS and JS loading, and caching strategies.

Claude Code didn't just follow instructions but actively suggested optimal architectural decisions and implementation details. For instance, with internationalization implementation, it analyzed the pros and cons of using route parameters and proposed the most efficient solution.

// Example of locale management implemented by Claude Code
export const LOCALES = ["ja", "en"] as const;
export type Locale = (typeof LOCALES)[number];

// Localized content
export const content: Record<Locale, LocalizedContent> = {
  en: {
    title: "Welcome to Pluie Lab",
    greeting: "Hello, welcome to Pluie Lab!",
    subheading: "Creating Exciting Web Apps is My Greatest Joy",
    // Other English translations...
  },
  ja: {
    title: "Pluie Labへようこそ",
    greeting: "こんにちは、Pluie Labへようこそ！",
    subheading: "ワクワクするWebアプリを作るのが何よりも楽しい",
    // Other Japanese translations...
  },
};

// Get messages based on locale
export function getMessage(locale: Locale): LocalizedContent {
  return content[locale] || content[defaultLocale];
}

// Validate locale
export const validateLocale = (locale: string): locale is Locale => {
  return LOCALES.includes(locale as Locale);
};

OpenAI

For image-related work and UI design, I utilized various OpenAI tools:

• OG Image Design Idea Generation: Generated design concepts for appealing OG images for social media sharing, including dynamic design variations based on category and language.

• Icon and Visual Element Creation: AI-generated visual identity elements including logos, icons, and decorative elements.

• UI Design Suggestions: Received proposals for user interface layout, color design, and typography. These were particularly helpful for optimizing mobile responsive design.

• Color Schemes and Visual Consistency: Proposed cohesive color schemes and visual hierarchy design for the entire site.

Architecture and Implementation Details

MDX Content Management

Content is managed as MDX files, organized by language in the following directory structure:

contents/
  ├── en/
  │   ├── blogs/
  │   │   └── *.mdx
  │   └── ideas/
  │       └── *.mdx
  └── ja/
      ├── blogs/
      │   └── *.mdx
      └── ideas/
          └── *.mdx

Each MDX file includes frontmatter with metadata like title, description, tags, and category.

Static Site Generation (SSG)

For performance and search engine optimization, this site leverages SSG to generate static HTML at build time. It uses HonoX's ssgParams to generate HTML for each route during build.

// Example of a route using SSG
export default createRoute(
  ssgParams(() => {
    // Return parameters for paths to generate at build time
    return LOCALES.map((locale) => ({
      locale,
    }));
  }),
  (c) => {
    const locale = c.req.param("locale");
    // Load and process content

    // Prepare SEO props
    const seo = createSeoProps(
      locale,
      {
        description: localizedContent.description,
        keywords: localizedContent.keywords,
        ogImage: `/${locale}/blogs/og.webp`,
      },
      currentPath
    );

    return c.render(
      <Layout locale={locale}>
        <HomePage content={content} />
      </Layout>,
      seo
    );
  }
);

Dynamic OG Image Generation

Using Vercel OG, the site generates dynamic OG images tailored to each page, providing visually appealing previews when shared on social media.

The OG image generation is handled by special route files using the .webp.tsx extension naming convention. This allows Vercel OG to generate images at build time, which are then converted to WebP format.

// Example of OG image generation (/app/routes/[locale]/blogs/[slug]/og.webp.tsx)
import { createRoute } from "honox/factory";
import { ImageResponse } from "@vercel/og";
import { getBlogBySlug } from "../../../../utils/blog";
import { OgImageLayout } from "../../../../utils/og";

// Route to generate OG image for a blog post
export default createRoute(async (c) => {
  const { slug } = c.req.param();
  const locale = c.req.param('locale');

  // Load content data
  const blog = await getBlogBySlug(slug, locale);

  if (!blog) {
    return c.notFound();
  }

  // IMPORTANT: WebP format isn't directly supported, so generate in PNG and convert after
  // Generate image using Vercel OG
  return new ImageResponse(
    // React component defined as JSX
    <OgImageLayout
      title={blog.title}
      category={blog.category}
      locale={locale}
      type="blog"
      // Can configure custom fonts and additional metadata
    />,
    {
      width: 1200,  // Standard OG image size
      height: 630,
      // Configure fonts and other options as needed
      fonts: [
        {
          name: 'NotoSansJP',
          data: await fetch(new URL('/public/fonts/NotoSansJP/NotoSansJP-Regular.ttf', import.meta.url)).then(res => res.arrayBuffer()),
          weight: 400,
          style: 'normal',
        },
        // Also load Japanese bold font
        {
          name: 'NotoSansJP',
          data: await fetch(new URL('/public/fonts/NotoSansJP/NotoSansJP-Bold.ttf', import.meta.url)).then(res => res.arrayBuffer()),
          weight: 700,
          style: 'normal',
        },
      ],
    }
  );
});

In the code above, custom OG images are generated for each blog post using its title, category, language, and other metadata. This makes content more visually appealing when shared on social media.

An important characteristic of Vercel OG is that all rendering happens server-side, generating PNG images from React components without using a browser DOM. This approach allows providing high-quality images efficiently without relying on client-side resources.

The generated OG images are automatically converted to WebP format during the build process to optimize file size. This is handled by the scripts/convert-webp.js script.

Internationalization

The site supports both Japanese and English, using the route parameter [locale] to identify the language and display appropriate content through a comprehensive internationalization system.

The internationalization implementation includes the following key elements:

1. Route-based Language Switching: All URLs begin with a language identifier like /ja/... or /en/..., making it easy to switch languages from any page on the site.

2. Translation Resource Management: All translated text is managed in a central translation file with type safety.

3. Language-specific Content Organization: MDX content is organized in language-specific directories, allowing access to content with the same slug in different languages.

4. Language Switcher Component: Implementation of a component that allows users to switch languages while maintaining their current page.

5. Date and Time Localization: Appropriate date and time formatting for each language.

// Locale definition and type-safe management
export const LOCALES = ["ja", "en"] as const;
export type Locale = (typeof LOCALES)[number];

// Default locale setting
export const defaultLocale = "ja";

// Getting messages based on locale (with fallback mechanism)
export function getMessage(locale: Locale): LocalizedContent {
  return content[locale] || content[defaultLocale];
}

// Locale validation
export function assertValidLocale(locale: string): asserts locale is Locale {
  if (!validateLocale(locale)) {
    throw new LocaleValidationError(
      `Invalid locale: ${locale}. Must be one of: ${LOCALES.join(", ")}.`
    );
  }
}

// Date formatting function
export function formatDate(
  locale: Locale,
  date: string | Date,
  options: Intl.DateTimeFormatOptions = {
    year: "numeric",
    month: "long",
    day: "numeric",
  }
): string {
  const dateObj = typeof date === "string" ? new Date(date) : date;
  return dateObj.toLocaleDateString(getDateLocale(locale), options);
}

// Example language switcher component
export function LanguageSwitcher({
  currentLocale,
  currentPath
}: {
  currentLocale: Locale;
  currentPath: string
}) {
  // Get target locale from current locale
  const targetLocale = currentLocale === "ja" ? "en" : "ja";

  // Create new path by replacing locale part in current path
  const newPath = currentPath.replace(`/${currentLocale}`, `/${targetLocale}`);

  // Get language display name
  const localizedContent = getMessage(currentLocale);

  return (
    <a href={newPath} className="language-switcher">
      {localizedContent.languageSwitcher}
    </a>
  );
}

This internationalization system provides a consistent language experience throughout the site, allowing users to access content in their preferred language. Additionally, each language version of a page has appropriate hreflang meta tags and canonical URLs to help search engines provide the optimal content.

Deployment and Hosting

The site is deployed to Cloudflare Workers and delivered over a global CDN network for high performance. To maximize the benefits of the Jamstack architecture, I've built a sophisticated build pipeline with multiple steps.

Build Process Details

The build process consists of the following steps:

1. Client-side Asset Building:

   • Using Vite to bundle and optimize JavaScript and CSS
   • Generating ES Modules for modern browsers and legacy bundles for backward compatibility
   • Running TailwindCSS optimization (removing unused classes)
   • Asset fingerprinting and cache optimization

2. Static HTML Generation:

   • Using HonoX's SSG feature to pre-render all routes
   • Generating all dynamic routes as static files, including locales, blog posts, ideas, categories, and tags
   • Optimizing HTML with metadata and SEO information

3. Image Optimization:

   • Converting OG images generated by Vercel OG from PNG format to WebP format
   • Automating the conversion process with a custom script (scripts/convert-webp.js)
   • Optimizing file size while ensuring browser compatibility

4. Icon and Favicon Generation:

   • Generating multiple sizes of icons from SVG sources
   • Converting to WebP format and optimizing sizes
   • Automatically generating manifest files and favicons

5. Final Pre-deployment Checks:

   • TypeScript type checking for error validation
   • ESLint for code style and error checking
   • Build artifact integrity verification

6. Deployment to Cloudflare Workers:

   • Using Wrangler for deployment processing
   • Distributing static assets to the global CDN
   • Uploading worker scripts and configuration

Build Scripts in package.json

The project's package.json defines scripts to automate these processes:

"scripts": {
  "dev": "vite",
  "build": "vite build --mode client && vite build && node scripts/convert-webp.js",
  "format": "prettier --write . --ignore-path .gitignore",
  "typecheck": "tsc --noEmit",
  "claude": "claude",
  "convert-webp": "node scripts/convert-webp.js",
  "generate-icons": "node scripts/generate-icons.js",
  "lint": "eslint . --max-warnings 0",
  "lint:fix": "eslint . --fix --max-warnings 0",
  "check": "npm run typecheck && npm run lint"
}

Cloudflare Workers Configuration

The Cloudflare Workers configuration is managed in the wrangler.jsonc file, which includes cache rules, environment variables, and routing settings. Here's an example of the configuration file:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "homepage",
  "compatibility_date": "2025-05-10",
  "compatibility_flags": ["nodejs_compat"],
  "assets": {
    "directory": "./dist"
  }
}

This deployment configuration enables fast page loads, efficient resource management, and global content delivery. Additionally, Cloudflare Workers' serverless environment is an excellent choice for scalability and cost efficiency.

Lessons and Insights from AI-Powered Development

The AI-powered development process was incredibly fruitful, providing many valuable lessons and insights. Here are the key points learned from this experience in detail:

1. Transformation of Development Process

• Dramatically Accelerated Prototyping: AI support made the process from initial design to prototyping 5-10 times faster than traditional methods. Particularly with common components and utilities, we could quickly iterate based on AI-proposed code.

• Shortened Iteration Cycles: The "idea → implementation → testing → improvement" cycle was significantly shortened, creating rapid feedback loops. This enabled more experimentation and refinement.

• Reduced Barriers to Complex Implementations: Even with complex implementations requiring TypeScript's advanced type system or SSG configuration, AI guidance made progress possible, lowering technical barriers.

2. Technical Quality and Currency

• Automatic Incorporation of Modern Practices: AI consistently suggested the latest development practices and design patterns, allowing natural learning and adoption of modern implementation techniques.

• Code Quality and Consistency: AI-proposed code was generally high quality and consistent, maintaining unified design principles throughout the project.

• Early Detection of Errors and Issues: AI pointed out potential problems and bugs early in development, preventing serious issues from being discovered later.

3. Qualitative Enhancement of Developer Experience

• Reduction of Boilerplate Code: By delegating repetitive boilerplate code creation to AI, I could focus on more creative and valuable work.

• Eased Learning Curves: Learning curves for new technologies and libraries were eased with AI support, enabling quick acquisition of new tools and methods.

• Improved Decision-Making Processes: AI presented multiple options and their trade-offs, enabling more informed decision-making.

4. Human-AI Collaboration Model

• Balanced Role Distribution: An effective role distribution naturally established where AI handled implementation details while humans made creative directions and final judgments.

• Improved AI Literacy: Through collaboration with AI, skills in creating effective prompts and evaluating results improved, maximizing AI tool utilization.

• Recognition of Human Strengths: Working with AI clarified the value of uniquely human qualities like creativity, intuition, contextual understanding, and aesthetic judgment.

5. Challenges and Areas for Improvement

• Importance of Context Management: It became clear that properly sharing and maintaining project context is crucial for effective collaboration with AI.

• Dealing with AI Limitations: I learned how to handle specific problems AI struggles with and cases where it goes in the wrong direction.

• Workflow Optimization: For efficient collaboration with AI, it was necessary to reconsider traditional development workflows and incorporate new tools and processes.

Conclusion and Future Outlook

This project demonstrates how revolutionary AI-powered development can be in modern web development. By combining Claude Code and OpenAI tools, I was able to quickly build a high-performance, maintainable website utilizing the latest technology stack including HonoX, TypeScript, MDX, and TailwindCSS.

From this experience, it's clear that AI is not just a "code generation tool" but can be a true partner transforming the entire development process. Combining human creativity with AI efficiency makes it possible to realize more complex and sophisticated software projects than ever before.

In future web development, AI-powered approaches will continue to evolve and become standard development methods. This project merely shows a glimpse of that possibility, symbolizing the beginning of a new era of creative collaboration between AI and humans.

As developers, mastering these tools and learning effective methods of collaboration with AI will become increasingly important skills. I hope this project experience serves as a reference for your journey in AI-powered development.