기술 블로그 플랫폼- github io -> notion으로 다시 되돌아가려함

github io 를 쓰면서 느낀 단점이 있다

 

1. 웹 프론트엔드를 어느정도 다룰 줄 알아야함

 

내가 원하는 대로 커스텀하기 위해선 JavaScript를 잘 다룰 줄 알아야하는데 그러지 못해서 내 맘대로 안되는게 답답하다..

Jekyll Chirpy 테마를 사용하는 중인데, 커스텀할 때 도움이 되는 문서가 많을 줄 알았는데

생각보다 거의 없다. 영어 문서도 별로 없다. 

그냥 본인이 JavaScript코드를 읽을 줄 알아야한다

 

그리고 Jekyll은 Liquid문법도 쓰는데

JS문법, 리퀴드 문법 여러 개 알아야 될 게 많아서 번거로웠다

 

 

2. 코드 하이라이팅

 

노션처럼 code block내에서 내가 원하는 코드 한줄한줄을 강조하고 (형광펜을 친다던지, bold표시를 준다던지)

Copy버튼을 띄우고, Language 지정을 하고 싶어서

기본적인 MD문법에서 사용하는 ``` ``` 코드블럭 대신

 

코드 구문 강조 해주는 외부 라이브러리를 여러개 찾아보고 대표적으로 많이 쓰인다는 Prism.js와 highlight.js를 써봤다.

 

highlight.js는 line number를 넣지 못한다. 뭔가 단순하고 깔끔하게 사용하기 좋다.

언어 지정은 자기가 직접 CSS를 작성해서 넣어줄 수 있긴 하다.(관련 링크 https://github.com/highlightjs/highlight.js/issues/1108)

 

prism.js는 여러 외부 플러그인들을 사용할 수 있어서 줄번호나, 복사버튼, 언어 같은걸 추가할 수 있다.

 

 

그런데 이들은 html태그를 기반으로 작성하는 거다보니..

JS나 python같은 코드들은 잘 처리해주는데

태그를 기반으로 작성하는 html 코드는 처리가 불가능하다. 

찾아보면 여러 방법이 있긴한데, ...html문서 파일을 따로 넣어준다던지, html의 <> 심볼들을 다 변환시켜주는 웹사이트를 통해 변환 후에 넣어준다던지..(관련 설명https://velog.io/@yesslkim94/highlight.js-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90-%EC%BD%94%EB%93%9C%EB%84%A3%EA%B8%B0)

너무 번거롭다. highlight.js는 이런 방법을 통해 가능하기라도 하지, prism.js는 태그옆에 자꾸 이상한 네모 블럭이 생기는데 해결 방법을 모르겠다.

 

3. TOC가 동적으로 움직이지 않음.

 

깃헙 블로그를 사용하게 된 결정적인 이유는

게시글 옆에 TOC가 생성돼서, 스크롤을 움직일때마다 내가 읽는 콘텐츠가 어딘지 동적으로 표시해준다는 것이다.

 

근데.. TOC를 작성할때 숫자로 시작하게 되면 스크롤에 따라서 동적으로 움직이지 않는다는 문제점이 있다.

이를 해결하기 위해서는 .. js를 직접 작성할 줄 알아야되는데 

내 실력이 부족하여....

 

 

4. MD 문법의 번거로움

 

MD문법이라 편한점이 있기도 한데, 불편한 점도 있다.

이미지를 첨부할때마다 이미지 파일들을 게시글 별로 분류해서 저장하는거는 VSC 와 옵시디언에서 열심히 .. 설정해주어서 해결했다.

 

그런데 문서 작성할때 자잘하게 넣어주는 태그들이 귀찮다.

엔터를 많이 치고 싶으면.. <br>태그를 넣어줘야한다던지,

다음 줄로 넘어가고 싶으면 스페이스바를 두번 쳐줘야한다던지..

 

그리고 MD Viewer를 통해 작성한 글이랑, 실제로 작성된 글은 자잘하게 차이가 있어서

따로 수정해줘야 한다는점..

 

 

5. 생각보다 남이 보는 글을 쓰는게 귀찮다

 

남들도 읽게 되는 글이다보니 좀 더 자세히 서술하면서 쓰게 된다.

그런데.. 전부 다 알아들을 정도로 이미지를 왕창 첨부하면서, 캡션 다 넣어주면서 쓰기에는 내가 귀찮고,

덜 자세하게 쓰자니 어차피 못따라할 거 같아서 이럴거면 왜 풀어서 쓰지..? 

이런 딜레마가 자꾸..ㅋㅋㅋㅋㅋㅋㅋㅋ ㅜㅜ 

 

그리고 글이 부실한 거같아서 정작 push는 안하고 로컬에만 잔뜩 작성하게 된다.

나는 그냥 .. 나만 알아보게 쓸래..

 

-----

 

그래서 다시 노션으로 돌아가기로 했다 . 

그동안 생각했던 노션의 단점들도 많이 해결됐기 때문.  

 

1. 몰랐는데 노션 페이지를 웹사이트로 만들 수 있다

oopy, super.io 같은 유료 서비스를 이용할 수도 있는데.. 한달에 6000원 하는 게 부담이 된다. 

무료로 간단하게 react 라이브러리로 랜더링 해주는 라이브러리를 발견했다.

 

관련 링크

https://blog.silentsoft.org/archives/193

oopy.io, super.so 대체제를 찾아서 (feat. Notion X)

https://github.com/transitive-bullshit/nextjs-notion-starter-kit

GitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Verce

 

 

2. 위 웹사이트 랜더링을 이용하면 동적으로 움직이는 TOC를 작성할 수 있다...

 

-----

 

github io에 비해 노션의 불편함도 있다.

1. 노션은 헤딩 태그가 h1, h2, h3 세 개 밖에 없다.

2. 노션에서 보면 코드블럭내에 한줄한줄 강조효과를 줄 수 있는데,

웹사이트로 랜더링하면 강조효과가 사라지더라. github io랑 마찬가지다.

 

 

그리고 그 외에 모든 것을 세밀하게 커스텀 해줬었던 github io에 비해선 자유도가 떨어지는데

원래도 잘 썼던 노션이니 줄어든 자유도에 그냥 익숙해지려고 한다,,

 

나중에 JS 천재가 돼서 내가 원하는 대로 커스텀할 실력이 되면 ㅎ 다시 깃헙io로 갈 의향이 있다

 

highlight Eng

가장 밝은 부분