Technical note by Daiki Oshima - A minimal and modern blog built with Astro

daiblog is a personal technical blog created by Daiki Oshima, a frontend engineer. This site serves as an accumulation of technical knowledge and outputs, built with modern web technologies for optimal performance and developer experience.

🌐 Live Site: blog.osmdik.com

• 📝 Markdown-based content - Write articles in Markdown with MDX support
• 🌙 Dark mode toggle - Seamless theme switching
• 📱 Responsive design - Mobile-first approach with TailwindCSS
• 🏷️ Tag system - Organize and filter articles by tags
• 📖 Typography - Beautiful reading experience with @tailwindcss/typography
• 🔍 SEO optimized - Sitemap, RSS feed, and meta tags
• ⚡ Fast performance - Static site generation with Astro
• 🎨 Minimal design - Clean and focused user interface
• 📊 Analytics ready - Google Analytics integration via Partytown
• 🔗 Social sharing - Built-in social media share buttons

• Astro - Static site generator
• React - Interactive components
• TypeScript - Type safety

• TailwindCSS - Utility-first CSS framework
• @tailwindcss/typography - Beautiful typographic defaults
• @fontsource/josefin-sans - Web font optimization

• @astrojs/react - React component support
• @astrojs/tailwind - TailwindCSS integration
• @astrojs/mdx - MDX support for dynamic content
• @astrojs/sitemap - Automatic sitemap generation
• @astrojs/rss - RSS feed generation
• @astrojs/partytown - Third-party script optimization

• react-share - Social media sharing components

daiblog/
├── public/                 # Static assets
│   ├── images/            # Blog post images
│   ├── fonts/             # Web fonts
│   └── favicon.ico        # Site favicon
├── src/
│   ├── components/        # Reusable Astro/React components
│   │   ├── BaseHead.astro      # HTML head with meta tags
│   │   ├── Header.astro        # Site header with navigation
│   │   ├── Footer.astro        # Site footer
│   │   ├── ThemeIcon.astro     # Dark mode toggle
│   │   ├── ShareButtons.tsx    # Social sharing buttons
│   │   └── FormattedDate.astro # Date formatting component
│   ├── content/           # Content collections
│   │   ├── blog/          # Blog post markdown files
│   │   └── config.ts      # Content schema definition
│   ├── layouts/           # Page layouts
│   │   ├── BaseLayout.astro    # Base HTML structure
│   │   └── PostLayout.astro    # Blog post layout
│   ├── pages/             # File-based routing
│   │   ├── index.astro         # Homepage
│   │   ├── profile.astro       # About page
│   │   ├── rss.xml.js          # RSS feed endpoint
│   │   ├── posts/[...slug].astro # Dynamic blog post pages
│   │   └── tags/               # Tag-based filtering
│   ├── styles/
│   │   └── global.css          # Global styles
│   └── consts.ts          # Site constants
├── documents/             # Documentation
│   └── commit-message-rules.md # Conventional Commits guide
├── astro.config.mjs       # Astro configuration
├── tailwind.config.mjs    # TailwindCSS configuration
├── tsconfig.json          # TypeScript configuration
├── CLAUDE.md              # Development guidance
└── package.json           # Dependencies and scripts

• Node.js 22.17.1 (LTS) or higher
• npm package manager

1. Clone the repository

   git clone https://github.com/osmdik/daiblog.git
   cd daiblog

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   Visit http://localhost:4321

npm run dev      # Start development server
npm run build    # Build for production (with type checking)
npm run preview  # Preview production build
npm run astro    # Run Astro CLI commands

Blog posts are written in Markdown with frontmatter metadata:

---
title: "Your Post Title"
description: "Brief description of the post"
pubDate: 2025-01-15
updatedDate: 2025-01-16 # Optional
tags: ["JavaScript", "React", "TypeScript"] # Optional
---

Your content here...

All blog posts must include:

• title (required) - Post title
• description (required) - SEO description
• pubDate (required) - Publication date
• updatedDate (optional) - Last updated date
• tags (optional) - Array of tag strings

Place images in the public/images/ directory and reference them in your markdown:

![Alt text](/images/your-image.jpg)

The site supports system preference detection and manual toggle:

• Uses TailwindCSS class strategy
• Implemented via ThemeIcon component
• Persists user preference in localStorage

• Colors: Modify tailwind.config.mjs
• Typography: Configured via @tailwindcss/typography
• Fonts: Josefin Sans loaded via @fontsource

This site is optimized for Vercel deployment:

1. Connect repository to Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Deploy automatically on git push

npm run build
# Upload contents of `dist/` to your hosting provider

• TypeScript for type safety
• Conventional Commits for consistent git history
• ESLint and Prettier ready (add if needed)

This project follows Conventional Commits:

feat(blog): add dark mode toggle
fix(posts): resolve tag display issue
docs: update README with new features

See documents/commit-message-rules.md for detailed guidelines.

• Google Analytics integration via Partytown
• Lighthouse optimized for performance
• SEO friendly with sitemap and meta tags
• RSS feed available at /rss.xml

Daiki Oshima - Software Engineer

• Blog: blog.osmdik.com
• GitHub: @osmdik

Built with ❤️ using Astro, TailwindCSS, and modern web technologies