옵시디언 무료로 퍼블리시하는 방법

옵시디언의 수많은 장점에도 불구하고, 단점 중에 하나는 노트의 내용을 공유하기 쉽지 않다는 점이다. 노트 하나만 공유하는 방법은 맨 아래 '참고 자료’에 있는 '옵시디언(Obsidian) 개별 노트를 퍼블리시(publish)하는 쉬운 방법’을 참고하면 된다. 하지만 이 방법은 폰트 등 스타일 적용이 안 되고 백링크, 그래프 표시가 안 된다. 블로그 형태의 퍼블리시라기보다 다른 사람과 노트를 일시적으로 공유하는 용도도 적합하다. 아래 방법은 **깃허브([GitHub](https://github.com/))**와 **[Digital garden Jekyll template](https://github.com/maximevaillancourt/digital-garden-jekyll-template)**을 이용해 **넷틀리파이([Netlify](https://www.netlify.com/))**에 퍼블리시하는 방법을 사용한다. 백링크가 연결되고, 옵시디언의 꽃인 그래프도 그려진다. 모두 무료이다. ### 1. 깃허브(GitHub)에서 계정 생성하기 아래 깃허브 사이트에서 무료로 계정을 생성한다. [GitHub: Where the world builds software · GitHub](https://github.com/) ### 2. Digital garden Jekyll template을 이용해 리파지터리 생성하기 **2-1. 아래 사이트에서 'Use this template'을 클릭한다.** [GitHub - maximevaillancourt/digital-garden-jekyll-template: Start your own digital garden using this Jekyll template 🌱](https://github.com/maximevaillancourt/digital-garden-jekyll-template) ![[Resources/secondbrain/assets/img/image-20220508140043.png]] **2-2. 원하는 이름을 넣고 리파지토리(Repository)를 생성한다.** 그러면, 리파지토리가 자신의 계정에 생성이 된다. ![[Resources/secondbrain/assets/img/image-20220508140122.png]] ### 3. 깃허브 데스크탑 설치하기 아래 사이트에서 GitHub Desktop을 설치한다. [GitHub Desktop | Simple collaboration from your desktop](https://desktop.github.com/) ### 4. 깃허브 데스크탑에서 로컬에 리파지토리 클론하기 **4-1. 화면에 보이는 'Add' 버튼이나 File -> Clone Repository을 통해 위의 GitHub.com에서 생성했던 자신의 리파지토리를 클릭하고 클론을 만든다.** ![[Resources/secondbrain/assets/img/image-20220508140612.png]] **4-2. 클론된 폴더 위치는 아래와 같이 해당 리파지토리에 오른쪽 마우스 클릭 후, Real in Finder로 확인할 수 있다.** (macOS 기준) ![[Resources/secondbrain/assets/img/image-20220508142458.png]] 분석맨은 iCloud에 옵시디언 노트를 저장하고 있어서 아래와 같은 폴더에 리파지토리가 위치한다. /Users/analysisman/Library/Mobile Documents/iCloud~md~obsidian/Documents/AnalysisMan/secondbrain ### 5. 넷틀리파이(Netlify) 사이트에서 계정 만들기 www.netlify.com 사이트에서 Sign up을 클릭하여 계정을 만든다. 깃허브 계정을 이미 만들었으니, GitHub 아이콘을 클릭하여 계정을 쉽게 만들 수 있다. ![[Resources/secondbrain/assets/img/image-20220508143138.png|500x450]] ### 6. 넷틀리파이(Netlify) 사이트에서 깃허브 리파지토리 import 하기 **6-1. 상단 메뉴의 Sites에서 Import an existing project를 클릭하여 깃허브에서 만든 리파지토리를 선택한다.** ![[Resources/secondbrain/assets/img/image-20220508143656.png]] ![[Resources/secondbrain/assets/img/image-20220508143756.png]] **6-2. 기본 설정은 변경하지 말고 하단의 'Deploy site'로 사이트를 만든다.** ![[Resources/secondbrain/assets/img/image-20220508144009.png]] **6-3. 아래와 같이 'Site deploy in progress' 메시지가 보이며, 약 2~5분 정도 시간이 걸린다.** ![[Resources/secondbrain/assets/img/image-20220508144324.png]] ### 7. 넷틀리파이(Netlify)에서 사이트 URL 생성 넷틀리파이(Netlify)에서 만들어진 사이트를 클릭하면 My digital garden - Welcome! 페이지가 보인다. ![[Resources/secondbrain/assets/img/image-20220508144636.png]] ![[Resources/secondbrain/assets/img/image-20220508144712.png]] ### 8. 사이트 이름 바꾸기 Site settings에서 Change site name을 클릭하여, 이름을 바꾼다. 사이트에 고유한 이름이라 없는 이름을 사용해야 한다. 분석맨은 이상하게 이름 타이핑이 안 되어 다른 편집기에서 이름을 복사/붙여넣기 했다. ![[Resources/secondbrain/assets/img/image-20220508145227.png]] ### 9. 자신의 도메인과 연동하기 자신만의 도메인(domain)을 가지고 있으면, 아래와 같이 도메인과 연동한다. **9-1. Add custom domain을 클릭 후, 자신의 도메인을 입력한다.** Site overview -> Domain settings -> Add custom domain을 클릭한다. ![[Resources/secondbrain/assets/img/image-20220508145650.png]] ![[Resources/secondbrain/assets/img/image-20220508145706.png]] 자신이 가지고 있는 도메인에 서브 도메인을 추가해 입력한다. ![[Resources/secondbrain/assets/img/image-20220508145930.png]] **9-2. Verify를 누르면, 이미 등록된 도메인이니 Add domain을 클릭하라고 나온다.** ![[Resources/secondbrain/assets/img/image-20220508150051.png]] **9-3. Check DNS configuration을 클릭하면, 도메인을 어떻게 지정할 수 있는지 방법을 알려준다.** ![[Resources/secondbrain/assets/img/image-20220508150216.png]] 아래와 같이 CNAME 레코드를 추가하라고 안내한다. ![[Resources/secondbrain/assets/img/image-20220508150257.png]] **9-4. 자신의 Domain Registra에서 CNAME 지정하기** 자신의 도메인을 등록해서 사용하는 서비스에서 아래와 같이 CNAME을 넷틀리파이(Netlify) 주소로 포인팅 시켜준다. Public DNS 서버로 전파(propagate) 되는데 시간이 걸릴 수 있다. ![[Resources/secondbrain/assets/img/image-20220508150959.png]] ### 10. 노트를 퍼블리시(publish) 하기 macOS는 아래와 같은 경로에 있는 \_notes 폴더에 퍼블리시하고자 하는 노트의 .md 파일을 넣어주고 **[GitHub Desktop](https://desktop.github.com/)**을 통해 Commit과 Push를 해준다. /Users/analysisman/Library/Mobile Documents/iCloud~md~obsidian/Documents/AnalysisMan/secondbrain ![[Resources/secondbrain/assets/img/image-20220508152425.png]] **10-2. My digital garden 첫 페이지 변경해보기** 첫 Welcome! 화면은 아래와 폴더의 index.md 파일에 있는 내용이 보여진다. /Users/analysisman/Library/Mobile Documents/iCloud~md~obsidian/Documents/AnalysisMan/secondbrain index.md 파일을 복사해서 index_org.md로 원본은 백업하고, index.md 파일을 수정해본다. 수정된 파일은 아래 스크린샷과 같이 +녹색 아이콘이 ·오렌지색 아이콘으로 바뀐다. ![[Resources/secondbrain/assets/img/image-20220508154643.png]] index.md 파일을 수정 후, GitHub Desktop에서 **Commit to master**를 클릭하고 **Push origin**도 클릭한다. ![[Resources/secondbrain/assets/img/image-20220508154747.png]] GitHub에서 보면 자신이 적은 내용으로 업데이트 됨을 확인할 수 있다. ![[image-20220519012814.png]] 이후, 네틀리파이(Netlify)에 아래와 같이 Building -> Processing -> Pubished의 과정을 거쳐 퍼블리시된다. ![[image-20220519013209.png]] ### 11. 디지털 정원(Digital Garden) 첫 페이지 첫 메인 페이지(\_pages 폴더의 index.md)를 편집기로 수정해 아래와 같이 올려보았다. [https://digitalgarden.analysisman.com](https://2ndbrain.analysisman.com/) (무료 퍼블리시 사이트는 digitalgarden 도메인으로 변경) [https://secondbrain.analysisman.com/](https://secondbrain.analysisman.com/) (도메인은 Obsidian Publish 유료로 변경) ![[image-20220519013320.png]] 첫 페이지에서 링크한 Digital Garden (\_notes 폴더의 Digital Garden.md) 페이지도 아래와 같이 수정했다. [https://secondbrain.analysisman.com/digital-garden](https://secondbrain.analysisman.com/digital-garden) -> [https://2ndbrain.analysisman.com/digital-garden](https://2ndbrain.analysisman.com/digital-garden) 로 변경. ![[image-20220519013411.png]] ### 12. 디지털 정원(Digital Garden) 그래프 아래와 같이 페이지 아래 부분에 옵시디언의 꽃인 그래프도 만들어져 있다. ![[image-20220519013430.png]] ### **▶ Git CLI Command** macOS에서는 GitHub Desktop 앱을 이용하지 않고 터미널 상에서 아래와 같은 명령어를 통해 Commit과 Push를 해도된다. git add * git commit -m "2022.05.08-Obsidian-notes_commit" git push -u origin master ### **▶ 이미지 표시 문제** Jekyll은 폴더 안의 이미지를 렌더링하지 않는다. 그래서 마크다운 형태로 표현한 것은 이미지 표시가 되지 않아 액박으로 나온다. 아래와 같이 HTML 형태로 선언해 주어야 한다. \<img src="/assets/img/image-name.png"/> ## 참고 사이트 분석맨 Obsidian Publish 유료 사이트: [https://secondbrain.analysisman.com](https://secondbrain.analysisman.com/) 분석맨 Digital Garden: https://2ndbrain.netlify.app/ = https://digitalgarden.analysisman.com/ 잔향님 Digital Garden: https://slowdive.netlify.app/ ## 참고 자료 [옵시디언(Obsidian) 개별 노트를 퍼블리시(publish)하는 쉬운 방법 — 잔향](https://slowdive14.tistory.com/1299848) [How to Set Up a Digital Garden With Obsidian For Free - YouTube](https://youtu.be/kg-9n_A4Tf0) ## 연결 문서 [[_Index_1_Obsidian]] [옵시디언 퍼블리시 무료로 하는 방법 | 분석맨의 '상상력'](https://kr.analysisman.com/2022/05/obsidian-publish-free-git.html)