노션에 글을 작성하면 알아서 반영되는 블로그, morethan log

morethanmin·2022년 12월 29일
294
post-thumbnail

morethan-log

노션에 글을 적어두고 블로그에 옮겨적고 계신가요? 아니면 방치하고 계신가요? 그렇다면 오픈소스 블로그 템플릿인 morethan-log를 사용해보세요.

왜 만들었나요

개발 블로그를 운영해오면서 지금껏 정말 많은 블로그 플랫폼들을 이용해왔는데요. 정말 다양한 서비스부터 jekyll까지... 사용해보지 않은 서비스가 없는 것 같습니다. 아무래도 수많은 사람들을 위해 운영되어오는 서비스이다보니, 각자만의 컨셉과 기능이 있었고 제가 원하는 모든 기능을 지원하는 블로그 서비스를 찾는 일은 쉽지 않았습니다..

제가 원했던 기능을 크게 정리해보면 크게 아래와 같습니다.

노션에 적는 것처럼 쉽고 편해야한다.

개인 프로젝트 관리, 일정 관리, 개발 관련 내용 정리 등등 기록이 필요한 부분들은 모두 노션을 사용해왔던 저에게는 노션만큼 편한 에디터가 없었습니다.

다양한 블로그 플랫폼은 각자만의 에디터가 있었지만 노션만큼 편하진 않았고, 대부분의 개발 블로그는 마크다운 기반일 뿐만 아니라 작성한 글을 올리기 위해서는 commit 을 해야하는 귀찮음이 존재했습니다.

저는 귀찮은걸 좋아하지 않습니다....

자신을 소개할 수 있는 부분이 있어야 하고, 자신을 나타낼 수 있어야한다.

개인적으로 깃허브의 프로필을 소개하는 것이 그다지 편하지 않고, 되도록이면 형상관리를 위해서 사용하는 것을 지향하고 싶었고.. 이것 또한 커밋을해야해요.

개발 블로그가 이러한 점들 대체할 수 있고 나를 소개할 수 있는 페이지가 되길 원했습니다..

약간 개발자로서 나를 소개하는 서비스는 이걸로 종결한다는 느낌..?을 갖고 싶어요.

비용이 들지 않아야 한다.

저같은 주니어 개발자는 돈이 없습니다. 저는 3000원짜리 도메인 살돈은 아까워하면서... 30000원짜리 맛있는거 먹으러다니는 개발자입니다...

기타 등등

이것저것 써보면서 내가 원하는 기능을 넣어서 나만의 블로그를 만들고 싶었습니다.

그리구.. 토이프로젝트같은 것보다 사용자가 있는 오픈소스를 만드는게 더 재밌고 의미 있을 것이라고 생각했습니다..

무슨 기능이 있는가?

노션에 작성한 Post를 기반으로 글을 읽어와요.

아래처럼 노션의 Database를 긁어와서 빌드하는 시점에 static한 블로그로 만들어줍니다.


왼쪽이 블로그 페이지, 오른쪽이 실제 노션 페이지 입니다.

실제로 작성한 게시글도 아래처럼 똑같이 나와요!


왼쪽이 블로그 페이지, 오른쪽이 실제 노션 페이지 입니다.

oopy처럼 노션을 웹사이트처럼 활용도 가능해요

노션으로 이력서 작성하시는 분들 많이 계시죠? 아래 이미지 처럼 깔끔하게 렌더링해서 사용하세요. 아래 페이지도 노션으로 만들어진 페이지입니다...

썸네일 만들기 귀찮으시죠..? 썸네일도 알아서 만들어줘요

썸네일 만들기 귀찮으시죠..? 알아서 만들어줍니다. 게시글 제목을 기반으로 썸네일을 만들어줘요. 필요하면 썸네일을 직접 올릴 수도 있어요. 직접 올린 썸네일은 피드에 노출됩니다.


왼쪽이 블로그 페이지, 오른쪽이 실제 노션 페이지 입니다.

반응형... 그리고 다크모드...

