Satellite Logo
곽선생 Tech Blog
Go Back
Published on
Authors

Tailwind Next.js Starter Blog는 Next.js와 Tailwind CSS를 기반으로 빠르게 블로그를 시작할 수 있는 템플릿입니다. 이번 글에서는 블로그를 만드는 과정과 커스터마이징 요령, 그리고 배포 방법(github.io와 Vercel)을 자세히 다룹니다.

1. 소개

Tailwind Next.js Starter Blog는 다음과 같은 장점을 제공합니다:

  • 빠른 시작: 기본적인 블로그 구조와 스타일이 제공됨.
  • Tailwind CSS 기반: 유연한 스타일링 가능.
  • MDX 지원: 마크다운과 React 컴포넌트 결합.
  • SEO 최적화: 메타 태그와 소셜 공유 미리보기 기본 제공.

프로젝트를 시작하면 시간을 절약하고, 블로그의 기본 기능을 빠르게 구현할 수 있습니다.

2. 설치 방법

1) 프로젝트 생성

먼저 GitHub에서 템플릿을 복제합니다:

git clone https://github.com/timlrx/tailwind-nextjs-starter-blog.git my-blog
cd my-blog

2) 의존성 설치

프로젝트 디렉토리로 이동한 후 패키지를 설치합니다:

npm install

또는 Yarn을 사용하는 경우:

yarn

3) 개발 서버 실행

다음 명령어로 개발 서버를 실행합니다:

npm run dev

브라우저에서 http://localhost:3000으로 이동하여 블로그를 확인하세요.

3. 커스터마이징 요령

Tailwind Next.js Starter Blog는 높은 유연성을 제공합니다. 몇 가지 주요 커스터마이징 방법은 다음과 같습니다.

1) 사이트 설정 변경

data/siteMetadata.js 파일에서 블로그의 제목, 설명, 소셜 링크 등을 수정할 수 있습니다.

const siteMetadata = {
  title: 'My Awesome Blog',
  author: 'Your Name',
  description: 'A blog about web development and more',
  language: 'en-us',
  siteUrl: 'https://myblog.com',
  email: 'me@example.com',
  github: 'https://github.com/yourname',
}
export default siteMetadata

2) Tailwind CSS 스타일 수정

tailwind.config.js 파일을 수정하여 색상, 글꼴, 간격 등을 변경하세요.

예: 기본 색상 팔레트 확장

theme: {
  extend: {
    colors: {
      primary: "#4caf50",
      secondary: "#ff5722",
    },
  },
},

3) 페이지 추가

pages 디렉토리에 파일을 추가하여 새로운 페이지를 만들 수 있습니다. 예를 들어, about.js를 추가하여 소개 페이지를 생성합니다:

export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">About Me</h1>
      <p className="mt-4">This is the about page of my blog.</p>
    </div>
  )
}

4) 게시물 작성

data/blog 디렉토리에 마크다운(MDX) 파일을 추가하면 새로운 게시물이 생성됩니다.

예: my-first-post.mdx

---
title: 'My First Post'
date: '2025-01-13'
tags: ['nextjs', 'tailwind', 'blog']
summary: 'This is my first blog post using Tailwind Next.js Starter Blog.'
---

# Welcome to My First Post

This is a sample blog post written in MDX.

4. 배포 방법

방법 1: GitHub Pages(github.io)

GitHub Pages는 정적 사이트를 무료로 호스팅할 수 있는 플랫폼입니다.

  1. next.config.js 수정 next.config.js에 assetPrefix와 basePath를 설정합니다:

    module.exports = {
  assetPrefix: '/my-blog',
  basePath: '/my-blog',
}

  2. 빌드 정적 파일을 생성합니다:

    npm run build
npm run export

    out 디렉토리에 정적 파일이 생성됩니다.

  3. GitHub Pages에 업로드

    • GitHub에 새 저장소 생성.
    • 생성된 out 디렉토리를 저장소의 gh-pages 브랜치에 푸시.
    git init
git branch -M gh-pages
git add .
git commit -m "Deploy to GitHub Pages"
git push -u origin gh-pages

  4. GitHub Pages 설정 GitHub 저장소의 Settings > Pages로 이동하여 브랜치를 gh-pages로 설정하세요.

방법 2: Vercel

Vercel은 Next.js 앱 배포에 최적화된 플랫폼입니다.

  1. Vercel 계정 생성 Vercel 홈페이지에서 계정을 생성합니다.

  2. 프로젝트 업로드

    • GitHub 저장소를 Vercel에 연결.
    • 기본 설정을 유지한 채로 "Deploy" 버튼을 클릭합니다.

  3. 도메인 설정 Vercel에서 제공하는 기본 도메인을 사용하거나, 사용자 지정 도메인을 연결할 수 있습니다.

질문이나 제안이 있다면 댓글로 남겨주세요! 😊

Discuss on Twitter • View on GitHub