TechMentor
Sessions
입문무료2-3시간

무료로 기술 블로그 만들기

Next.js와 Cloudflare Pages를 활용하여 비용 없이 나만의 기술 블로그를 구축합니다.

What You Will Build
  • Next.js 기반 정적 블로그
  • 마크다운으로 포스트 작성
  • Cloudflare Pages 무료 호스팅
  • 자동 배포 (GitHub 연동)
  • 무료 SSL 인증서
1
개발 환경 설정
Node.js와 필수 도구를 설치합니다.

Node.js 설치

Node.js 18 이상 버전을 설치합니다.

# Node.js 설치 확인
node --version  # v18.0.0 이상

# npm 설치 확인
npm --version

Git 설치

버전 관리를 위해 Git을 설치합니다.

# Git 설치 확인
git --version

# Git 사용자 설정
git config --global user.name "Your Name"
git config --global user.email "your@email.com"
2
Next.js 프로젝트 생성
create-next-app으로 새 프로젝트를 생성합니다.

프로젝트 생성

터미널에서 다음 명령어를 실행합니다.

npx create-next-app@latest my-tech-blog

# 설정 옵션 선택:
# ✔ Would you like to use TypeScript? Yes
# ✔ Would you like to use ESLint? Yes
# ✔ Would you like to use Tailwind CSS? Yes
# ✔ Would you like to use src/ directory? No
# ✔ Would you like to use App Router? Yes
# ✔ Would you like to customize the default import alias? No

프로젝트 폴더로 이동

생성된 프로젝트 폴더로 이동합니다.

cd my-tech-blog

# 개발 서버 실행
npm run dev

# 브라우저에서 http://localhost:3000 확인
3
블로그 레이아웃 구성
기본 레이아웃과 네비게이션을 만듭니다.

레이아웃 수정

app/layout.tsx 파일을 수정합니다.

// app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My Tech Blog",
  description: "개발 경험을 공유하는 기술 블로그",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className={inter.className}>
        <header className="border-b">
          <nav className="container mx-auto px-4 py-4 flex justify-between">
            <Link href="/" className="text-xl font-bold">
              My Tech Blog
            </Link>
            <div className="flex gap-4">
              <Link href="/posts">Posts</Link>
              <Link href="/about">About</Link>
            </div>
          </nav>
        </header>
        <main className="container mx-auto px-4 py-8">
          {children}
        </main>
      </body>
    </html>
  );
}
4
블로그 포스트 페이지 생성
마크다운 기반 블로그 포스트 시스템을 구축합니다.

필요한 패키지 설치

마크다운 처리를 위한 패키지를 설치합니다.

npm install gray-matter remark remark-html

포스트 폴더 생성

프로젝트 루트에 posts 폴더를 만들고 샘플 포스트를 작성합니다.

# posts/hello-world.md
---
title: "첫 번째 포스트"
date: "2024-01-01"
description: "Next.js로 만든 블로그의 첫 포스트입니다."
---

## 안녕하세요!

이것은 **마크다운**으로 작성된 첫 번째 포스트입니다.

```javascript
console.log("Hello, World!");
```

포스트 유틸리티 함수

lib/posts.ts 파일을 생성합니다.

// lib/posts.ts
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import { remark } from "remark";
import html from "remark-html";

const postsDirectory = path.join(process.cwd(), "posts");

export function getAllPosts() {
  const fileNames = fs.readdirSync(postsDirectory);
  const posts = fileNames.map((fileName) => {
    const slug = fileName.replace(/\.md$/, "");
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, "utf8");
    const { data } = matter(fileContents);

    return { slug, ...data };
  });

  return posts.sort((a: any, b: any) => 
    new Date(b.date).getTime() - new Date(a.date).getTime()
  );
}