이건 기능이라하기 뭐하지만... 반응형과 다크모드도 지원해요

그밖의... 잡다한 기능

태그 분류도 가능하구요. 작성자도 설정할 수 있어요. 소개 페이지도 작성할 수 있구요. 댓글도 작성 가능하고... SEO도 최적화 해두었고... 등등..

하고 싶은 말

저처럼 노션자주 쓰시는 분들이 관심있으시면 편하게 이용하셨으면 좋겠습니다.

첫 오픈소스 프로젝트이기도 하고... 시간날때 틈틈히 만드는 것이다보니 고칠 부분도 많고 개발되지 않은 부분도 많이 있는 것 같습니다..

관심있는 분들께서는 한번 사용해보시고 아무 피드백이나 부탁드리겠습니다.. Issue, PR 뭐든 주시면 감사히 받겠습니다..

구경하기

profile
프론트엔드 개발을 하고 있습니다.

42개의 댓글

comment-user-thumbnail
2022년 12월 30일

와 디자인 너무 깔끔하고 좋네요!! 혹시 코멘트가 달리면 알림 받는 기능도 있나요..? 벨로그 사용 중인데 댓글 알림 안 오는게 불편해서요ㅠㅠ

4개의 답글
comment-user-thumbnail
2022년 12월 31일

SEO 에 대한 이해가 낮아 관련 질문 하나 드립니다. SEO 점수를 어떻게 확인할 수 있을까요?

배경) 제공해주신 데모 페이지의 글들을 구글에서 검색해 찾아 들어가기가 어려워서, SEO 가 잘 되어있는지 어떻게 확인하셨는지 궁금합니다.

3개의 답글
comment-user-thumbnail
2023년 1월 1일

감사합니다!!

1개의 답글
comment-user-thumbnail
2023년 1월 3일

디자인 너무 이쁘고 진짜 편리하네요! 혹시 가능하시면 벨로그 시리즈 기능이나 다른 블로그처럼 게시글을 분류해서 볼 수 있는 기능을 추가해주실 수 있을까요?

1개의 답글
comment-user-thumbnail
2023년 1월 3일

아이디어가 굉장히 좋네요. 잘 보고 갑니다 👏

1개의 답글
comment-user-thumbnail
2023년 1월 4일

감사합니다. 꽤 실용적으로 사용될 것 같네요!!!

답글 달기
comment-user-thumbnail
2023년 1월 5일

이 글은 외부 필자인 허유림님의 기고입니다. 미술시장에 관한 글을 읽으면서 작품과 전시 경향, 가격 흐름을 살펴보다가 한 기사가 눈에 띄었습니다.

MyHTSpace Login

1개의 답글
comment-user-thumbnail
2023년 1월 6일

Khuyến Mại Lắp Mạng FPT Hà Nội
Xem chi tiết tại => https://fpthanoi247.com

답글 달기
comment-user-thumbnail
2023년 1월 6일

안녕하세요 ^^
사용해보고 싶은데 vercel 배포를 처음하다보니 막히는 부분이 있습니다.

** vercel 회원가입 후 github 연동을 했는데 Creat New Project를 누를경우 github에 있는 리포지토리만 확인됩니다.

Github 사용방법에 써주신 (4)번입니다. 이부분은 어떻게 해결해야 할까요?
Deploy on Vercel, set following environment variables
NOTION_PAGE_ID (Required): The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address. (ex. quasar-season-ed5.notion.site/[NOTION_PAGE_ID]?v=[VERSION_ID])

2개의 답글
comment-user-thumbnail
2023년 1월 6일

혹시 codepen 삽입 같은 기능들도 별도로 처리해두신 게 있나요?

답글 달기
comment-user-thumbnail
2023년 1월 7일

감사합니다!! 블로그 쓰는게 매 번 고민이었는데 정말 유용하게 쓸 것 같아요 ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 1월 7일

vercel 에서 NOTION_PAGE_ID 입력하고 Deploy 하면 다음과 같은 에러가 발생합니다..

