next your home banner

🏠 블로그

1. 콘텐츠에
2. UI/UX에
3. 성능에
4. 직관적인 레이아웃에
5. 유지보수성에
6. 커스텀에

집중한 블로그 템플릿 입니다

✒️

위 템플릿으로 제작된 Next Your Home Guide에 방문해보세요

🛠 무엇으로 만들어졌나요?

1. 언어 📜
   • typescript
2. 프레임워크 ⚙️
   • NextJs
3. 스타일 💅
   • styled-components
4. 마크업 📝
   • mdx
     • 📌 markdown 이상의 풍부한 기능 제공합니다
     • 📌 JSX와 javascript expressions을 사용해보세요
     • 🔎 공식 MDX 사이트에서 더 많은 기능을 볼 수 있습니다
   • mdx-bundler
     • 📦 순수 react component를 .mdx 포스팅 파일에서 불러올 수 있습니다
     • 🔎 설정 옵션을 mdx-bundler에서 알아보세요

😀 손쉬운 시작

• 📌 React입니다
• 📌 환경 설정, 필요 없습니다
• 📌 vercel과 함께라면 배포는 일도 아니죠(vercel + NextJs의 강력함 알아보기 🔎)
• 📦 CLI 포스트 생성기로 터미널에서 쉽게 글을 만들수 있습니다

🔥 성능

• 📌 Light house, 100점
• 📌 next-seo와 함께 SEO도 완벽합니다 (next-seo 알아보기 🔎)
• 📌 bundle size, 더욱 작게
  • 빌드 시 Preact로 React를 대체합니다 (3kb) (Preact가 무엇인가요? 🔎)
• 등등...

😲 직관적인 글 조직

• 📌 카테고리로 글의 큰 뿌리를 나눕니다
  • 더불어 각 카테고리에 대한 설명을 적을 수 있습니다
• 📌 카테고리 페이지는 pagination 됩니다
  • 태그로 페이지에 있는 글을 빠르게 탐색할 수 있습니다
  • 또한 blog.config.ts로 보여질 글의 갯수를 조정할 수 있습니다
• 📌 공통된 흐름을 가진 글은 시리즈로 묶을 수 있습니다

📔 사용자 중심의 읽기 경험 제공

• 📌 UI는 읽기에 직관적이죠
• 📌 post controller로 쉽게 글을 탐색할 수 있습니다
• 📌 더욱 적은 수직 스크롤로 글을 찾는 수고를 덜 수 있습니다
• 📌 창 크기에따라 자동으로 말줄임표가 적용되는 매직

🎨 색과 함께 나만의 감성 뽐내기

• 📌 각 카테고리와 글은 색을 정할 수 있습니다
• 📌 personal color로 블로그를 멋지게 꾸며봅시다
• 📌 페이지마다 색다르지만, 일관된 UI를 선사합니다

🍻 풍부한 기능

• 📌 Light/Dark모드, 이제는 필수죠
• 📌 mdx의 강력한 기능은 덤입니다
• 📌 글의 목차는 desktop/mobile 독자에게 큰 도움이 됩니다! (mobile 선택)
• 📌 next/image와 함께 이미지는 자동으로 최적화 됩니다(next/image 톱아보기 🔎)
• 📌 또한 static/external 이미지는 별 설정 없이 사이즈가 조절됩니다
• 📌 pagination, 기본이죠
• 📌 이전 글로 되돌아가면 스크롤 위치는 그대로!
• 📌 google analytics로 방문자 기록을 살펴봅시다! partytown🎉 스레드에서 실행하면서 성능도 잡았죠 (partytown 🔎)
• 📌 sitemap과 rss는 빌드시 생성됩니다
• 📌 katex와 함께 화끈한 수식도 보여줍시다 (선택)
• 📌 dev 모드에서 글을 수정하면 자동으로 새로고침합니다
• 📌 error는 최대한 상세하게! 무엇이 잘못되었는지 쉽게 알 수 있습니다
• 📌 코드 복사기능을 곁들인 예쁜 code 블럭은 개발자의 낭만아니였나요
• 등등...

1. Use this template 버튼을 클릭하여 1commit 으로 자신만의 블로그 repo를 만듭니다

   • 블로그 repo 를 나의 컴퓨터로 가져옵시다

2. 패키지 설치

   pnpm i
   bash

   • 이 블로그는 pnpm을 패키지 매니저로 사용합니다

   • 만약 pnpm이 설치되지 않았다면, pnpm 설치 가이드를 보세요

     npm install -g pnpm
     bash

3. 📜 blog.config.ts, 📜 public/robots.txt 를 업데이트 해봅시다

   1. blog.config.ts:
      • authorInfo
        • name
        • currentState
        • currentGoal
        • contacts
      • blogInfo
        • url: deploy url
        • siteName
        • subtitle
        • language
   2. public/robots.txt:
      • Sitemap을 배포 url로 바꿔주세요

4. 개발 테스트

   pnpm dev
   bash

   포트 3000이 기본으로 사용됩니다

5. 첫 글 작성해보기!

   pnpm post
   bash

6. 빌드 테스트

   pnpm build
   bash

   빌드 결과물은 .next에 저장됩니다

7. vercel 과 함께 세상으로 배포

   1. 계정만들기
   2. 블로그 repo를 선택합니다
   3. vercel배포 과정을 따라가거나, deploy 버튼을 통해 쉽게 시작할 수 있습니다

• blog.config.ts에 있는 다양한 설정을 확인해보세요!
• 커스터마이즈는 쉽습니다
  1. 🙌 react, 알고있죠?
  2. 🙌 styled-components, 알고있죠?
  3. 🙌 더욱 멋진 디자인으로 수정할 수 있습니다
• 프로젝트 폴더는 구조 설명에 관한 README.md를 포함하고 있습니다. 마음껏 바꿔봅시다!

const LICENSE = "MIT 🎉"
const KOR = "감사합니다 😎"
const ENG = "Thanks 😎"
ts

MIT