🌵 fredly.dev

기술과 커뮤니케이션의 힘으로 세상을 바꾸는 개발자의 기술 블로그

🌐 Live Demo • 📝 Blog Posts • 👤 About

---

🛠️ Tech Stack

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (권장) 또는 npm

Installation

# Repository 클론
git clone https://github.com/suites/fredly-dev.git
cd fredly-dev

# 의존성 설치
pnpm install

# 개발 서버 시작
pnpm dev

Available Scripts

pnpm dev       # 개발 서버 실행 (http://localhost:4321)
pnpm build     # 프로덕션 빌드
pnpm preview   # 빌드 미리보기
pnpm lint      # 코드 린팅
pnpm format    # 코드 포맷팅

📁 Project Structure

src/
├── components/          # 재사용 가능한 Astro 컴포넌트
│   ├── Bio.astro       # 작성자 프로필
│   ├── CategoryMenu.astro # 카테고리 네비게이션
│   ├── Header.astro    # 헤더 컴포넌트
│   └── PostCard.astro  # 포스트 카드
├── content/
│   └── blog/           # MDX 블로그 포스트
│       ├── web/        # 웹 개발 관련
│       ├── algorithm/  # 알고리즘 관련
│       └── ...         # 기타 카테고리
├── layouts/            # 레이아웃 컴포넌트
│   ├── Layout.astro    # 기본 레이아웃
│   └── BlogPost.astro  # 블로그 포스트 레이아웃
├── pages/              # 라우팅 페이지
│   ├── index.astro     # 홈페이지
│   ├── category/       # 카테고리 페이지
│   └── [...slug].astro # 동적 블로그 포스트
├── styles/             # 전역 스타일
└── utils/              # 유틸리티 함수

📝 Content Management

새 포스트 작성

# 카테고리 폴더에 새 MDX 파일 생성
src/content/blog/{category}/{post-slug}/index.mdx

포스트 프론트매터 예시

---
title: "포스트 제목"
description: "포스트 설명"
date: 2024-01-01
category: "web"
emoji: "🚀"
tags: ["javascript", "react", "web"]
---

# 포스트 내용을 여기에 작성하세요!

🎨 Customization

카테고리 추가

src/consts.ts에서 새로운 카테고리를 추가할 수 있습니다:

export const CATEGORIES: readonly Category[] = [
  {
    name: '새 카테고리',
    slug: 'new-category',
    color: '#ff6b6b',
    icon: '🎯',
    link: '/category/new-category',
  },
  // ... 기존 카테고리들
];

스타일 수정

• 전역 스타일: src/styles/global.css
• 컴포넌트별 스타일: 각 .astro 파일 내 <style> 태그

🚀 Deployment

이 프로젝트는 Netlify에 배포되어 있습니다. 새로운 커밋이 main 브랜치에 푸시되면 자동으로 배포됩니다.

Manual Deployment

# 빌드
pnpm build

# dist 폴더를 호스팅 서비스에 업로드

🤝 Contributing

1. 이 저장소를 Fork 하세요
2. 새로운 기능 브랜치를 만드세요 (git checkout -b feature/amazing-feature)
3. 변경사항을 커밋하세요 (git commit -m 'Add some amazing feature')
4. 브랜치에 푸시하세요 (git push origin feature/amazing-feature)
5. Pull Request를 열어주세요

📄 License

이 프로젝트는 MIT 라이센스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

👨‍💻 Author

yoon.homme

• Website: fredly.dev
• GitHub: @suites
• LinkedIn: fredyoons
• Email: woosiks.io@gmail.com

---

⭐ 이 프로젝트가 도움이 되었다면 스타를 눌러주세요!

Made with ❤️ by yoon.homme