Tomokichi's Engineering Growth Log Tomokichi
JA

Works

Tomokichi's Engineering Growth Log

A tech blog and portfolio site built with Astro.

Status
active
Category
blog
Stack
Astro, Tailwind CSS v4, TypeScript, Cloudflare Workers, Biome, Lighthouse CI

Key Highlights

  • Strategic migration from Next.js to Astro for a lightweight, static architecture
  • Continuous quality monitoring using Lighthouse CI and JS Budgets
  • Unified platform preserving technical decisions and continuous improvement processes

Overview

'Tomokichi's Engineering Growth Log' is a tech blog and portfolio site for recording learning, development memos, tech decisions, and indie dev processes. It prioritizes the reading experience, minimizing unnecessary JavaScript on initial load and delivering articles as static HTML.

Background

Originally run on Next.js, I felt web-app features were overkill for a reading-focused blog and migrated to a lightweight, statically generated architecture. In an era where AI can easily build flashy sites, I integrated my blog and portfolio to create a space that continuously showcases my technical decisions and improvement processes, not just the final products.

Challenges Solved

User Challenges

Providing a unified platform for recruiters and engineers to trace technical growth, understand the design intent behind personal projects, and explore Astro and web performance implementations.

Technical Challenges

Realizing a static HTML architecture where browsers can render article text without waiting for JavaScript execution, contrary to typical heavy SPA setups.

Operational Challenges

Establishing continuous quality checks (lint, format, typecheck, build, Lighthouse CI, JS budget) to maintain performance and maintainability as content and features grow.

Main Features

  • Technical Article Publishing : Markdown-based content management
  • Bilingual Support : Content available in Japanese and English
  • Works Directory / Details : Detailed background and tech stack for personal projects
  • View Transitions : Seamless and natural page navigations

Responsibilities

  • Next.js to Astro Migration Strategy
  • Site Concept & Information Design
  • UI/UX Design & Styling (Tailwind CSS v4)
  • Frontend Implementation (Astro)
  • Cloudflare Workers Deployment Setup
  • Lighthouse CI & JS Budget Integration

Tech Stack

Frontend

  • Astro v6
  • Tailwind CSS v4
  • TypeScript

Infrastructure / Hosting

  • Cloudflare Workers Static Assets
  • GitHub Actions

Tooling

  • Biome
  • Lighthouse CI
  • pnpm

System Architecture

Generates static HTML with Astro and serves it via Cloudflare Workers Static Assets. CI pipelines ensure quality by running builds, type checks, linting, Lighthouse CI, and JS budget checks.

Code / Content
 ↓
lint / format / typecheck
 ↓
build (Astro Build -> Static HTML / CSS / JS)
 ↓
JavaScript Budget Check
 ↓
Lighthouse CI
 ↓
Deploy (Cloudflare Workers Static Assets)

Technical Refinements

Migrating from Next.js to Astro

Determined that SSR and client-side state management were unnecessary for a reading-focused blog, choosing a static HTML approach for optimal performance.

Delivering Text as Static HTML

Markdown is converted to HTML at build time, eliminating client-side parsing and rendering to prioritize immediate content visibility.

Minimizing Initial JS Payload

Strictly evaluating the necessity of JS features against their impact on parsing, compilation, and main thread blocking.

Deploying to Cloudflare Workers Static Assets

Serving pre-built static files without dynamic server processing or DB access, balancing speed, stability, and low maintenance.

Continuous Monitoring with Lighthouse CI & JS Budget

Setting a 50KB total JS gzip budget and automating Lighthouse checks across multiple page types to prevent feature bloat.

Integrating Tech Blog and Portfolio

Combining articles, projects, and improvement logs in one place to demonstrate continuous development processes rather than one-off products.

UI/UX Design Considerations

  • Single-column design prioritizing text readability and smooth scrolling over excessive decoration
  • App-like, pleasant page navigations using View Transitions within a static site
  • Clear navigation flows to code blocks, headings, and related articles

Performance, SEO & Accessibility

  • Setting strict performance targets (e.g., FCP 0.5-1.0s, TBT 0-50ms)
  • Configuring realistic CI thresholds separate from ideal targets to account for runner variance
  • Comprehensive metadata (canonical, hreflang) and strict semantic HTML enforcement

Security & Privacy

  • Minimized attack surface by avoiding server-side dynamic processing and database access
  • Strict dependency management to mitigate security risks and complex build configurations

Difficulties & Improvements

Challenge

Next.js to Astro Migration Decision

Solution

Audited truly necessary blog features and made the hard choice to strip away excess capabilities

Result

Simplified architecture, allowing hyper-focus on delivering article content quickly

Challenge

Balancing Speed and UX

Solution

Carefully evaluated features like search and animations based on whether they are truly needed for initial render

Result

Prevented JS bloat while maintaining necessary interactivity

Challenge

Risk of over-optimizing for Lighthouse scores

Solution

Monitored real-world UX (smooth scrolling, actual transition feel) alongside raw metrics

Result

Achieved a site that is not only fast on paper but offers a genuinely superior reading experience

What I Learned

  • Tech selection should be driven by the actual use case, not just industry trends
  • Performance optimization is not a one-time task; continuous monitoring mechanisms like JS budgets are essential

Future Plans

  • Improving article list display and navigation feel
  • Refining the layout and information density of the Works page
  • Expanding bilingual articles and enhancing code display with Shiki