Morethanlog로 힙하게 노션 블로그 만들기
이 블로그는 무료로 해줍니다.😎
If you’re not familiar with the korean, I recommend reading the guide I wrote in the repo readme : 10 Steps to build your own morethan-log
23.12 추가
(개발자의) 글쓰기
매해 개발자 / 혹은 취준생들에게 많은 사랑을 받는 것 중 하나는 TIL, 오독완, 아티클 / 공식문서 번역하기등의 콘텐츠를 담는 블로그를 운영하는 것이다.
블로그를 운영할 때의 장점과 단점은 많은 곳에서 다뤘으니 생략하기로 하고, 새해를 맞아 나도 블로그를 시작해야겠다 ! 라는 마음을 가질때 제일 먼저 겪는 고민은 아마 이럴 것이다.
어디에서 시작하지?
여러 개발블로그를 종종 볼때 체감상 자주 쓰이는 플랫폼은 아래 4개이고, 크게는 자유로운 어려움과 제한된 편리함과 사이에서 자신이 선호하는 것을 선택하면 된다. (수익화나 디자인 등은 취향으로…)
나는 글 쓰는 것도 빡센데, 블로그 꾸미는 것과 같은 디테일까지 신경쓰기에는 시간 쓰기가 그래서 미디엄을 골랐을 뿐, 각자 좋은 플랫폼이라고 생각함.
위 그림에서 맨 왼쪽에 노션을 둔 이유는 꼭 개발 직군이 아니어도 많은 사람들이 노션을 활용하고 있기 때문인데 내가 생각하는 가장 큰 단점은, 이를 배포하는 메이저 서비스인 OOPY가 비용이 든다는 것.
그런데 최근 노션에 작성하고 github과 vercel을 통해서 배포하는 morethan-log라는 신기한 서비스를 발견해서 활용법을 공유한다.
준비
계정 생성등을 포함해 미리 준비해야할 것들이 있다. 해봤는데 어렵진 않고 전부 개인용 무료 계정이어도 상관없다. (단, 순서는 이대로 하는게 좋음)
- Notion 계정
- Github 계정
- Vercel 계정
아마 Notion과 Github은 있을 테니, vercel만 계정 생성에 대해 짧게 설명하겠다.
vercel을 써볼 일이 없어서 뭐하는 곳인지는 잘 몰랐지만 aws 나 github page같은 클라우드 제공하는 서비스고, next.js, JSX를 개발했다 정도만 알면 되지 않을까.
아무튼 위 vercel 주소에 들어가서. 오른쪽 위 Sign Up을 누르면 오른쪽 화면이 나타난다. continue with github를 누르면 (이메일도 되긴 하는데 우리는 notion을 github을 거쳐서 배포할 것이기 때문에 그냥 github으로 하자) 보통의 회원가입을 거쳐 이렇게 Dashboard 페이지에 접근 할 수 있다.
이 이미지는 테스트로 돌려서 배포한 결과물이고, 블로그에는 이걸 오른쪽 처럼 날린다음 처음부터 다시 배포하는 과정을 공유해보겠음
1. Github 설정.
계정 설정을 하고 난 다음 해야하는 것은 morethan-log의 repo를 포크 하는 것이다. (포크도 다시했다…)
2. Notion 블로그 템플릿 복제
github readme에도 있긴 한데, 미리 만들어진 노션 블로그 템플릿을 복제한다.
마찬가지로 오른쪽 위의 복제를 이용해서 개인의 노션 계정으로 옮기면 된다.
요걸 커스텀할 수도 있을 것 같긴 한데, 아직 나도 이걸 뜯어보진 않았기에 잘 모르겠음. 아무튼 3번째 Handling ~을 기준으로 예시를 보면 이러하다.
- Title / Date / Summary / Tags / Thumbnail
- Author / slug (블로그 내부의 아티클 주소)
- Status: 아래 처럼 4개의 옵션이 있는데,
Draft이면 블로그에 글이 보이지 않고,Published면 보인다 정도만 알아도 충분하다.
- Type: 위 템플릿에서 7번째 있으며, 아티클 (post를 사용)과 별도의 공간을 활용한다. 예시 주소 (morethan-log.vercel.app/
resume)의 이미지는 아래와 같다. (post/page/about이 있음)
- UpdatedAt: 블로그에는 반영되지 않음
3. 노션 배포
원래는 블로그 컨텐츠 수정을 하고 Hello World 를 만드는 것도 나쁘지 않지만, 배포가 처음하면 낯설기에 있는 템플릿을 그대로 활용하여 올리는 걸 해보겠다.
개인페이지의 복사한 템플릿을 오른쪽 위 공유 를 통해 웹에서 공유 설정을 해주면 요렇게 jhk0530.notion.site/ 와 같은 형태의 링크가 나오는데 ?v=를 기준으로 앞에 있는 값을 배포에 활용해야 한다.
4. Vercel에 올리기
이제 아까 만들어둔 vercel로 가서 Add new…, Project를 누르자. (배포는 처음 한번만 해두면 그 다음에는 딱히 설정 안해도 되는 것 같다)
이후 vercel에서 편하게 연동해 둔 github 계정의 repository를 바로 불러 올 수 있다.
배포 과정에서 설정해야 하는게 몇개 있는데 다 신경 쓸 필요없이 Environment Variables를 확인하자. 그리고 여기에 NOTION_PAGE_ID를 name으로 하는 값을 적고 Add를 통해 추가한다. (아까 위에서 807 어쩌구)
그 다음 Deploy를 누르면 끝.
내 기준 1분 정도가 지나면 요렇게 대시보드에 배포 결과를 확인 할 수 있다.
아직 주소가 morethan-log-kecglxipe-jhk0530.vercel.app이라는 다소 “이상한” 도메인을 활용하기 때문에 이를 수정하자.
오른쪽 위 설정에서 View Domains를 들어가서 Edit을 눌러 원하는 도메인으로 바꿔주면 된다. (단, 무료 요금제의 경우 ~.vercel.app으로 정해야 함)
나는 morethan-jhk0530.vercel.app으로 했고 (사실 컨벤션은 모름 ㅎㅎ) 링크를 통해 배포된 결과를 확인할 수 있다.
5. 아티클 작성하기
이제 마지막으로 아티클을 작성하는 방법을 소개 하겠다. (삭제는 status를 draft로 변경하면 1분 안에 블로그에 바로 반영되며, 개인적으로 권장하는 status 활용 방법은 아래 이미지 참조)
- (개인) 노션 페이지에서 테이블 하단의
새로 만들기 - title, slug 등 주요 정보 설정. 주의할점으로 slug는 URL이기 때문에 띄어쓰기가 있으면 안되고
-를 활용해야한다. - ⚠️
author는 notion에서people속성을 활용하게 했기 때문에 노션의 계정명으로만 선택이 가능해서 text 로 수정했는데 이렇게 하면 모든 아티클에 대해서 author가빈 이름으로 나오기 때문에, 아쉬운 대로 그냥people을 그대로 활용하거나 없애야 할 듯하다.
- 아무튼 내가 새롭게 추가한 아티클의 속성 예시들을 아래에 작성했다.
- 내용으로는
애옹애옹만 썼다. (이유 후술)
title: Morethan log로 블로그 만들기
slug: how-to-morethan-log
date: 2023년 1월 22일
summary: notion과 github, vercel을 활용하여 힙하게 morethanlog 만들어 보는 글
tags: Notion, MorethanLog, How to
status: Published
author: (비움)
type: Post
thumnail: favicon.ico (파일)
updatedAt: (자동)
아티클 작성시 주의사항
아티클의 내부 내용은 노션의 주요 기능들을 하나씩 시도해봤는데, 아직 morethanlog에서 지원하지 않는 기능이 있고 그걸 넣으면 status에 관계 없이 블로그가 터진다. (아래 그림처럼 다른 아티클까지)
다만 아직 어떤게 되고 어떤게 안되는지 매번 실험하기엔… 터지고 나서 롤백 / 재배포하는 것이 너무 번거로워 지금은 생략하고 그냥 github에 이슈를 올리는 걸로 마무리 하겠음.
TMI)
- 나중에 기본 템플릿에서 블로그 조금씩 커스텀 하는 것도 기회되면 작성해보겠음
- morethanlog를 만든 분이 왜 이걸 만들었는지 에 대해 쓴 글
- morethanlog Repo
체감 장점:
- 노션과의 연동
- 블로그와 이력서를 한번에 만들 수 있음
- 깔쌈한 디자인
- (귀찮아서 소개는 안했지만) github에서 커스텀 가능
- 무료
체감 단점:
- 아직 100% 연동 되지 않는 노션의 기능 (터짐)
- 배포 / 관리 운영 가이드가 없어서 경험 없으면 어려울 수 있음.
- 아직 개발중인 프로덕트
근데 진짜 깔끔하고 괜찮은 듯 ㅋㅋ 아직 블로그 안하고 있는 사람이라면 해볼만 한 것 같다. 정말로 👍
요즘 streamlit, notion, morethanlog 처럼 “깔끔하고 모던한 디자인”에 관심을 가져서 minimalism, mordernism, post-modernism 과 같은 주제들을 조금씩 찾아서 공부중인데 미술/철학사까지 넘어가는 것 같아서 조금은 걱정이긴하다. (내 첫 전자책은 minimal shiny, 강의는 minimal R)
