1 목표
- 옵시디언으로 작성한 결과물을 포트폴리오 또는 블로그 운영을 위해 쓰는 방법에 대해 학습합니다.
- Nodemon과 shellscript를 이용해 obsidian내용을 빠르기 quartz로 옮기는 방법을 학습합니다.
2 준비물
3 옵시디언
3.1 옵시디언이란?
노션의 업그레이드 판 정도로 해석가능함. 실제 문법은 markdown을 통해 이루어짐. Notion에 비해 문서 간 연결 기능이 잘 구성되어 있는 것이 장점이라고 볼 수 있음
위 그림처럼 각 문서간 연결관계를 표시할 수 있음. 아직 좀더 테스트를 해봐야 하지만, 문서 안에 일일이 정리를 해야하는 점은 다소 불편할 수 있음. 자신이 적은 지식이 하나의 자산이되고, 이를 바로 포트폴리오 화 할수 있을 것으로 예상함.
3.2 설치방법 및 Vault설정
설치링크를 통해 설치 가능함. Vault는 하나의 저장소라고 볼 수 있음. 본인이 원하는 이름의 Vault를 만들면 됨. Mac유저의 경우 iCloud에 올리면 모바일 앱을 통해 모바일에서 수정 할 수 있음. Remote vault라는 기능은 있던데 제대로 작동하지 않아 사용하지 않음 Vault의 위치는 자유롭게 할 수 있으나, 생성시 iCloud에 만들면 됨. 방법은 크게 어려운점은 없을거 같아 따로 적지 않음
설치 후 iCloud로 가게되면 위와같이 하나의 Vault가 생성된 것을 볼 수 있음.
4 Quartz4
웹페이지 만드는 프레임워크 중 하나로 보임. Fork 수가 많고 Obsidian 기능 중 Graph View를 무리없이 재활용 가능해보여 선정함. 사용방법은 공식 문서에 설명되어 있음. 관련 경험이 없다면 다소 어려울 수 있음. 여기서는 Minimal하게 작동하는 케이스만 설명함.
4.1 설치 방법
git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create위 구문을 뜯어보면 다음과 같다.
git clone https://github.com/jackyzha0/quartz.gitquartz의 git repo에서 다운로드를 받는다
cd quartzrepo를 다운로드 받으면 하위폴더가 생기는데, 이 위치로 이동한다
npm i이 커맨드 때문에 준비물에서 node.js 또는 nvm을 설치해야 했던 것
npx quartz createnpx에 대해서는 아직 내가 설명할 수 없다. 나중에 설명할 수 있기를. 설치할 때 알아들을 설정들이 나올텐데 두 설정에서 가장 위에있는 것들을 누르면 되었다.
4.2 로컬 테스트
로컬 테스트는 빠르게 변경한 내용을 참조하기 위해 사용함. 웹에 배포시 한번 커밋마다 최소 10초 이상 소요되기 떄문임.
npx quartz build --serve위 커맨드를 이용하면 로컬 서버가 열리고, 그 위에 해당 웹페이지가 표현된다.
4.3 옵시디언 파일 붙여넣기
옵시디언과 quartz4 연동하는 핵심 방법은 옵시디언안에 있는 md 파일들을 그대로 quartz4의 content폴더에 넣으면 된다. 비교를 위해 나의 iCloud의 파일들을 보면 아래와 같다.
파일 순서가 조금 차이가 있지만 기본적이 내용은 동일함을 볼 수 있다. 이제 내용을 바꿀때마다, iCloud의 Vault 내용물을 quartz에 옮겨주기만 하면 된다. 이런 작업을 항상 수작업으로 할 수 없으니 자동으로 바꿔줘야 한다. 해당 내용은 5 옵시디언 - Quartz4 자동화에서 다룬다
4.4 온라인 설정
Github page 호환성
quartz4에서 권장하는 사항은 cloudflare로 배포하는 방법이기 때문에 cloudflare를 중심으로 다룬다. 현재 설정에서 github page는 제대로 작동하지 않는 오류가 존재한다.
4.4.1 Github
깃허브의 경우 quartz4를 fork하면 된다. fork시 내 repo에 들어오는 이름은 크게 신경 쓸 필요 없다. 추후에 변경도 가능하고, cloudflare로 넘길때 크게 상관없는 부분으로 보인다.
4.4.2 Cloud flare
Worker & Pages > Create application > pages > Connect to git 순서로 진행한다.
그리고 진행 중 내용을 입력해야 하는데 다음과 같이 입력한다
생소해서 다소 어려워 보일 수 있지만 생각보다 쉽게 만들 수 있다. 여기까지 했다면 별 무리없이 페이지가 만들어 졌을 것이다.
5 옵시디언 - Quartz4 자동화
위와같이 하면 매번 obsidian을 작성할때마다 복사 / 붙여넣기를 해야하는 번거로움이 존재한다. 이를 해결하기 위해서는 파일 내용 변화 감지 기능이 필요하다. nodemon이라는 npm 패키지를 이용하는 방식과 fswatch라는 shell 패키지(?)를 사용하는 방법이 있다. 두 방법을 소개하며, 개인적으로는 nodemon을 더 추천한다
5.1 fswatch
현재 이 방식은 content 내부를 지우고 obsidian 안의 내용을 복사하는 방식이다. 그렇기 때문에 content에 원본 파일이 있을 시 삭제 되니 유의해야한다. 또한 fswatch를 이용하면 한 커맨드가 여러번 작동되어
npx quartz build --serve쪽 프로세스가 꺼지는 현상이 있다.
5.1.1 설치방법
mac은 당연히 brew를 통해 설치할 수 있다
brew install fswatch5.1.2 자동화 커맨드
우리가 하는 작업은 다음과 같은 단계를 거치게 된다
- 만약 파일 내용이 변경되면(fswatch가 해주는 일)
- 기존 폴더의 중복되는 내용을 삭제하고
- obsidian vault의 내용을 복사한다
2,3번에 해당하는 삭제 및 복사 커맨드는 다음과 같다. 이 커맨드 이름을 rmmv.sh라고 하겠다
#!/bin/bash
echo "changed";
rm -rf your_quartz_upper/quartz/content/*;
cp -R your_vault_on_icloud/* your_quartz_upper/quartz/content/;위에 quartz의 content 위치와 본인의 obsidian valut위치를 넣으면 된다. 가령 나의 경우 아래와 같다.
#!/bin/bash
echo "changed";
rm -rf ~/Documents/2023/quartz/content/*;
cp -R ~/Library/Mobile\ Documents/iCloud~md~obsidian/Documents/MyFirstVault/* ~/Documents/2023/quartz/content/;위 내용을 복사한 sh파일을 만든 후 꼭 권한을 설정해 줘야한다. 즉, 아래의 커맨드를 한번 더 실행해줘야한다
chmod +x rmmv.sh최초 파일이 생성될때 execution 권한이 설정되어 있지 않기 때문에 생긴 문제로 보인다.
이제 위 내용을 fswatch와 연동해주면 된다. icloud의 vault에서 변경이 생기면 동작이 이뤄지게 했기 때문에 아래와 같은 커맨드를 만들게 된다. 나는 이 파일을 watch.sh라고 이름 지었다
#!/bin/bash
fswatch your_vault_on_icloud/ | xargs -n 1 ~/Documents/2023/quartz/rmmv.sh내 파일 구조상 예시는 아래와 같다.
#!/bin/bash
fswatch ~/Library/Mobile\ Documents/iCloud~md~obsidian/Documents/MyFirstVault | xargs -n 1 ~/Documents/2023/quartz/rmmv.sh위와 마찬가지로 실행 권한을 넣어주면 끝난다.
chmod +x watch.sh이후 커맨드창 하나를 띄워서 해당 파일이 있는 위치로 간 후 ./watch.sh를 실행시키면 계속 동작하게 된다
5.2 Nodemon 사용방법
노드몬은 원래 node.js 기반 앱을 만들때 자동으로 파일변화를 감지해서 서버를 재시작 해주는 라이브러리다. 그러나 global로 깔게되면 하나의 커맨드로 이용할 수 있다.
fswatch보다 높은 안정성
테스트 해본결과, fswatch보다 안정성이 좀더 좋은것으로 보임. 즉, fswatch에서는 로컬서버가 끊기는 현상이 잦았지만 nodemon을 이용시 상대적으로 적은것을 볼 수 있었음
5.2.1 global 설치
설치시, 바로 커맨드 창에서 접근할 수 있도록 global option을 이용해 설치해야한다. 방법은
npm install -g nodemon5.1.2 자동화 커맨드에서 rmmv.sh를 그대로 쓰면 된다. 그럼 노드몬을 설정하는 방법을 아래 적어본다
#!/bin/bash
nodemon -w ~/Library/Mobile\ Documents/iCloud~md~obsidian/Documents/MyFirstVault -x "~/Documents/2023/quartz/rmmv.sh" -e md,html,js,scss,xmlnodemon의 경우 -w 뒤에 변화를 감지할 폴더위치, -x 뒤에는 변화 감지시 실행할 프로그램, -e뒤에는 해당 폴더에서 신경쓸(?) 확장자를 뜻한다. 즉 해당폴더에 해당 확장자가 변화되면 커맨드를 실행하는 방식이다. 나는 위 커맨드를 nodeWatch.sh라고 저장했다. [[#51-fswatch|5.1 fswatch]]에서 다룬 것 처럼, sh파일에 최초로 권한 설정을 해줘야 하기 때문에 아래와 같이 지정해준다
chmod +x nodeWatch.sh성공적으로 설정했다면 매번 옵시디언을 변경할때 마다 nodemon이 작동하는 것을 볼 수 있을 것이다.
