Tailwind Nextjs Starter Blog 테마 설정하기

소개

Tailwind Nextjs Starter Blog는 Next.js와 Tailwind CSS를 기반으로 한 블로그 템플릿입니다. 기술 블로그 작성에 최적화되어 있으며, 다양한 기능을 제공합니다.

주요 기능

• Next.js와 TypeScript 지원
• Tailwind CSS 3.0 스타일링
• MDX를 통한 마크다운 작성
• 다크모드 지원
• 검색 기능
• SEO 최적화
• 수학 수식 지원 (KaTeX)
• 코드 하이라이팅

설치 방법

1. 프로젝트 클론하기:

npx degit 'timlrx/tailwind-nextjs-starter-blog'

2. 의존성 설치:

yarn install

3. 개발 서버 실행:

yarn dev

기본 설정하기

1. 사이트 메타데이터 수정

data/siteMetadata.js 파일에서 다음 정보들을 수정합니다:

const siteMetadata = {
  title: '내 블로그 제목',
  author: '작성자 이름',
  headerTitle: '헤더 제목',
  description: '블로그 설명',
  language: 'ko-kr',
  siteUrl: '사이트 URL',
  // ... 기타 설정
}

2. 작성자 정보 설정

data/authors/default.md 파일을 수정하여 기본 작성자 정보를 업데이트합니다.

3. 네비게이션 링크 수정

data/headerNavLinks.ts에서 상단 메뉴를 커스터마이즈할 수 있습니다.

블로그 포스트 작성하기

data/blog 디렉토리에 .mdx 또는 .md 파일을 생성하여 포스트를 작성합니다. 각 포스트는 다음과 같은 프론트매터를 포함해야 합니다:

---
title: '포스트 제목'
date: '2024-03-19'
tags: ['태그1', '태그2']
draft: false
summary: '포스트 요약'
---

배포하기

Vercel 배포

1. GitHub에 프로젝트를 푸시
2. Vercel에서 해당 저장소 import
3. 자동으로 배포 완료

GitHub Pages 배포

• GitHub Actions를 통해 자동 배포 가능
• Settings > Pages에서 "GitHub Actions" 선택

추가 커스터마이즈

• tailwind.config.js: 테마 색상 및 스타일 수정
• css/tailwind.css: 전역 스타일 수정
• components/MDXComponents.js: MDX 컴포넌트 추가

마무리

이제 기본적인 설정이 완료되었습니다. 필요에 따라 추가적인 커스터마이즈를 진행하고 블로그 포스팅을 시작하시면 됩니다.