다양한 개발자들의 블로그 사이트
요즘 개발자 블로그보다보면
1.
velog
2.
티스토리
3.
깃허브를 이용한 블로그
4.
노션
이렇게 많이 사용하시는데,
나는 대학생 때부터 Notion을 자주 사용해 왔기 때문에, Notion을 이용하여 블로그처럼 더 개방적으로 글을 쓰고 싶었다.
근데 마침 작년에 우피라는 사이트를 알게 되면서,
노션도 다른 블로그처럼 꾸며서 사용할 수 있다는 것을 알게 되었다.
노션을 이용하면서
노션을 사용하다 보면, 노션은 개인용 블로그와 유사하다는 느낌을 받았다.
하지만, 나는 개인용 블로그에만 한정되지 않고, 더 많은 사람들이 내 글을 읽을 수 있기를 바랐고, 우피를 이용해서 내 노션을 더 많은 사람들이 볼 수 있도록 설정해 주었다.
친구 추천하면 50%할인된다. (저의 주소를 복사해서 추천인으로 사용해주세요 
)
)우피 이용법
자주 사용하는 개발 이메일로 가입한 후 노션 주소를 연결하면 됩니다.
주소 연결은 우피에서 자세히 설명되어 있으니 참고하기.
연결 후에 오른쪽 위에서 제공하는 스타일을 이용해서 꾸밀 수 있다.
그리고 우피 사이트에 제공하는 가이드를 참고해서 꾸미면 된다!
최근에 완성한 나의 노션을 이용한 블로그
어떻게 블로그를 꾸몄는가?
노션의 목차는 기본적으로 항상 위에 고정되어 있는데, 나는 오른쪽에 목차를 두고 싶었다.
검색을 통해 찾아보니, 팔만코딩경님께서 이미 코드까지 상세하게 적어서 올려주셨다!
바로 참고해서 적용했다.
근데 막상 적용이 바로 안되서 뭐가 문제지.. 하고 한참을 찾아보니까 주의할 점이 몇개 있었다.
1.
해당 페이지 상단에 반드시 HTML 태그로 생성해야 하며, 그 윗쪽에 빈 줄이라도 있으면 안 됨.
2.
HTML 태그의 캡션에 꼭 "copy"를 넣어주시기 바람. << 이걸 안 넣어서 목차에 따른 빨간색 포인트가 안 된게 있었음.
3.
왼쪽nav에 이미지 넣어준거는 사이트의 우클릭 검사를 통해서
해당 이미지 div를 잡고 있는 상단의 div 클래스명을 가져와서 오른쪽 목차처럼 CSS를 적용하면 해결할 수 있다.
4.
(2023.08 추가) 우피에서 목차 기능 제공!
8월쯤에 우피에서 좌측,우측에 목차를 제공하는 기능을 추가해주셨다
상단에 yaml 파일을 만들고 바로 하단에 목차가 있으면 된다.
floatFirstTOC: right
YAML
복사
추가해주면 이 페이지처럼 목차가 우측에 생긴다. 근데 위에서 꾸며준거처럼 해당하는 목차로 이동될때 css는 별도로 추가해줘야함
노션에 댓글도 추가하기
이 분 블로그를 참고해서 진행했다.
여기로 접속해서
utterances 관련된 repository 생성 후에 select repositories를 하는게 좋다.
그리고 생성한 repositories 연결
repo name에 넣어주고 저장하면 그 다음부터 댓글창이 하단에 생성된다.
해당 페이지에만 댓글 창 닫고 싶으면 밑에 이미지를 클릭해서 우피사이트에서 참고하자.
결론
노션을 매우 잘 사용하는 사용자로서, 우피는 최고의 사이트.
또한, 우피의 베이직 플랜으로도 여러 가지를 충분히 사용할 수 있기 때문에 베이직 플랜으로도 충분하다.
우선, 우피를 통해 노션을 내 입맛대로 꾸밀 수 있는 것이 큰 장점이다.
우피와 노션 둘 다 오랫동안 사용하고 싶습니다. 우피 열일 해주세요!!