Typora 로컬 이미지 웹에서도 바로 보는 법, 근데 이제 github을 곁들인..!

Typra에서 글을 작성할때 스크린샷 등 이미지를 추가하면 좌측 이미지와 같이 내 컴퓨터 로컬에 이미지가 저장된다.그리구 룰루랄라 블로그를 쓰면 오른쪽 이미지처럼 곰돌이친구가 '이미지를 불러올 수 없다'고 알려준다ㅎ

로컬에 이미지 있음 ㅠ	블로그에서 이렇게 보임

매번 블로그에 typora 글 복붙할 때마다 github issue화면으로 가서.. github 서버를 빌려.. 이미지를 업로드 하고..

해당 url을 복사해서.. 블로그에 붙여넣고.. 뭐 이런 의미없는 짓을 계속 해왔다.

언젠간 Typora놈 혼쭐을 내주리라 생각했고, 오늘 드디어 내가 해냈다.

이번 글에선 위에서 수동으로 해왔던 작업들을 자동화시킬것이다.

1. 이미지를 업로드 할 public Github Repository 만들기

Github 서버 좀 쓸게요.. 사랑해요 github..

이름은 자유롭게 설정하고, Public Repository로 만들고, Add a README file에 체크를 해준다.

2. Github Token 생성

3. PicGo-Core라는 CLI 프로그램 설치

npm install picgo -g

4. PicGo에서 이미지 업로드 할 수 있게 세팅해주기

~/.picgo/config.json. 파일을 수정해주면 된다.

{
  "picBed": {
    "current": "github",
    "github": {
      "repo": "githubId/repositoryName",
      "token": "아까 발급 받은거",
      "path": "folderName", // 지정하지 않으려면 "/"
      "customUrl": "https://raw.githubusercontent.com/githubId/repositoryName/branchName",
      "branch": "branchName"
    }
  },
  "picgoPlugins": {}
}

나는 github에서 default branch는 main으로 설정해두고, branchName을 다른걸로 지정해서 조금.. 구석탱으로 숨겨봤다..!
어짜피 다 볼 수 있지만~ 조금 안정감 있는 느낌~

5. Typora 이미지 업로드 설정

cmd + , 를 눌러 설정창을 켜고, 좌측 '이미지' 메뉴 선택. 나머지 값들을 아래와 같이 세팅해준다.

아래에서 이미지 업로더에서 '커스텀 명령어'를 선택한다.

터미널에서 which picgo라고 쳐서 나온 위치를 따옴표 안에 넣어주고 upload를 붙여 Command 창에 추가해주면 된다.

이렇게 설정이 끝이났다!

이제 이미지를 Typora에 붙여넣으면 자동으로 깃헙에 올라가게된다!