노션 블로그 | [Live] 노션으로 나만의 홈페이지 만들기 With Oopy 183 개의 정답

by

당신은 주제를 찾고 있습니까 “노션 블로그 – [Live] 노션으로 나만의 홈페이지 만들기 with OOPY“? 다음 카테고리의 웹사이트 https://you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 시리얼 Sireal 이(가) 작성한 기사에는 조회수 10,746회 및 좋아요 144개 개의 좋아요가 있습니다.

노션 블로그 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

d여기에서 [Live] 노션으로 나만의 홈페이지 만들기 with OOPY – 노션 블로그 주제에 대한 세부정보를 참조하세요

노션과 OOPY를 이용해 웹페이지나 홈페이지 비스무리한 것들을 만드는 방법을 알려드릴 예정입니다.
강의에 사용된 노션 템플릿 모음 : https://bit.ly/31nruFV
—
원활한 정보 전달을 위한 네이버 카페를 개설했습니다! 많은 참여 부탁드립니다!
https://cafe.naver.com/notionkr
—
노션 강의/컨설팅/제작 문의 : https://sireal.co
노션 전문 블로그 : https://sijinii.com
노션 사례 및 템플릿 : https://sireal.co/wiki
노션 컨설턴트가 집필한 노션 가이드북(한글 개정판)
구매하기 : https://coupa.ng/bP36QS
✔ 혹시나 이 팁이 도움이 되셨다면
👍 많은 Notioner에게 알려질 수 있도록
🙏 좋아요, 공유하기, 댓글을 부탁드립니다.
대한민국 최대 Notion Community
Notion.so 노션 한국 사용자 모임
https://www.facebook.com/groups/notion

노션 블로그 주제에 대한 자세한 내용은 여기를 참조하세요.

노션으로 5분 안에 블로그 만들기! – 우피

노션과 oopy 를 이용해서 아주 간단하게 나만의 블로그를 만드는 과정에 대한 안내입니다.

+ 자세한 내용은 여기를 클릭하십시오

Source: www.oopy.io

Date Published: 3/18/2021

View: 1180

노션으로 미니멀리즘 블로그 세팅하기 How to set up Notion as …

이 튜토리얼은 단지 커스텀 도메인을 세팅하는 방법과 댓글 기능을 추가하는 방법으로 블로그 스러움을 더해주는 것 뿐입니다. 노션이 가진 가능성으로 네이버, 티스토리, …

+ 더 읽기

Source: sungchulblog.com

Date Published: 9/10/2021

View: 2276

[Tip] 요즘 대세 노션으로 나만의 블로그/포트폴리오 만들기 2

노션에 대한 관심이 높아져서, 코알못/찐문과생이 전하는 두 번째 TIP을 준비해 보았습니다. ​. 바로,. 나만의 블로그/포트폴리오를 만들었으나.

+ 여기에 더 보기

Source: blog.naver.com

Date Published: 5/5/2022

View: 5201

노션으로 개인 홈페이지 만들기 – 브런치

3시간 만에 뚝딱뚝딱 홈페이지 짓기 | 노션 홈페이지를 드디어 만들었다! 노션을 이용해서 깔끔한 홈페이지나 블로그를 운영하는 레퍼런스를 보면서, …

+ 여기에 보기

Source: brunch.co.kr

Date Published: 7/14/2021

View: 7572

notion-py로 노션(Notion)을 내 블로그의 CMS로 사용하기

미니멀하고 깔끔한 디자인에, 글 작성 경험이 좋은 노션을 나도 블로그로 사용해볼까 고민하기 시작했다. 노션 블로그의 단점. 멋진 노션 블로그에 빠져 …

+ 여기에 보기

Source: younho9.dev

Date Published: 9/19/2021

View: 6896

Notion blog에서 Github blog로 옮기는 이유 | cv-learn

… 호스팅 서비스를 통해 javascript 워커 할당을해서 노션 렌더링을 하였습니다. 이 도메인 아래에서 cv-learn 블로그를 운영하게 되었습니다.

+ 여기에 더 보기

Source: www.cv-learn.com

Date Published: 6/14/2021

View: 8619

노션, 블로그, 컨텐츠, 수익화 – johnwook.com