export async function getPostBySlug(slug: string) {
  const fullPath = path.join(postsDirectory, `${slug}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");
  const { data, content } = matter(fileContents);
  
  const processedContent = await remark().use(html).process(content);
  const contentHtml = processedContent.toString();

  return { slug, contentHtml, ...data };
}
5
포스트 목록 및 상세 페이지
포스트 목록과 개별 포스트 페이지를 만듭니다.

포스트 목록 페이지

app/posts/page.tsx 파일을 생성합니다.

// app/posts/page.tsx
import Link from "next/link";
import { getAllPosts } from "@/lib/posts";

export default function PostsPage() {
  const posts = getAllPosts();

  return (
    <div>
      <h1 className="text-3xl font-bold mb-8">Posts</h1>
      <div className="space-y-4">
        {posts.map((post: any) => (
          <article key={post.slug} className="border-b pb-4">
            <Link href={`/posts/${post.slug}`}>
              <h2 className="text-xl font-semibold hover:text-blue-600">
                {post.title}
              </h2>
            </Link>
            <p className="text-gray-600">{post.description}</p>
            <time className="text-sm text-gray-400">{post.date}</time>
          </article>
        ))}
      </div>
    </div>
  );
}

포스트 상세 페이지

app/posts/[slug]/page.tsx 파일을 생성합니다.

// app/posts/[slug]/page.tsx
import { getPostBySlug, getAllPosts } from "@/lib/posts";

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post: any) => ({ slug: post.slug }));
}

export default async function PostPage({ 
  params 
}: { 
  params: { slug: string } 
}) {
  const post = await getPostBySlug(params.slug);

  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{post.title}</h1>
      <time className="text-gray-400">{post.date}</time>
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
    </article>
  );
}
6
GitHub 저장소 생성
코드를 GitHub에 업로드합니다.

GitHub 저장소 생성

GitHub에서 새 저장소를 생성합니다.

# 1. GitHub.com에서 New Repository 클릭
# 2. Repository name: my-tech-blog
# 3. Public 선택
# 4. Create repository 클릭

코드 푸시

로컬 코드를 GitHub에 업로드합니다.

# Git 초기화 (이미 되어있다면 생략)
git init

# 모든 파일 추가
git add .

# 커밋
git commit -m "Initial commit: Next.js blog"

# 원격 저장소 연결
git remote add origin https://github.com/YOUR_USERNAME/my-tech-blog.git

# 푸시
git branch -M main
git push -u origin main
7
Cloudflare Pages 배포
Cloudflare Pages에 무료로 배포합니다.

Cloudflare 계정 생성

Cloudflare 계정이 없다면 생성합니다.

# 1. https://dash.cloudflare.com/sign-up 접속
# 2. 이메일로 가입
# 3. 이메일 인증 완료

Pages 프로젝트 생성

Cloudflare Pages에서 새 프로젝트를 생성합니다.

# 1. Cloudflare Dashboard > Workers & Pages 클릭
# 2. Create application > Pages 탭 선택
# 3. Connect to Git 클릭
# 4. GitHub 계정 연결 및 저장소 선택

빌드 설정

Next.js 빌드 설정을 입력합니다.

# Build settings:
# Framework preset: Next.js
# Build command: npx @cloudflare/next-on-pages@1
# Build output directory: .vercel/output/static

# Environment variables (optional):
# NODE_VERSION: 18

배포 완료

Save and Deploy를 클릭하면 자동으로 배포됩니다.

# 배포 완료 후:
# https://my-tech-blog.pages.dev 형태의 URL 제공

# 이후 main 브랜치에 push하면 자동 배포됨
8
커스텀 도메인 연결 (선택)
나만의 도메인을 연결합니다.

도메인 설정

Cloudflare Pages에서 커스텀 도메인을 설정합니다.

# 1. Pages 프로젝트 > Custom domains 탭
# 2. Set up a custom domain 클릭
# 3. 도메인 입력 (예: blog.yourdomain.com)
# 4. DNS 설정 자동 구성됨

# Cloudflare에서 도메인을 관리하면 SSL도 자동 적용!
Congratulations!

축하합니다! 이제 나만의 기술 블로그가 완성되었습니다. 마크다운 파일을 추가하고 git push만 하면 자동으로 배포됩니다.

Next Steps:

  • • 더 많은 포스트 작성하기
  • • 코드 하이라이팅 추가 (rehype-highlight)
  • • 댓글 기능 추가 (giscus)
  • • SEO 최적화
  • • Google Analytics 연동