깃허브 블로그 이미지 간편하게 업로드 하기
요약: 옵시디언을 활용해서 깃허브 블로그에 이미지 간편하게 업로드 하기
1. 서론
깃허브(github.io) 블로그를 처음 운영하시는 분들이 겪는 어려움 중 하나가 ‘이미지 업로드에 대한 불편함’일 것입니다.
인터넷에서는 github issues 이용, 이미지 호스팅 사이트 이용 등의 방법을 소개하고 있지만 제 경우에는 이 조차도 불편하다고 느꼈기 때문에 더 나은 방법을 적용했고, 이를 소개하려고 합니다.
제가 소개하는 방법을 사용하면 이미지 업로드에 있어서 단순히 글에서만 붙여넣기 하는 것만으로 완전 자동화가 가능하고, 이미지 파일명 또한 가독성 좋게 관리할 수 있습니다.
2. 본론
먼저 https://obsidian.md/ 링크에서 옵시디언을 다운로드 하세요. 옵시디언은 마크다운 편집을 지원하는 무료 노트 애플리케이션입니다.
기본 기능(코어 플러그인)과 추가 기능(커뮤니티 플러그인)을 통해 다양한 작업을 효과적으로 할 수 있는 것이 장점 중 하나인데, 해당 포스트에서도 플러그인을 통해 이미지 업로드 자동화를 구현합니다.
2.1. 깃허브 블로그와 옵시디언 연동하기
[!NOTE]
해당 포스트는 독자가 이미 깃허브 블로그를 생성하고, 로컬에 clone 했다는 전제 하에 진행됩니다.
먼저 옵시디언을 켜고 위 사진과 같이 옵시디언에서 블로그 디렉토리를 엽니다.
File -> Open Vault -> 보관함 폴더 열기 - 열기 -> 본인의 github.io 클론 디렉토리(제 경우에는 my-blog) 선택 -> 열기
이제 옵시디언에서 해당 디렉토리를 관리할 수 있습니다.
2.2. 초기 설정
자동화를 위한 디렉토리 생성, 플러그인 설치 및 설정 등의 과정을 다룹니다.
2.2.1. assets/img/posts 디렉토리 생성
블로그에서 사용하는 이미지를 한 곳에서 관리하기 위한 별도의 디렉토리를 생성합니다. 위 사진과 같이 assets/img/posts 디렉토리를 생성하세요.
2.2.2. 옵시디언 기본 설정
먼저 macOS 기준으로 Command + ,를 눌러 Preferences 창을 켜 주세요.
파일 및 링크 탭으로 이동 후 사진에서 표시된 부분의 설정만 동일하게 맞춰주세요.
2.2.3. 플러그인 다운로드 및 설정
커뮤니티 플러그인 -> 커뮤니티 플러그인 사용 -> 플러그인 다운로드(아래 사진 참고)
Attachment Management 플러그인과 Regex Find/Replace 플러그인을 다운로드하고, 활성화 해 주세요.
[!IMPORTANT] 플러그인 다운로드 후에는 반드시 위 사진과 같이
활성화버튼을 클릭해야 합니다.
Attachment Management
마찬가지로 표시된 부분의 설정만 동일하게 맞춰주세요.
Regex Find/Replace
앞선 설정들 덕분에 이제 이미지를 붙여넣기 하면 자동으로 assets/img/posts 디렉토리에 저장해서 이를 참조합니다.
그런데 이미지 경로 참조 방식에서 문제가 발생합니다.
이제 이미지를 첨부하면 위 사진과 같이 이름이 post 이름에 맞춰지고, 경로에도 제대로 저장되어 이를 참조하게 되는데 참조 경로가 assets/img/...과 같습니다.
옵시디언에서는 문제가 없지만 깃허브 리포지토리에서는 항상 앞에 /를 붙여 /assets/img/...과 같은 형식으로 참조해야 되기 때문에 위 경로는 제대로 참조할 수가 없습니다.
이를 해결하기 위한 플러그인이 Regex Find/Replace입니다(옵시디언이나 attachment management 플러그인 자체 기능만으로 해결이 가능한가를 고민했으나 현재 시점에서는 불가능한 것으로 판단되어 추가 플러그인을 사용합니다).
해당 플러그인의 경우 사용하기 편하게 단축키 설정만 하면 됩니다. 제 경우에는 파일명을 대체(Replace)한다는 의미로 Command + Shift + R로 바운딩 했습니다.
3. 결론
모든 설정이 완료되었습니다!
이제 포스트 하기 위한 글을 작성하고, 글 내부에 이미지를 첨부하면 자동으로 assets/img/posts 디렉토리에 포스팅이름-n과 같은 포맷으로 이미지를 저장하고 이를 참조합니다.
[!IMPORTANT] 이미지를 첨부한 뒤에는 반드시 여기에서 언급했던 이미지 경로 문제를 해결해야 합니다.
Command + Shift + R로 설치했던 플러그인을 실행하고, 아래 사진과 같이 입력한 후Replace All을 선택하세요. 해당 플러그인은 직전에 사용했던 Find/Replace 패턴을 기억하기 때문에 처음에만 입력해두면 이후에는 플러그인 실행 -> Replace All 과정만 거치면 됩니다.
Find:
!\[(.*?)\]\((assets/img/posts/.*?)\)Replace:
