[Obsidian] 옵시디언 노트를 Netlify로 정적 호스팅해보자

✌️개요

---

옵시디언을 잘 사용하고있는데

여러 플러그인과 테마를 쓰면 보기에도 참 좋다.

 

코드블록이라던가... 콜아웃이라던가...

옵시디언에서 글을 작성하고 그대로 티스토리에 올리기도 하는데

당연히 저런건 티스토리로 넘어오면 이상하게 보인다.

 

그래서 블로그 자체를 옮기는건 빡쎄더라도 옵시디언 모습 그대로 호스팅할 수 있으면 얼마나 좋을까... 생각하다가

좋은 방법을 찾아서 메모한다.

 

🔥본문

---

 

📌옵시디언 Export

---

우선 옵시디언에서 html로 export하기 위해 플러그인을 설치해야한다.

https://github.com/KosmosisDire/obsidian-webpage-export 이 플러그인인데 옵시디언에서 커뮤니티 플러그인에서 설치하면 된다.

하지만 지금 1.7.3 릴리즈 버전에 버그가 있어서 나는 리포지토리에서 베타 릴리즈를 설치했다.

 

 

그리고 옵션에 들어가서 이것저것 설정해주자

파일트리를 보여줄것인지, 검색창을 보여줄것인지, 사이드바를 접을 수 있게 할건지 그리고 중요한 포함시킬 플러그인CSS를 고를 수 있다.

하지만 포함시켜도 완벽 호환이 되지 않는 플러그인들이 많긴하다.

그래도 이거라도 어디야...

 

그리고

• 컨트롤+P를 눌러 html을 검색하고 "Set html export settings"를 선택한다.
• export할 노트들을 선택한다.
• Export Mode는 Online Web Server를 선택한다.
• 그리고 Export

 

후술하겠지만 index.html파일이 필요하다.
직접 html 빈 파일을 만들어도 되지만 나는 index라는 빈 노트를 만들어서 index.html로 export했다
만든 index.html은 제일 루트에 있어야한다.

 

그러면 이제 깃허브 저장소를 하나 만들어서(저장소 이름은 자유) 만들어진 파일들을 push하자

저장소는 private여도 상관없다.

 

 

📌호스팅 준비

---

그리고 이제 호스팅을 준비해야한다.

정적 호스팅 서비스는 Netlify(https://www.netlify.com/)를 사용했다.

깃허브 Pages도 무료고 좋을거같긴했지만

 

깃허브 Pages는 url이 [ https://사용자이름.github.io/저장소이름/]으로 고정되는게 싫었다

Netlify는 [커스텀].netlify.app 이렇게 만들어진다.

 

Netlify가입은 다루지않겠다 이미 가입해버려서...

github연동으로 가입해주고 팀도 생성하고 여차저차 들어가면 대시보드가 나온다.

요런화면

 

"Sites"메뉴 ➡️ Add new site ➡️ Import an existing project ➡️ Deploy with GitHub로 진행한다.

 

그러면 깃허브 저장소를 고르는 화면으로 넘어간다.

아까 새로 만든 저장소를 선택하자 (스샷 생략)

 

선택하고 나면 이렇게나 많은걸 설정하라고 한다.

하지만 당황할 것 없다

보여주기만하는 정적 웹사이트니까

 

전부 공란으로 둔다

그리고 Deploy를 진행한다.

 

그러면 이렇게 사이트 대시보드가 생기고

알아서 뚝딱뚝딱 첫 배포를 진행해줄것이다

 

Deploys메뉴나 대시보드의 Production deploys에 Published 딱지가 뜨면 배포가 완료된것이다.

 

접속할 주소는

Site configuration ➡️ General ➡️ Site details ➡️ Change site name을 누르면 확인할 수 있고,

여기서 주소도 바꿀 수 있다.

상술했듯이 [커스텀].netlify.app 이렇게 만들어진다.

 

📌접속!

---

접속해보자!

접속하면 내 옵시디언 모습 그대로 예쁜 노트가 보인다.

 

 

📌하.지.만!

---

이 글을 보고 따라하는 사람이 있다면 

처음 웹에 접속했을 때 억지로 넣은 index.html이 보이는게 맘에안들것이다.

나도 그랬다 정말 꼴보기싫었다.

 

하지만 필수라서 index.html을 빼면 배포에서 에러가난다.

열심히 찾아보니 리다이렉트 설정을 해줄 수 있었다.

 

netlify.toml파일을 아래처럼 만들자

 
  [[redirects]]
  from = "/index.html"
  to = "/원하는경로/원하는파일.html"
  status = 200
  force=true

[[redirects]]
  from = "/"
  to = "/원하는경로/원하는파일.html"
  status = 200
  force=true

이 파일을 루트에 넣고 새로 push를 하면 자동으로 배포를 다시 진행해준다.

그리고 접속을 해보면 루트url로 접속하든 /index.html로 접속을 하든

설정한 원하는 파일로 리다이렉트가 되는것을 확인할 수 있다.

 

🍎결론

---

이제 옵시디언을 나만의 정적 웹사이트로 배포할 수 있게됐다!

다만 업데이트를 할려면 절차가 좀 있긴하다.

 

옵시디언 html export ➡️ git push 를 거쳐야한다

그래서 블로그로서 쓰기엔 좀 불편할것 같고... 나중에 포트폴리오를 구성하거나 하면 재밌을것같다.

끝

 

🔗참조

---

 

netlify 배포하기 위한 Redirects 설정

 

정적 컨텐츠 호스팅 서비스 Netlify에 대해 알아보자.