저는 Blog를 시작할 때 다음과 같은 고민을 했습니다.
이었습니다.
그리하여 MK Docs, Docusaurus를 거쳐 Nextra Blog를 시작하게 되었습니다.
HTML, CSS를 잠깐 공부하긴 했지만 잘 모르는 저로써는 Docusaurus를 커스터마이즈해서 쓰기에 조금 어려움이 느껴졌고 의미없는 인터넷 탐색을 하다가 우연히 Nextra로 게재 된 블로그를 봤는데 기본적으로 디자인이 깔끔해보여서 또 한 번 블로그 이전을 하게 되었습니다.
필자 블로그 - Link
Nextra의 폴더 구성 방식과 몇몇 기능을 익히는데는 앞서서 사용하고 있던 블로그가 있었기 때문에 어려움은 없었습니다.
VSCode를 사용해서 블로그를 작성하면서 가장 불편하게 느껴졌던 부분은 이미지 삽입이었습니다.
Velog, Tistory 등을 작성 중인 포스팅에 이미지를 넣으면 자동으로 이미지가 등록이 되었는데, Nextra의 이미지는 수동으로 public/img
폴더를 만들어서 넣어줘야 했고 그 마저도 포스팅이 많아지면 포스팅 별로 폴더까지 구분하면 점점 폴더를 찾아서 등록해야 하는 번거로움에 최근엔
'이미지 서버를 따로 만들까? 나중에 이전하기도 좋잖아'
'커뮤니티랑 동떨어지는 것 같고 접근성도 어렵고 sse도 지원이 잘 안되는데 온라인 Blog로 옮길까?'
등의 고민을 했습니다.
그런 고민을 하던 중 어떤 키워드로 유입된건지 정확히 기억은 안나지만
대충 nextra image paste
이런 키워드로 찾은 extension이 있어서 이를 소개할까 합니다.
cmd + shift + x
를 누르고 검색창에 paste image
를 검색하면
이런 extension이 나옵니다.
해당 extension을 다운 받고 cmd + shift + p
-> open user settings
를 검색해서 setting.json창을 열어서
맨 아래쪽에
위와 같이 설정을 저장해주면 됩니다.
👇 코드를 복사하세요.
"pasteImage.basePath": "${projectRoot}/public",
"pasteImage.path": "${projectRoot}/public/paste-image/${currentFileNameWithoutExt}",
"pasteImage.insertPattern": "<img src=\"${imageFilePath}\" width=\"75%\" />",
"pasteImage.prefix": "/",
각 옵션은 다음과 같습니다.
이미지를 복사해서 cmd + option + v
를 작성 중인 파일에 붙여주면 위의 설정대로면 public/paste-image/작성중인 파일명/날짜
의 형태로 저장이 됩니다.