Github blog를 쓰면 불편한 게 한둘이 아니지만 그 중에서 특히 신경쓰인 건 이미지 추가였다.
블로그 자체적으로 이미지 업로드를 지원하는 게 아니니, 어딘가에 이미지를 따로 업로드하고 링크해야 한다.
그리고 코딩이 다 그렇듯 방법은 여러 가지가 있다.
Github Issue 사용
깃허브의 Issue에 이미지를 업로드하고 링크해서 쓰는 편법(?)이다. 검색하면 금방 찾을 수 있는 것이므로 따로 설명하진 않는다.
로컬 PC의 이미지를 Issue창에 드래그하면 마찬가지로 업로드된다.
Github repository content 사용
Github 저장소의 파일을 다음과 같은 경로 구조로 가져올 수 있다.
https://raw.githubusercontent.com/:owner/:repo/:branch/:file_path
내가 사용하고 있는 chirpy 테마의 개발자는 블로그 이미지용으로 별도의 저장소를 만들어 쓰고 있는 것 같다.
블로그 이미지용 저장소를 별도로 만드는 것과, 그냥 기존 블로그 저장소에 이미지용 폴더를 추가하는 것 중 뭐가 더 나은 방법인지는 잘 모르겠다.
그냥 블로그에 포함시키기
이것저것 따질 거 없이 그냥 블로그 프로젝트 자체에 포함시킨 후 포스트랑 같이 commit해버리면 안 되나?
일단 로컬에서는 되는 것을 확인했다. 이대로 push했을 때 github에서도 정상동작하는지 여부는 확인할 필요가 있다.
(추가)
깃헙에 push해도 이미지가 정상적으로 나온다.
어느 방법이 좋을까
1번, guthub issue를 이용하는 법은 의외로 간편하다. 드래그하고 경로를 복붙하기만 하면 된다. 드래그만 하면 끝인 위지윅 에디터만은 못하지만, 거기까지는 아무래도 욕심이고.
그리고 이미지를 올린 시점에서 서버에 저장되니까 로컬과 VS code상에서도 이미지를 바로 보면서 작업할 수 있다.
2번의 경우 먼저 이미지를 올려서 커밋하지 않으면 로컬에서 확인할 수 없다. 이 점은 조금 불편하다.
3번의 경우 VS code상에서는 미리 볼 수 없지만, 로컬 서버에서는 미리보기가 된다.
나는 세 번째 방법, 그러니까 그냥 이미지를 프로젝트에 포함시켜서 같이 커밋하는 방법을 쓰기로 했다.
깃헙 이슈를 쓰는 방법은 아무래도 편법같은 느낌이 있고, 올린 이미지의 관리가 안 된다는 점이 신경쓰인다. 사실 그냥 막 올리고 잊어버리면 되긴 하지만…
상황에 따라 1번 방법이나 다른 곳에 업로드하거나 하는 방법이 더 나을 수 있으니 봐가며 방법을 바꾸면 될 것 같다.
Chirpy에서 이미지 경로 설정법
Chirpy 테마는 이미지 경로를 좀 더 쉽게 지정할 수 있는 설정들을 제공한다.
먼저 설정파일인 _config.yml에 전역 이미지 경로 설정을 적을 수 있다.
이건 어딘가에 별도의 이미지 업로드 공간을 두는 경우 유용할 것 같다.
그리고 포스트 헤더에 경로를 지정할 수 있다.
1
2
3
---
img_path: /img/path/
---
이 경로는 블로그 프로젝트 루트 기준의 상대경로로 지정해도 동작함을 확인했다. 내가 img 폴더에 이미지를 올린다면 /img/로 설정한 후, 본문에서는 경로를 빼고 다음과 같이 쓸 수 있는 것이다
1
관련 설명은 Chirpy 블로그 튜토리얼 페이지에서 볼 수 있다.