I Finally Created My Personal Blog.

I, Yeojindol, have finally created my personal blog.

I had planned to create a blog with some acquaintances, but due to lack of time, it kept getting postponed. I finally got around to working on it. (To be honest, I had somewhat forgotten about it...)

I've written about the process in a very light, diary-like fashion.

Getting Started

I was at a loss as to where to begin, but Changyu shared a template with me.

Basic elements like OG tags and sitemaps were well-implemented, so it was mostly a matter of just designing. Others mentioned that they completed their blogs in just a few hours using this template with 'vibe coding,' so I started with a light heart.

Design

I've always liked the iPod Classic.

So, I spent a lot of time creating a design guide md file with Claude.

I created the design guide file through many conversations, referencing iPod photos and curved gradients found on Google.

While not entirely satisfied, it was completed well, achieving the desired feel...

CMS

This is the workflow that emerged from discussions with acquaintances about how to build the blog and how to manage blog posts.

It's a workflow where I easily write posts using Notion and then upload the md files to GitHub.

Image Handling

A point to note is that Notion images have an expiration time, so you need to save images locally or upload them separately to S3 for use.

Saving images locally can increase bundle size, so I used S3.

Multilingual Support

I aimed to translate Notion posts using the Gemini API and provide an English version alongside them.

I asked for an API prompt to be created using 'vibe coding.' I'm satisfied with it.

function createTranslationPrompt(content: string): string {
  return `You are a professional technical translator specializing in software engineering content.

Task: Translate the following Korean blog post to natural, fluent English.

CRITICAL REQUIREMENTS:
1. Preserve ALL Markdown syntax EXACTLY (##, ###, -, *, \`, \`\`\`, >, [], (), etc.)
2. DO NOT translate:
   - Code blocks (content inside \`\`\` \`\`\`)
   - Code snippets (content inside \` \`)
   - URLs and links
   - File paths and file names
   - Package names and technical identifiers
   - HTML/JSX tags
3. Translate frontmatter fields:
   - title: Translate to natural English
   - summary: Translate to natural English
   - Keep other fields (publishedAt, language, tags) unchanged
   - Change language field value from "ko" to "en"
4. Maintain professional, technical writing style
5. Use standard technical terminology
6. Keep the same structure and formatting

ORIGINAL KOREAN CONTENT:
---
${content}
---

Provide ONLY the translated content in English. Do not add explanations or comments.

TRANSLATED ENGLISH CONTENT:`;
}

For other basic content, I handled translation using intl libraries.

The user's language is handled so that its default value can be stored and modified in a cookie.

Satisfying Design

This is a design I've wanted to incorporate since I first thought about creating a blog, and it's so cute. I'm satisfied.

Vibe Coding Review

Since the content I wanted to implement was clear, the PRD structure and development flow proceeded without difficulty.

However, the design often felt ambiguous, leading me to spend the most time on implementation, sometimes implementing things directly myself.

Still, about a year ago, I couldn't have imagined setting things up this quickly with 'vibe coding.' The rapidly advancing AI is quite frightening.

I'm trying my best to utilize it well, and this time too, I think I had fun building the blog with AI. (Though the design part was a bit frustrating.)

(The PRD and guide md files created during this collaborative development)

TODO..

1. Add Redis operations for page views, visits, etc.
2. Improve design
3. Support GIF on S3