Build error occurred
Error: Notion page not found "4b97d2a314c4483ab71ec15f9afe1fcd"
at NotionAPI. (/vercel/path0/node_modules/notion-client/build/cjs/notion-api.js:81:35)
at step (/vercel/path0/node_modules/notion-client/build/cjs/notion-api.js:44:23)
at Object.next (/vercel/path0/node_modules/notion-client/build/cjs/notion-api.js:25:53)
at fulfilled (/vercel/path0/node_modules/notion-client/build/cjs/notion-api.js:16:58)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}

노션 페이지를 못찾는다고 하는데 분명히 노션에서 나오는 페이지를 입력했는데도 계속 에러가 발생합니다..

같은 상황 해결하신분 댓글 부탁드립니다.

1개의 답글
comment-user-thumbnail
2023년 1월 26일

감사합니다. 잘 사용하겠습니다.~

답글 달기
comment-user-thumbnail
2023년 1월 28일

디자인이 마음에 들어서 써봤는데 기능도 진짜 실용적이네요 ㅠㅠ 감사합니다!

1개의 답글
comment-user-thumbnail
2023년 3월 31일

와.. 정말 너무 감사합니다 ㅠㅠ.. 노션 메인으로 쓰고 있는데 그걸 다시 블로그에 옮기는 과정이 너무 힘들었었거든요 시간도 아깝고..
이건 혁명이에요 너무 감사합니다🥹🥹🥹

1개의 답글
comment-user-thumbnail
2023년 4월 6일

안녕하세요! 덕분에 슬기로운 노션생활 중입니다!

제가 추가로 구글 서치 콘솔을 등록하려하는데... 정확하게 어떻게 설정해야 할지 모르겠네요.. 방법좀 알려주시면 감사하겠습니다!

답글 달기

안녕하세요, 며칠째 엄청 잘 사용중입니다. 혹시 노션에서 동기화되는건 얼마나 걸리나요 보통? 몇번씩은 한두시간 걸리고 언제는 바로바로 되고,,, 궁금합니다.

답글 달기
comment-user-thumbnail
2023년 7월 12일

vercel 에 environment variables 채우는 방법입니다
name 에 NOTION_PAGE_ID 를 타이핑으로 입력, value엔 노션 공유 웹 링크 안의 https://~~.site/[ ]?v=~~~ . 에서 [ ] 사이 부분을 입력!
끝!

답글 달기
comment-user-thumbnail
2023년 7월 14일

vercel 로 페이지 완성 후 congratulations! 까지 떴는데요. 노션의 포스트들이 블로그에 안떠요 ㅠㅠ 왜이러죠... 노션에 표로 글 작성해놨는데...

답글 달기
comment-user-thumbnail
2023년 8월 28일

오우, 노션이 편리해서 노션만 사용했는데 이런 편리한 기능을 오픈소스로 배포해주셔서 블로그로 이사하기 쉬울 것 같네요 감사합니다 :)
그런데 utterance같은 플러그인들을 어떻게 활성화 할 수 있나요? vercel로 배포 이후에 환경설정에 site.config.js에 있는 ID를 추가를 했는데 value는 어디서 찾을 수 있나요?

답글 달기
comment-user-thumbnail
2023년 10월 11일

입문인데 2시간 따라하다 겨우 됐네요!
너무 감사히 잘쓰겠습니다!!!!

답글 달기
comment-user-thumbnail
2024년 1월 4일

안녕하세요.
이거 노션에 글 작성하면 자동 배포되는건 아니고 VERCEL들어가서 재빌드 해줘야 하는거죠?

답글 달기
comment-user-thumbnail
2024년 1월 9일

와신기하다

답글 달기
comment-user-thumbnail
2024년 2월 24일

오!! 너무 좋은데요?? 저도 이런게 있으면 좋겠다 생각하고 NotionAPI로 블로그를 만들고 있었는데 공수가 생각보다 많이 들어 미뤄지게 되더라구요ㅜㅜ 만들어주셔서 감사합니다 star ,fork 해가겠습니다~!!

답글 달기