[Blog] 노션 블로그, morethan-log
📚 시작하기 전에..
이전부터 블로그 이전에 대한 고민이 많았다.
노션 사용에 너무 익숙해진 나머지, 노션이 아니면 글쓰기가 너무 싫어지는 저주에 걸려버렸다..ㅎ 그래서 노션 블로그를 어떻게 하면 만들 수 있을지 꽤 오랫동안 찾아보았다.
근데 morethan-log라는 오픈소스가 있었다..!
노션에 글을 작성하면 블로그에 반영을 해준다고..? 이건 혁신이야ㅜㅜ 보자마자 바로 만들기로 결정!!!
📄 morethan-log를 활용하여 나만의 노션 블로그를 만들어보자!!
1. morethan-log를 자신의 리포지토리에 fork한다.
https://github.com/morethanmin/morethan-log
위 깃허브 리포를 내 리포에 포크한다.
2. Notion 블로그 템플릿을 복제한다.
3번에 있는 this Notion template을 눌러 들어가면
다음과 같이 노션 템플릿이 나오는데, 이를 자신의 노션에 복제한다.
3. Vercel로 fork한 리포를 배포한다.
먼저 복제한 노션 템플릿을 웹에 게시하면
https://0ju-428.notion.site/18c6cacce06?v=18c6caeb&pvs=4
이런 링크가 만들어지는데, v= 앞에 있는 문자열(위 예시에서는 18c6cacce06)을 복사한 다음,
vercel에 배포할 때, 환경변수에서 NOTION_PAGE_ID인 key에 해당하는 value에 넣어주면 된다.
그리고 배포하면 끝! 배포할 때 스샷 좀 찍어놓을걸..ㅠㅜㅠㅜㅠ 도메인을 바꿔주었다!!
4. 게시물 만들기
저기 있는 다양한 속성들은 뭐지..?
글을 쓰기 전 속성들에 대해 알아보려고 한다. 데이터베이스에 속성이 엄청 많아서 놀랬다..! 그래서 Demo blog의 게시물과 비교하여 하나하나 뜯어보았다.
첫번째에 있는 Welcome to morethan log!를 뜯어보자!!
| 속성 | 설명 |
|---|---|
| title | 게시물의 제목 |
| slug | 블로그 내부의 아티클 URL 주소 |
| status | Public: 공개 |
Private: 비공개 (보통 글을 작성 중일 때 사용) | |
PublicOnDetail: 블로그의 detail page에서만 보이게 함 | |
| type | Post: 블로그의 게시물을 작성할 때 |
Paper: 별도의 공간(페이지)을 사용할 때 | |
| category | 카테고리 |
| tags | 태그 |
| summary | 한 줄 요약 (like description) |
| author | 게시물 글을 쓴 사람 |
| thumbnail | 게시물의 대표 사진 |
| updatedAt | 생성일, 게시물에는 따로 표시되지 않는다. |
| date | 날짜 |
게시물은 복제한 노션 템플릿 데이터베이스에 페이지를 추가하여 글을 작성한 후, vercel에서 redeploy를 해주면 바로 블로그에 반영된다…!! 완전 혁신이야 진짜 ㅜㅜ
5. 내맘대로 커스텀하기!
morethan-log의 최고 장점은 무료 + 오픈소스이기 때문에 내 입맛대로 커스텀이 가능하다는 점이다!!!!!!!
1. 프로필
프로필은 site.config.js 파일에서 수정할 수 있다
github, instagram은 자신의 계정을 넣으면 되고
linkedin은 자신이 설정한 URL의 slug를 넣어주면 된다.
2. 댓글 기능
댓글 기능은 🔮 utterance를 통해 깃허브 계정을 가진 사람들이 댓글을 달 수 있도록 했다.
-
먼저 자신의 리포의 이슈를 열어줘야 한다. (이슈는 Setting → General → Features에서 Issues 항목에 ✅ 체크 표시를 누르면 된다!)
-
utterance에 들어가서 install을 해준다
-
site.config.js파일에 들어가서 utterances의 enable을 true로 바꿔준 다음, repo에 자신의 리포 주소를 넣어주면 된다.
📝 정리
우선 커스텀은 여기까지 하고 추후 구글 애널리틱스를 도입해볼 생각이다 ㅎㅅㅎ
블로그 유목민에게는 너무너무너무너무 만족스러운 블로그다ㅜㅜㅜ 완전 체고ㅜㅜ
이제 앞으로 블로그 쓸 맛이 날 것 같아 행복하다! 열심히 써야지 희희
🔗 참고
https://jhk0530.medium.com/notion-blog-with-morethanlog-3f4409e6f613