Next.js로 블로그 만들기 (Starter 템플릿 사용)

개요

Next.js를 사용하여 블로그를 만들기로 했습니다.
처음부터 한땀한땀 만들면 좋겠지만,
저는 그냥 마음에 드는 Starter 템플릿을 사용하기로 했습니다.

적용하기로 한 템플릿은 Tailwind CSS Blog입니다.

• Tailwind CSS Blog Demo
• Tailwind CSS Blog 정보 및 가이드

2023.09.27 업데이트

제가 템플릿을 받을 때에는 pages route 방식이었는데, 현재는 app route 방식으로 변경되었습니다. app route 방식일 경우 블로그 글 설명과 크게 차이가 있을 수 있다는 부분을 참고해주세요.

전제

• NodeJS 설치
• Git 설치.
• GitHub 계정 (또는 GitLab, Bitbucket)
• Vercel 계정

1. 저장소에서 템플릿 소스 가져오기

Tailwind CSS Blog 가이드(Quick Start Guide)에는 아래 3가지 설치 방법으로 안내됩니다.

1. Pliny project CLI를 사용
2. 현재 버전의 TypeScript와 Contentlayer
3. 현재 버전의 JS(official support) ✔

저는 버전 업데이트가 어떻게 이루어질지 몰라, 그냥 official support로 적혀있는 JS 버전을 설치하기로 했습니다.

명령어로 소스 가져오기

1. 사용할 디렉토리를 생성합니다. (예: D:\hlog.kr)
2. 생성한 디렉토리 경로의 명령 프롬프트에서 아래 명령어를 입력합니다.
   • degit은 git clone과 비슷한 기능을 합니다. (degit은 git clone과 다르게 저장소 정보(.git)는 가져오지 않습니다.)

npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git

3. 해당 디렉토리에 소스가 다운로드 된 것을 확인할 수 있습니다.

2. 본인의 GitHub 계정에 저장소 생성하기

• 이 저장소에 소스를 연결하고, 이 저장소는 Vercel과 연결됩니다.
• GitHub에 repository를 생성합니다.
  • 저는 개인적인 이유로 private으로 생성했습니다.
  • README.md 파일과, .gitignore 파일은 생성하지 않았습니다.
    (이미 생성된 소스에 저장소만 연결할 것이기 때문입니다.)

3. 소스와 GitHub repository 연결하기

• 소스가 있는 디렉토리(예: D:\hlog.kr)의 명령 프롬프트 또는 Git Bash에서 아래 명령어를 차례로 실행합니다.

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/{생성된저장소_주소.git}
git branch -M main
git push -u origin main

• 소스가 GitHub에 정상적으로 Push된 것을 확인할 수 있습니다.

해당 코드는 GitHub - hlog-nextjs-blog-for-git - create_project 브랜치에서 확인할 수 있습니다. (템플릿 코드가 app route 방식으로 변경되었기 때문에 혹시나 싶어 초기 코드도 남겨두었습니다.)

4. Local에서 동작 확인하기

소스가 있는 디렉토리(예: D:\hlog.kr)의 명령 프롬프트에서 실행합니다.

• 아래 명령어로 필요한 패키지들을 설치합니다.

npm install

• 아래 명령어로 Local 개발 서버를 실행합니다.

npm start

• Ready on http://localhost:3000가 출력되면 정상적으로 실행된 것입니다.
• 브라우저에서 http://localhost:3000 주소로 접속하여 확인합니다.

5. 블로그 정보 및 레이아웃 변경하기

• Local 개발 서버 실행후 코드를 변경하면 자동으로 변경된 내용이 반영됩니다. 변경을 확인하면서 작업하는 것도 좋습니다.
• Editor는 본인이 선호하는 것을 선택하시면 됩니다. 주로 Visual Studio Code를 사용합니다.저는 IntelliJ IDEA를 사용합니다.

1. siteMetadata.js (/data/siteMetadata.js)
2. next.config.js (/next.config.js)
3. authors/default.md (/data/authors/default.md)
4. projectsData.js (/data/projectsData.js)
5. headerNavLinks.js (/data/headerNavLinks.js)
6. 블로그 글 추가 (/data/blog/글제목.md(x))

• 더 자세한 내용은 Tailwind CSS Blog 정보 및 가이드의 Extend / Customize 부분을 참고하세요.

6. 기존 글 삭제 또는 draft

• /data/blog 폴더 내에 있는 글들의 삭제하거나 각 파일 내의 draft: false를 draft: true로 변경하면 됩니다.

7. 배포하기

• 저는 Vercel을 사용하여 배포합니다.
  • Vercel은 GitHub과 연동하여 소스가 GitHub에 Push되면 자동으로 배포를 해줍니다.
  • Vercel의 무료 Plan인 Hobby Plan을 사용했습니다.
  • Vercel은 https://vercel.com/에서 회원가입이 가능합니다.

1. Vercel에 GitHub 계정으로 가입/로그인합니다.
   (GitLab / Bitbucket으로도 가능합니다.)
2. Vercel Dashboard에서 New Project를 선택합니다.
3. Add GitHub Account를 선택 후, 본인의 GitHub 계정을 선택합니다.
4. 배포할 저장소를 선택합니다.
5. 배포할 저장소를 Import 합니다.

• Project Name: 본인이 원하는 이름으로 (예: hlog-kr)
• Framework Preset: Next.js
• Deploy 버튼을 클릭합니다.
  • 배포가 진행되는 것을 확인하실 수 있습니다.

8. 생성된 도메인으로 사이트 확인

• Dashboard에 표시된 vercel 도메인으로 접속하여 사이트를 확인하실 수 있습니다. Demo 페이지에서 본 것과 같은 모습을 확인하실 수 있습니다.

9. 변경 내용 commit & push

• commit & push 하면, vercel에서 자동으로 배포가 진행되는 것을 확인할 수 있습니다.
• 배포가 완료되면 정상적으로 배포가 된 것을 확인할 수 있습니다.

10. 블로그 글 작성 및 배포

11. 개인 도메인 연결 (선택)

저의 경우 도메인을 구입하여, 개인 도메인으로 연결을 하였습니다.

• Vercel Dashboard에서 Domains 버튼을 클릭합니다.
• 본인의 도메인을 입력하고 Add 버튼을 눌러줍니다.
• Invalid Configuration가 뜰겁니다. 이유는 본인의 도메인에 DNS 설정이 되어있지 않기 때문입니다.
• 저의 경우 hlog.kr를 추가하였습니다.
  (www.hlog.kr도 함께 추가할지 선택하는 부분이 있어 함께 추가하였습니다.)

12. 도메인 구매처에서 DNS 연결

도메인을 Vercel에 연결하려면 도메인 등록 기관의 웹사이트를 통해 DNS 설정을 구성해야 합니다. 제가 한 방법은 다음과 같습니다.

• hlog.kr - A 레코드: Vercel이 알려준 IP 주소
• www.hlog.kr - CNAME 레코드: Vercel이 알려준 DNS provide

• 도메인 등록업체에 따라 DNS 레코드를 구성하는 구체적인 단계는 다를 수 있습니다.
• DNS 레코드를 구성한 후, 이 변경 사항이 인터넷 전체에 전파되기까지 시간이 소요될 수 있습니다.

정리

이제 글도 추가하고, Layout이든, 필요한 컴포넌트를 조금씩 추가해나갈 생각입니다.

      

(위 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.)