10분 안에 Notion 및 Tailwind를 사용하여 무료 Nextjs 블로그 설정

Github repository - 코드베이스가 있는 Github 리포지토리
Default demo blog - 메인 브랜치에서 배포됨
My personal site - 내 웹 사이트를 강화하는 데 사용하는 소스 코드

블로그 스타터의 기능:

✨ 특징

✅ 설치는 몇 분 밖에 걸리지 않습니다. ( single file config ) 💪

✅ Convertkit API을 통한 뉴스레터 구독

✅ Umami을 사용한 간단한 분석

✅ Tailwind template이 있는 자동 OG 소셜 이미지

✅ 자동 예쁜 URL

✅ 뛰어난 페이지 속도

✅ Next.js 및 Vercel에 최적화됨

시작하기

저는 이와 같은 새 블로그를 작성할 때마다 초안 작성을 위해 노션을 사용하고 있습니다. 개념의 태그를 게시로 전환하고 블로그에 게시할 수 있다면 멋지지 않을까요?

이것은 Notion, Nextjs 및 Tailwind로 구동되는 자신만의 블로그를 만드는 방법에 대한 자습서입니다.

노션 설정

첫 번째 단계는 API 키를 만드는 것입니다. Notions Getting Started Guide을 따라가면 env 파일에 NOTION_SECRET로 필요한 새 API 키를 생성할 수 있습니다.



새 블로그 기사를 게시하기 위해 이미 read template 을 만들었으므로 간단히 복제하고 기사 작성을 시작할 수 있습니다.



블로그 템플릿을 복제한 후에는 URL에서 가져올 수 있는 DATABASE_ID가 필요합니다. xxx.notion.site/ 이후의 이드입니다.

코드베이스 포크

Click here 코드 기반을 포크하고 저장소를 가져옵니다.

npm install && npm run

블로그를 처음 실행하면 .env 파일을 업데이트하지 않았기 때문에 API 키가 누락되었다는 오류가 발생합니다.



블로그를 작동시키기 위해 마지막으로 해야 할 일은 .env.example를 env로 이름을 바꾸고 변수를 업데이트하는 것입니다.

# Notion secret integration
NOTION_SECRET=
# Database id from cloned template
BLOG_DATABASE_ID=

# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami analytics (Optional)
UMAMI_ID=

모든 작업을 제대로 수행했다면 작동 중인 블로그를 볼 수 있어야 합니다 🎉

# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami analytics (Optional)
UMAMI_ID=
If we did everything right, we should be able to see the working blog 🎉

쓰여진 내용의 시각적 묘사

읽어 주셔서 감사합니다

이 발전기 시리즈에 대해 어떻게 생각하는지 의견 섹션에서 알려주십시오. 당신이 그것을 사랑한다면, 당신은 무엇을 해야할지 압니다! 친구 및 동료와 공유하십시오.

🌟 별표Github와 피드백을 부탁드립니다! 👍

다음 게시물에서 몇 가지 주제를 다루기를 원하시면 트위터에 DM을 보내거나 제안 사항이 있으면 아래에 의견을 남겨주세요.

다음에 또 뵙고 계속 해킹하세요✌