노션, 블로그, 컨텐츠, 수익화. 모든 것의 시작. 돌아보니 모든 시작은 Notion + Next.js 로 블로그 만들기 였다. 사람은 자신을 정당화하고 기억을 미화하는, …

+ 여기에 보기

Source: www.johnwook.com

Date Published: 1/29/2021

View: 782

Notion.so 노션 공식 한국 사용자 모임 – Facebook

노션으로 미니멀리즘 블로그 세팅하기 튜토리얼 입니다. * cloudflare * disqus 를 이용해서 커스텀 도메인으로 접속, 및 댓글 기능 추가하는 방법입니다.

+ 여기를 클릭

Source: ko-kr.facebook.com

Date Published: 6/17/2021

View: 2890

주제와 관련된 이미지 노션 블로그

주제와 관련된 더 많은 사진을 참조하십시오 [Live] 노션으로 나만의 홈페이지 만들기 with OOPY. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

[Live] 노션으로 나만의 홈페이지 만들기 with OOPY
[Live] 노션으로 나만의 홈페이지 만들기 with OOPY

주제에 대한 기사 평가 노션 블로그

  • Author: 시리얼 Sireal
  • Views: 조회수 10,746회
  • Likes: 좋아요 144개
  • Date Published: 2021. 3. 26.
  • Video Url link: https://www.youtube.com/watch?v=XUlnXyV2wZ4

노션으로 미니멀리즘 블로그 세팅하기 How to set up Notion as Blog Tutorial

