TailwindBlog : vercel 과 함께 나만의 블로그 blog 만들기 (마크다운 markdown)

 

 

 

TailwindBlog 

 

Next.js, Tailwind CSS 블로그 스타터 템플릿입니다. 아마도 가장 기능이 풍부한 Next.js 마크다운 블로그 템플릿일 것입니다. 최신 기술로 구성되어 있어 기술 글을 쉽게 작성할 수 있습니다. 쉽게 구성하고 사용자 정의할 수 있습니다. 이는 기존 Jekyll  그리고 Hugo 를 활용한 개인 블로그를 대체할 수 있습니다.
공식 사이트 (https://github.com/timlrx/tailwind-nextjs-starter-blog)

 

[hugo 블로그 구축 - 티스토리]

https://ialy1595.github.io/post/blog-construct-1/

블로그 구축기 1 (Hugo + github.io) | ialy's blog

 

템플릿 복제하기

 

해당 github 접속하여 "Use this template" 를 선택하면 나의 github 으로 foke 하게 되어 복제 됩니다.

 

Repository name 은 원하는 이름을 기재합니다. 여기서는 blog 로 기재하고 public 상태에서 저장하였습니다.

 

이제 복제된 나의 repository 에 TailwindBlog 소스를 가져온 사항입니다. 

 

설치 가이드에 Vercel 을 활용하면 쉽게 화면을 띄워 사용할 있을 수 있다 생각하여 Vercel 사이트에 가입하여 로긴하였습니다. 공식사이트 ( https://vercel.com/ )

 

 

Add New ... 를 선택하여, Project 를 지정하게 되면 나의 github 목록을 조회 가능합니다.

 

github 에서 만든 blog 라는 repository 이름을 검색합니다. 조회되면 import 버튼 선택합니다.

 

 

선택하게 되면 Vercel 사이트에서 이를 가져와서 배포를 해줍니다. (배포하는데 시간이 많이 걸림 🎵🎵🎵)

 

배포 되면, 아래 처럼 Congratuations! 라는 메시지와 함께 실행된 화면 썸네일을 보여줍니다.

랜덤으로 생성된 Vercel 의 서브 도메인 주소를 제공해 줍니다. 이를 선택하면 웹화면을 보실 수 있습니다.

 

 

Github 본문 내용 변경하기

 

github 의 blog 소스코드 수정을 위해 blog /data / blog / new-features-in-v1.mdx 를 조회합니다. 여기서 에디터 수정을 통해 문구 몇가지를 수정했습니다. 그리고 저장 버튼을 누르면 github 에 commit 이 됩니다.

 

 

commit 된 소스 내용은 바로, Vercel 에 자동 배포가 됩니다. 해당 Vercel 화면에 가면 Building.. 이라고 표기되면서 재빌드를 하는 것을 보실 수 있습니다. 해당 부분이 완료되면 production 에서 production (Cureent) 라고 변경되면서 최종 변경된 버전으로 blog내용을 보실 수 있습니다. (배포 시 이 또한 오래 걸림 ☕☕☕☕)

 

새로고침 하게 되면, 최종 배포된 내용 "한글로 표기된 부분"이 변경된 것을 보실 수 있습니다.

 

 

 

참고 사이트 

 

https://vercel.com/

Vercel: Develop. Preview. Ship. For the best frontend teams

 

 

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

GitHub - timlrx/tailwind-nextjs-starter-blog: This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box co