개인 Blog 만들기 - 1

개요

개인 Blog를 직접 만들어보려고 한다.

원래 예전부터 만드려고는 했지만,

당장 할 일의 중요도에서 계속 미뤄지다보니 여기까지 왔다.

 

물론, 지금도 중요도가 높은 다른 task들이 있다.

그럼에도 마음 먹은 이유는 다음과 같다.

 

1. 티스토리 AI 댓글 너무 달린다.

이게 가장 큰 문제다.

광고 클릭했다느니, 한 번 들러달라느니 이런 블로그 들어가보면

AI로 글 찍어내는 공장 블로그다.

블로그의 퀄리티를 저해시킨다고 생각했다.

 

2. Next.js 연습

항상 React만 사용하다가 최근 들어서 Next.js를 공부중인데,

아무래도 강의보고 따라치기보단 직접 만들면서 부딫혀보는게 낫다고 생각했다.

강의들으면서 공부하는것의 가장 큰 문제점은,

단순히 강의를 많이 들었을 뿐인데, 많이 공부했다고 착각하게 된다.

공부한 양이 많아봤자, 자기가 활용을 못하면 시간만 날린것이다.

그래서 Next.js를 주축으로 블로그를 구성해보려 한다.

 

기술 스택

• Next.js + TypeScript
• Tailwind CSS + shadcn/ui
• Supabase or MDX

Next.js, TypeScript, Tailwind CSS, shadcn/ui는 확정이다.

 

현재 가장 고민되는건 글을 저장하는 방식이다.

Supabase로 별도의 서버와 DB를 둔다면,

글을 작성하는 editor 라이브러리를 다룰 기회도 생기고,

댓글 등 직접 구성하는데 확장성이 크다.

 

하지만, 서칭결과 많이 사용하는 방식은 mdx를 사용하는 방식이다.

mdx는 마크다운에 컴포넌트를 삽입할 수 있는 방식이다.

또한, mdx 파일을 프로젝트 내에 직접 저장하게 된다.

블로그 글을 쓰면 잔디를 채운다...ㅎ...

 

적다보니까 정해졌다(?)

시간이 조금 더 걸리더라도,

공부를 위해 Supabase를 저장하는 방식으로 해야겠다.

지금 이 블로그에도 600개 이상의 글을 썼지만,

기본 에디터로도 충분히 부족함이 없다고 생각했다.

 

최종 기술스택은 다음과 같이!

• Next.js + TypeScript
• Tailwind CSS + shadcn/ui
• Supabase or MDX

 

기획

일단, 필요한 기능은 크게 다음과 같다.

• 카테고리 or 시리즈 CRUD
• 포스트 CRUD
• 댓글 CRUD (대댓글 포함)

 

디자인에 큰 소요를 쏟기는 싫어서,

https://www.youtube.com/watch?v=RnJkhxFMWDY&t=4s

 

이 영상을 참고해서 AI로 디자인을 해 볼 예정이다.

 

참고 디자인들은 계속해서 서칭해봐야겠다.

 

참고 디자인 (계속 추가)

https://bepyan.me/

bepyan.me

미니멀한 디자인이 개인적으로 정말 취향이다!

 

https://univdev.page/

Univdev

되게 깔끔하고, 정석적인 개발 블로그라고 생각이된다.

정말 깔끔한게 좋다. (jekyll의 chirpy 테마)

https://github.com/cotes2020/jekyll-theme-chirpy

GitHub - cotes2020/jekyll-theme-chirpy: A minimal, responsive, and feature-rich Jekyll theme for technical writing.