← 개발일지

블로그를 개설했다 — solation.net 탄생기

블로그Next.jsVercelCloudflare

개인 블로그를 만들었다. 그 과정을 처음부터 끝까지 기록해둔다.

왜 블로그를 만들었나

개발하면서 배운 것들을 정리할 곳이 필요했다. 옵시디언에 노트는 쌓이는데, 정리해서 외부에 공유할 수 있는 공간이 없었다. 개발 이력, 하모니카 활동, 독서록까지 한 곳에 모으고 싶었다.

요구사항을 정리해보니 꽤 많았다:

  • 옵시디언 마크다운을 최대한 그대로 올릴 수 있을 것
  • 글 검색과 태그 관리가 가능할 것
  • 나중에 개인 관리 대시보드(가계부, 일정 등)도 붙일 수 있을 것
  • AdSense로 부수입도 가능하게
  • 아이폰에서도 접속/관리 가능

기술 스택 선택

Next.js + TypeScript + Tailwind CSS를 골랐다.

정적 블로그와 동적 관리 페이지를 하나의 프로젝트에서 처리할 수 있고, SEO도 좋고, Cursor 같은 AI 도구와 궁합도 좋다. 마크다운 렌더링도 자유롭게 커스터마이징할 수 있어서 옵시디언의 [[위키링크]] 같은 것도 나중에 구현 가능하다.

배포는 Vercel, DNS는 Cloudflare.

도메인 고르기

도메인 확장자(.com, .dev, .net 등)는 기능적 차이가 없다. 가격 차이는 레지스트리(확장자 관리 회사)가 정하는 도매가 때문이다.

  • .com — Verisign 관리, 가격 인상 상한 있어 안정적
  • .dev — Google 관리, HTTPS 강제, 개발자 타겟 프리미엄
  • .net — Verisign 관리, .com과 동급

Cloudflare Registrar에서 solation.net을 구매했다. 마진 없이 도매가로 판매하고, 첫해와 갱신 가격이 동일하다는 게 결정적이었다.

세팅 과정

1. 개발 환경

  • Git, Node.js (LTS), VS Code 설치
  • VS Code 확장: ESLint, Prettier, Tailwind CSS IntelliSense

Windows에서 Node.js 설치 후 VS Code 터미널에서 npx가 안 되는 문제가 있었는데, VS Code를 완전히 껐다 다시 열면 해결된다. 경로 갱신 문제.

2. 프로젝트 생성

npx create-next-app@latest solation-blog
cd solation-blog
npm run dev

localhost:3000에서 기본 페이지가 뜨면 성공.

3. GitHub → Vercel 배포

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/glglwjswls/solation-blog.git
git branch -M main
git push -u origin main

Vercel에서 GitHub 저장소를 import하고 Deploy. 자동으로 빌드되고 .vercel.app 주소가 생긴다.

4. 커스텀 도메인 연결

Vercel Settings → Domains에서 solation.net 추가 후, Vercel이 안내하는 DNS 레코드를 Cloudflare에 등록했다. Cloudflare에서 직접 도메인을 샀기 때문에 네임서버 변경은 불필요.

이제 solation.net으로 접속하면 내 사이트가 뜬다.

앞으로 할 것

  • 옵시디언 마크다운 자동 배포 파이프라인
  • 태그 기반 검색
  • 포트폴리오 페이지
  • 개인 관리 대시보드 (가계부, 일정, 독서록)
  • 오케스트라 사이트

하나씩 만들어 나가면서 과정을 계속 기록할 예정이다.