const MY_DOMAIN = “도메인주소” const START_PAGE = “노션주소” const DISQUS_SHORTNAME = “디스커스숏네임” addEventListener ( ‘fetch’ , event => { event . respondWith ( fetchAndApply ( event . request ) ) } ) const corsHeaders = { “Access-Control-Allow-Origin” : “*” , “Access-Control-Allow-Methods” : “GET, HEAD, POST,PUT, OPTIONS” , “Access-Control-Allow-Headers” : “Content-Type” , } function handleOptions ( request ) { if ( request . headers . get ( “Origin” ) !== null && request . headers . get ( “Access-Control-Request-Method” ) !== null && request . headers . get ( “Access-Control-Request-Headers” ) !== null ) { return new Response ( null , { headers : corsHeaders } ) } else { return new Response ( null , { headers : { “Allow” : “GET, HEAD, POST, PUT, OPTIONS” , } } ) } } async function fetchAndApply ( request ) { if ( request . method === “OPTIONS” ) { return handleOptions ( request ) } let url = new URL ( request . url ) let response if ( url . pathname . startsWith ( “/app” ) && url . pathname . endsWith ( “js” ) ) { response = await fetch ( ` https://www.notion.so ${ url . pathname } ` ) let body = await response . text ( ) try { response = new Response ( body . replace ( / www.notion.so / g , MY_DOMAIN ) . replace ( / notion.so / g , MY_DOMAIN ) , response ) response . headers . set ( ‘Content-Type’ , “application/x-javascript” ) console . log ( “get rewrite app.js” ) } catch ( err ) { console . log ( err ) } } else if ( ( url . pathname . startsWith ( “/api” ) ) ) { response = await fetch ( ` https://www.notion.so ${ url . pathname } ` , { body : request . body , headers : { ‘content-type’ : ‘application/json;charset=UTF-8’ , ‘user-agent’ : ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36’ } , method : “POST” , } ) response = new Response ( response . body , response ) response . headers . set ( ‘Access-Control-Allow-Origin’ , “*” ) } else if ( url . pathname === ` / ` ) { let pageUrlList = START_PAGE . split ( “/” ) let redrictUrl = ` https:// ${ MY_DOMAIN } / ${ pageUrlList [ pageUrlList . length – 1 ] } ` return Response . redirect ( redrictUrl , 301 ) } else { response = await fetch ( ` https://www.notion.so ${ url . pathname } ` , { body : request . body , headers : request . headers , method : request . method , } ) response = new Response ( response . body , response ) if ( DISQUS_SHORTNAME ) { response . headers . delete ( “Content-Security-Policy” ) return new HTMLRewriter ( ) . on ( ‘body’ , new ElementHandler ( ) ) . transform ( response ) } } return response } class ElementHandler { element ( element ) { element . append ( `

노션 홈페이지를 드디어 만들었다! 노션을 이용해서 깔끔한 홈페이지나 블로그를 운영하는 레퍼런스를 보면서, 나도 나의 것을 만들고 싶다는 생각이 계속 있던 중에.. 홈페이지가 필요한 일이 생겼고, 뉴먼 슬랙에서 ‘초단기 1차 포폴 만드실 분’이라는 K님의 번개가 열려서 후딱 탑승했다. 토요일부터 zoom으로 만나서 아이디어 회의를 시작했지만, 나는 영 진도가 지지부진했는데 오늘 새벽 K님이 보내주신 한 레퍼런스를 보고 영감을 얻어서 일요일 아침에 후닥닥 3시간 만에 완성했다. 그동안 레퍼들을 많이 봐와서 그런지, 방향을 잡으니 생각보다 빠르게 완성할 수 있었다.

진도가 지지부진했던 이유는 무얼 만들고 싶은 건지 결정을 못해서였다. 함께한 K님은 잡 오퍼가 온 곳에 당장 제출하셔야 하는 포트폴리오가 있어서 그동안의 작업물과 커리어 방향에 맞춘 결과물이라는 목표가 명확했는데, 나는 딱히 목표가 없었다. 그동안 내가 해온 걸 보여주고 싶은 건지, 사이드 프로젝트를 소개하고 싶은 건지 갈팡질팡했다. 네이버 블로그, 브런치 등으로 흩어져있는 기록들의 허브를 만들고 싶다는 생각 정도로 정리는 되었는데 이걸 어떻게 담아내야 하나 걱정이었다. 아 그냥 안 떠오르면.. 나중으로 미뤄야지.. 하고 있다가 오늘 아침에 일어나서 K님이 새벽에 보내주신 레퍼런스를 봤는데, 오! 이런 식으로 링크를 걸어서 처리하면 깔끔하게 표현할 수 있겠는데? 싶었다.

결정적인 영감을 준 Lennon Cheng의 노션 홈페이지

머릿속에 그림이 그려진 후 바로 자리에 앉았다. 우선 구글 드라이브를 열어서 프로필로 쓸만한 사진부터 찾아봤다. 작년에 광주 나인블럭에서 찍은 사진이 상큼하니(?) 내 이미지와 잘 어울리는(?) 것 같아서 골라 넣었다. 사진이 세로로 길쭉한 편이라 사진을 넣고 그 옆에 컨택 포인트와 SNS 링크를 적었다. 그 아래에는 대부분의 시간을 쓰는 본업을 Main Job으로 타이틀을 만들어서 적었다. 작년에 회사 블로그에 소개된 센터 소개글도 링크를 달아뒀다. (범인 잡는 형사 st로 찍힌 사진도 있다^^) 그 아래에는 친한 회사 동료분이 나에게 해주셨던 말을 소개말로 적어봤다. ‘민석 님 완전 전방위 풀 스택 기획자 아니에요~?’ UX부터, 백엔드 API까지 챙기는 상황을 보면서 해주셨던 말이었다. 아직 많이 부족하지만, 되고 싶다는 바람을 담아 적어봤다^^ 그리고 요즘 꽂힌 ‘일이 되게 하는 사람’이라는 말도 함께 적어보고. 그 밑에는 백쿼트로 내가 하는 일의 키워드를 함께 적었다.

메인 잡을 적은 후에는, 사이드 프로젝트를 적었다. 처음에는 노션 / 디지털 정리 / 돈 관리법 정도로 나누어서 적어볼까 했는데, K님이랑 이야기하다 보니 결국 노션과 디지털 정리가 비슷한 맥락으로 이어지는 것 같아서 ‘디지털 기록’ 하나로 묶었다. 그동안 했던 노션 워크숍 소개 링크, 브런치 링크를 연결했고 지난 1월에 베타를 진행하고 천천히 디벨롭 진행 중인 디지털 정리 1:1 컨설팅 <나 조각모음>은 개요와 커리큘럼 소개와 함께 메일 구독 링크를 넣어뒀다. 구독 링크 여기도!

외부 링크와 노션 페이지 링크를 이용해서 사이드 프로젝트 소개하기

여기까지가 약간 포트폴리오?(까지는 아니지만) 성격이 있었다면, 아래에는 블로그 허브를 만들고자 한 목표를 이루기 위해 최근에 내가 이곳저곳에 써둔 포스트를 갤러리 뷰로 모아두는 latest posts(최근 포스트)를 추가했다. 브런치, 네이버 블로그에 쓰고 있는 글 중에 보여주고 싶은 것을 기준으로 3개만 선정해서 넣어뒀다. 그 밑에는 요즘 보고/듣고/읽고 있는 것들을 넣는 now reading & playing 리스트 뷰를 추가했다. 아직 어떻게 발전할지는 모르겠고, 일단은 각 항목에 대한 링크만 넣어둔 상태. 나중에는 간단한 리뷰를 적거나, 별점을 매기거나(?) 하는 형태로 발전할 수도 있지 않을까!

이렇게 내용을 다 채우고 나서 oopy를 연결했다. oopy는 노션 페이지를 홈페이지로 만들어주는 서비스인데, 최근에 깔끔한 레퍼런스를 많이 보아서 홈페이지를 만들면 쓰려고 점찍어둔 서비스였다. 연결은 아주 쉬웠다. 도메인을 설정하고, 만들어둔 노션 링크를 입력하면 끝! 가지고 있는 도메인이 있다면 그 도메인을 연결하면 되지만, 전에 도메인 샀다가 귀찮은 일을 겪었던 것이 떠올라 나중에 시간이 나면 하려고 일단은 oopy에서 기본 제공하는 도메인으로 설정했다.

파비콘은 중요하다

그냥 노션 도메인으로 써도 되지만 oopy를 굳이 돈 내고 연결한 가장 큰 이유는, 파비콘과 클린 url 때문이었다. 파비콘은 위 이미지처럼, 웹 브라우저 주소창에 표시되는 아이콘이다. 노션 페이지로 그냥 링크를 쓰면 노션 아이콘이 뜨게 되고 홈페이지로서의 매력도가 확 떨어진다고 봤다. 다른 사람들도 모두 같은 노션 아이콘이 뜰 테니까.. 물론 oopy를 안 쓰고도 어찌어찌해서 노션 홈페이지에 파비콘 연결하는 방법도 있겠지만 알아보기 귀찮았다….ㅎㅎㅎ 이럴 땐 돈을 내고 서비스를 이용하는 것도 필요하다고 생각했다.

두 번째는 클린 url인데, 내가 만든 홈페이지에는 메인 페이지에 연결된 하위 페이지가 여럿 있었다. 사이드 프로젝트에 적은 내용 중에, 디지털 정리 1:1 컨설팅 <나 조각 모음>, <나의 돈 흐름 관리법>, <월급날엔 월말 정산>은 하위 페이지를 만들어서 링크를 거는 형태로 만들어 두었다. 이렇게 만드는 게 깔끔해서 보기는 좋은데, url이 지저분해지는 게 마음에 아주 마음에 안 들었다. oopy의 클린 url 기능을 이용하면 매우 쉽고 간단하게 각 하위 페이지 별 url을 지정할 수 있었다.

클린 url 지정으로 노션 홈페이지 같은 느낌 주기 +10

이 외에도, 폰트를 바꾸거나 스크롤 프로그레스(문서 읽기 진행률을 알려주는 상태 바) 등을 추가할 수 있다는 점도 좋았다. 방문자 수를 트래킹 하기 위해 Hits를 페이지 하단에 추가했는데 자꾸 위치가 제 맘대로 움직여서 당황하던 차에, oopy 콘솔에서 간단하게 모든 페이지에 페이지 뷰를 볼 수 있는 깔끔한 카운터를 추가할 수 있던 점도 좋았다!

편하게 글을 올리는 네이버 블로그, 인스타그램과 사이드 프로젝트에 관한 내용을 주로 올리는 브런치 등은 그대로 유지하면서도 나의 맥락을 하나로 담은 홈페이지를 완성할 수 있어서 뿌듯했다. 이전에는 홈페이지를 만드려면, 정말 많은 준비가 필요했는데…(나모 웹에디터..알 FTP.. 그 시절…) 지금은 노션과 oopy 두 개의 서비스만 잘 쓰면 깔끔하게 완성할 수 있다는 것도 여러모로 놀라웠고. 일단 홈페이지를 앞으로도 계속 잘 운영해봐야지! 자주 놀러오세요! minseok.oopy.io

notion-py로 노션(Notion)을 내 블로그의 CMS로 사용하기

매번 “블로그를 멋지게 꾸미고, 꾸준히 글을 작성해야지!” 하고 다짐했지만 항상 실패했다. 그럴 때마다 애꿎은 블로그 서비스를 탓했다.

그러던 중 노션을 알게 됐고, 노션을 블로그로 활용하는 몇몇 사례를 보게 되었다. 미니멀하고 깔끔한 디자인에, 글 작성 경험이 좋은 노션을 나도 블로그로 사용해볼까 고민하기 시작했다.

멋진 노션 블로그에 빠져 나름대로 노션 블로그를 만들어봤다.

포스트마다 hits를 붙이고, 데이터베이스 기능을 활용해 블로그 글을 상태별로 관리하면서 완벽한 블로그 솔루션을 찾은 듯했다.

그런데 노션 콘텐츠의 SEO가 좋지 않았다. Share to the web을 켜놓아도 이 링크가 다른 웹 사이트에 공유되었을 때 구글에 검색되기 시작하는 것 같았다.

그리고 노션엔 댓글 기능이 없었다. 물론 검색도 안되는 글에 댓글이 달릴리 없겠지만, 댓글을 달 수 없는 블로그는 절반의 기능이 빠진 느낌이었다.

노션 유저 그룹에는 노션 블로그의 단점들을 극복하기 위한 많은 방법들이 공유되고 있다.

🔗 https://www.sungchulblog.com/How-to-set-up-Notion-as-Blog-Tutorial-a9dbb28cf2db4db8a54e71ee14f42c98

🔗 Joey: Extension block for notion

🔗 노션에서 구글 애널리틱스 사용하기

노션에 disqus를 추가하는 방법, 도메인 네임을 변경하는 방법, 노션에 소셜 댓글 블락을 추가하는 방법, 그리고 페이지 조회수를 추적하기 위한 구글 애널리틱스 추가 방법 등이 있었다.

하지만 아쉽게도 위의 방법을 사용하는 것을 포기했다. 노션은 블로그 플랫폼이 아니기 때문에, 블로그로 사용하기 위해 확장을 붙이는 것이 내 기준에선 불편하게 느껴졌다. 물론 각자의 취향과 목적에 맞게 충분히 블로그처럼 사용할 수 있다고 생각한다.

그래서 다른 블로그 서비스를 알아보던 중, 흥미로운 글을 발견했다. notion-py 라는 비공식 파이썬 API를 사용해서 노션을 블로그의 CMS로 사용하는 방법을 소개한 글이다.

🔗 How I Use Notion As My CMS For My Gatsby Site

🔗 Headless CMS, 머리가 없는 컨텐츠 관리 시스템

즉, 노션으로 블로그에 글을 작성하고, 수정하고, 삭제할 수 있게 되는 것이다! 흥미를 느끼고 해당 글을 따라 노션 CMS를 구축해보고 나에게 맞게 환경설정해봤다.

먼저 notion-py를 실행하기 위해서 파이썬을 설치해야한다.

🔗 Download Python

파이썬 설치가 완료되면 pip install notion 명령어로 notion-py 모듈을 설치한다.

노션에선 한 페이지 안에 여러 자식 페이지가 있을 수 있다. 위의 글에서 소개한 파이썬 코드는 notion-py를 활용하여 한 페이지 안에 있는 여러 자식 페이지를 mdx 파일로 가져오는 코드이다.

위와 같은 노션 페이지가 있다고 할 때, 안에 있는 자식 페이지들을 가져오기 위해 두 가지가 필요하다. 노션 계정에 부여된 token_v2 와 페이지의 url 이다.

페이지 url 은 주소창에서 그대로 가져오면 되고, token_v2 는 크롬에서 개발자도구(F12) > Application > Storage > Cookies > https://www.notion.so… 에서 token_v2 의 Value 를 가져오면 된다.

가져온 token_v2 는 아래 코드의 “NOTION_TOKEN” 위치에 넣고, 노션 페이지의 url 은 “NOTION_BLOG_POSTS_PAGE” 위치에 넣는다.

Notion blog에서 Github blog로 옮기는 이유

최근 cv-learn 블로그를 쾌적한 환경으로 옮길 계획을 세웠습니다. 단순한 공부 노트에서 시작한 cv-learn인데, 이제는 어떻게 하면 좀 더 명쾌하게 컴퓨터 비전과 SLAM에 대한 정보를 전달할 수 있을지 고민을 하게 되더라구요. 우선 CV, SLAM, 그리고 cv-learn 블로그를 사랑해주신 많은 분들께 감사를 드립니다.

오늘은 과거부터 현재까지 cv-learn 블로그가 어떤 변화를 거쳐왔고, 또 블로그 이사를 위해 고민하고 직접 사용해봤던 다양한 플랫폼들을 비교해보도록 하겠습니다.

가장 초기의 cv-learn은 Notion.so 의 기본 페이지 템플릿을 사용하였습니다. Notion을 사용해서 글을 적는 것은 굉장히 편합니다. WYSIWYG (What you see is what you get) – 바로바로 눈에 보이는 대로 적을 수 있기 때문에, 의식의 흐름이 끊기지 않고 적을 수 있다는 것이 Notion의 가장 큰 장점이라고 생각합니다. Notion의 위젯도 굉장히 이쁩니다.

하지만 Notion에는 큰 단점이 있습니다. 하나도 아니고 사실 몇개가 있습니다.

첫번째로는 읽기 어려운 페이지 url 입니다. url만 봐서는 글의 내용이 전혀 추측이 되지 않습니다.

두번째로는, Notion 글들의 url 주소는 글의 제목이 바뀌면 새로운 url 주소를 가지게 되는 점 입니다. 글의 제목을 조금 수정하면 이전에 Facebook 등의 소셜 스크랩으로 공유했던 주소로는 해당 글에 접근할 수 없게 됩니다. 이 때문에 저는 글의 초안을 작성할 때 무조건 제목의 내용을 픽스해야했는데, 이 점이 굉장히 답답했습니다.

입니다. 글의 제목을 조금 수정하면 이전에 Facebook 등의 소셜 스크랩으로 공유했던 주소로는 해당 글에 접근할 수 없게 됩니다. 이 때문에 저는 글의 초안을 작성할 때 무조건 제목의 내용을 픽스해야했는데, 이 점이 굉장히 답답했습니다. 세번째로는, 카테고리 탐색 및 글 검색 기능 이 없습니다.

이 없습니다. 마지막으로, 페이지 로딩이 굉장히 느립니다.

이러한 단점들 때문에 다른 플랫폼으로 옮기는 것을 고려하게 되었습니다.

1. 노션 페이지의 진화 → cv-learn.com

첫번째 대안으로는 Github pages 를 고려했습니다. Notion처럼 Inline maths도 되고, 카테고리 탐색 기능도 있고, url 주소도 마음대로 만들 수 있습니다. 하지만 저장소의 용량 제한이 있습니다. 이는 학회에서 촬영한 영상 업로드가 어렵다는 것을 의미합니다.

둘째는 Tistory 블로그였습니다. 컴퓨터 비전 블로그의 조상, 다크프로그래머님 블로그도 Tistory 블로그를 사용하죠, 저 역시 눈이 갈 수 밖에 없었습니다. 하지만 Notion 에서 다양한 블록들을 사용하다가 이쁜 블록이 없는 Markdown 형태로 적는 것은 생각보다 많이 불편했습니다.

셋째는 Notion 블로그를 호스팅하는 것이였습니다. 이 방법을 사용하면 Notion의 이쁜 블록 기능을 계속 사용하면서 빠르게 글을 적을 수 있었습니다. 호스팅을 통해 url 등의 문제 역시 해소할 수 있었습니다. 초기에는 Inline maths 기능이 없어서 불편했지만, 이 기능도 곧 Notion측에서 구현해줬습니다.

Notion 블로그 호스팅이 가장 좋은 옵션으로 보였고, cv-learn 블로그라는 이름으로 다시 태어나게 되었습니다. 아래 모습이 여러분이 기억하시는 cv-learn 블로그의 모습입니다.

잠깐 다른 얘기를 하자면… 사실 cv-learn 블로그의 이름은 원래 cv-learn이 아니였습니다. 원래는 TorchVision 이라는 이름으로 시작했었죠. 하지만 이 이름은 호스팅을 위한 도메인을 찾을 때 크게 문제가 되었습니다. PyTorch에서 이미 TorchVision이라는 이름을 쓰고 있었습니다. 여러 고민을 하다가, 컴퓨터 비전을 공부하는 블로그이니, cv-learn이라고 짓기로 했습니다.

http://cv-learn.com 도메인을 사고 난 후, Cloudflare 호스팅 서비스를 통해 javascript 워커 할당을해서 노션 렌더링을 하였습니다. 이 도메인 아래에서 cv-learn 블로그를 운영하게 되었습니다. 많은 분들께서 감사하게도 cv-learn 블로그를 찾아주셨고, 어느새 최신 글이 한두달 가까이 나오지 않았음에도 한달 약 1500명 정도씩 꾸준하게 방문해주시는 블로그가 되었습니다.

2. 새로운 플랫폼으로의 이전

하지만 Notion + Cloudflare 호스팅도 완벽하진 않았습니다.

우선 cv-learn 도메인을 사용하기 위해 비용을 지불해야 했습니다. 3년? 5년에 약 5~7만원 정도였던 것으로 기억합니다. Cloudflare는 무료 호스팅 플랜을 사용하고 있었는데, 이 방식으로는 하루에 약 10만건의 request 를 허용할 수 있었습니다. 초기에 저는 이 ‘request’를 접속 수로 이해했고, ‘내 블로그에 하루에 10만명의 접속자가 생길리가 없지’ 하던 참에 아래와 같은 이메일을 받았습니다.

???

왜???

사실 Notion 페이지는 실시간 업데이트를 유지하기 위해 누군가 접속중이라면 정기적으로 최소 몇백건씩 request를 날리는 구조였습니다. 실제로 10만명이 제 페이지에 접속해야 문제가 생기는 것이 아니였던 것입니다. 오히려, 지금처럼 하루에 ~100명정도 오시는 지금의 상황이 위태로운 상황이였습니다. 실제로, 새 글을 올렸을 때 Daily request limit을 넘긴 적도 있어서 블로그가 로딩이 되지 않는 경우도 있었습니다.

이 문제를 해결하는 간단한 솔루션은 Cloudflare의 유료 플랜을 통해 Daily request limit을 높이면 됩니다. 다만… 제가 이 블로그로 수익을 창출하는 것도 아닌데, 도메인 구매 + 유지에 돈을 쓰고 호스팅까지도 돈을 쓰기에는 너무 과한 것 같았습니다. 그리고 무엇보다 지인 분들의 멋진 기술 블로그를 보면 저처럼 돈을 따로 들이지 않으시더라구요. 나도 저렇게 할 수 있지 않을까,라는 생각이 들었습니다.

그렇게 새로운 플랫폼으로 두번째 블로그 이사 플랜을 세우게 되었고, 기왕에 이사가는거 커져버린 cv-learn을 좀 더 좋은 플랫폼에서 서빙하고 싶다는 생각에 이번에는 몇가지의 제약조건을 더 걸었습니다.

무료 호스팅 + 빠른 로딩 cv-learn의 이름을 유지할 수 있는 플랫폼 LaTeX 입력 가능 Google 및 검색 엔진에서 노출 가능 댓글 기능 가능

이 조건들을 충족할 수 있는 플랫폼들은 Tistory, Velog, Github-pages가 있었습니다.

3. Tistory vs Velog vs Github-pages

Tistory를 가입하고, Notion2Tistory 라는 툴을 사용해봤습니다. 이 툴은 Notion에서 작성한 글을 특유의 블록 형태까지 그대로 Tistory로 복사할 수 있게 해주는 툴입니다. cv-learn에 작성한 글들을 그대로 Tistory에 복제하려고 해봤습니다만… 막상 옮기다보니 예전 내용을 조금 수정하고 싶은 생각이 들더라구요. 하지만 이 툴로는 한번 내용을 복제하고나면 Tistory 에디터에서 글 내용을 다시 수정하기 까다롭다는 단점이 있었습니다.

Velog의 경우, 지인이 사용을 권유하기도 했습니다. Velog는 우선 cv-learn 보다 로딩속도가 빨랐고, 그리고 Velog 플랫폼 내에서 내 글이 자동으로 홍보가 된다는 점도 좋았습니다. 개발자가 주된 플랫폼이라는 것도 좋았습니다. 하지만 Google에서 검색 노출이 거의 되지 않았습니다. 따로 SEO를 걸지 않은 cv-learn 블로그가 오히려 검색이 더 잘 되는 느낌이 들었습니다. 이 점 때문에 Velog를 선택하기가 꺼려졌습니다.

Github-pages가 대부분의 고민을 해결해줄 수 있었습니다. 무료 호스팅에, cv-learn 이름도 지킬 수 있고, 테마도 제 마음대로, LaTeX 입력도 쉽고, SEO 설정도 할 수 있습니다. 댓글은 Disqus나 다른 시스템을 연결하면 되었구요. 무엇보다, 제 주변에 멋지신 두분이 운영하시는 블로그들이 Github Pages 였기에 많은 아이디어들을 얻을 수 있었습니다 (항상 감사합니다 hoya012 블로그, jinyongjeong 블로그!).

하지만 Github-pages는 Tistory나 Velog 등에 비해 손이 많이 갑니다. 그냥 글을 쓰고 싶을 뿐인데, static site generator를 깔고 설정해야하고… 여간 귀찮은게 아닙니다. Static site generator에는 Jekyll, Hugo, Hexo, Gatsby 등등 다양한 시스템이 있었는데, 그 중 저는 Hexo를 우선 선택하였습니다. 별 다른 이유는 없습니다. Jekyll은 ruby를 쓴다는게 마음에 들지 않았고 (저는 ruby가 무슨 언어인지도 잘 모릅니다…), 그 다음에 골라본게 Hexo인데 생각보다 쉬워서 정착했습니다. Hugo가 더 빠르고 좋다고 하는데, 천천히 테스트해보고 바꿔야한다면 늦지 않게 바꿔볼 생각입니다. 어찌되었건, Hexo를 사용하면서 이쁜 블로그를 빠르게 셋업할 수 있었습니다.

현재까지의 블로그 구성은 매우 만족하고 있습니다. Github 아이디로 댓글을 달 수 있는 플러그인도 있고, 카테고리/태그 등으로 게시글을 구분할 수 있고, 속도도 굉장히 빠릅니다. LaTeX도 물론 입력 가능하고, 자동으로 SEO도 설정이 됬습니다.

2020년 11월 24일 현재 이 블로그는 cv-learn.com 에 연결되어있지 않습니다. 빠르게 글을 이전하고, 새로운 글도 적어가면서 어느정도 준비가 되었을 때 도메인을 이전하려고 합니다. 이번 글이 테크 블로그 개설을 고려하시는 분들께 도움이 됬길 바라고, 또 앞으로도 cv-learn 블로그에 많은 관심 부탁드립니다!

Twitter

Facebook

LinkedIn

게시글 공유:, and

키워드에 대한 정보 노션 블로그

다음은 Bing에서 노션 블로그 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

사람들이 주제에 대해 자주 검색하는 키워드 [Live] 노션으로 나만의 홈페이지 만들기 with OOPY

  • 노션
  • 노션사용법
  • 노션템플릿
  • notion
  • notion사용법
  • notion템플릿
  • 노션활용법
  • 생산성
  • 스마트워크
  • 메모앱
  • 메모
  • 노션메모
  • 웹사이트
  • 홈페이지
  • 포트폴리오
  • oopy
  • 우피
  • 노션포트폴리오
  • 노션홈페이지
  • 포트폴리오만들기
  • 포트폴리오만드는법
  • 노션포트폴리오만드는법
  • 노션홈페이지만드는법
  • 노션홈페이지제작
  • notion홈페이지
  • 마케터 포트폴리오
  • 디자인포트폴리오
  • 회사소개
  • 소개페이지
  • 이벤트소개페이지
[Live] #노션으로 #나만의 #홈페이지 #만들기 #with #OOPY

YouTube에서 노션 블로그 주제의 다른 동영상 보기

주제에 대한 기사를 시청해 주셔서 감사합니다 [Live] 노션으로 나만의 홈페이지 만들기 with OOPY | 노션 블로그, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.

Leave a Comment