I Developed a New Blog Site

Article Overview

I developed a blog site focusing on performance using Astro & Tailwind.

I created my personal blog. I had been using Google’s “Blogger” for many years, but I decided to migrate from a vendor-provided environment with many restrictions to a freely developed Astro blog site.

I have incorporated various features, so I have summarized the site’s characteristics and its contents.

About the Terms

What is Astro?

Astro is a web framework for building content-driven websites such as blogs, marketing, and e-commerce. Astro is known for pioneering new front-end architecture and reducing JavaScript overhead and complexity compared to other frameworks. If you need a fast, SEO-friendly website, Astro is the best choice.

— From astro official docs

What is Tailwind CSS?

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and writing them to a static CSS file.

It’s fast, flexible, and reliable - with zero runtime.

— From Installation - Tailwind CSS

Site Features

Like this site, I developed a blog site based on the static site generator “Astro” and CSS framework “Tailwind CSS”.

I extensively customized an Astro template called “blog-template” to ensure rich functionality while maintaining high performance.

PageSpeed Insights - Mobile

PageSpeed Insights - Desktop

Implemented Features List

• The links below are articles with detailed information about the features developed this time.
• The article about blog migration is here

Environment Setup

• Headless CMS “Front Matter CMS”
• Test Framework “Jest”
• Japanese text proofreading tool “textlint”

Site Components

• RSS Feed with HTML article content

MDX Components

• Display filename and diff in code blocks
• Display related articles by matching tag count
• Added TabBar for mobile display
• Added BlogCard component
• Add captions to images with anchor links
• Embed YouTube and X posts with lazy loading
• Lazy load Google Analytics JavaScript
• Added Google Adsense lazy loading
• Added breadcrumb navigation
• Contact Form with validation and reCAPTCHA

Execution Environment