1. Digital Garden 플러그인을 이용한 웹 페이지 퍼블리싱

옵시디언의 커뮤니티 플러그인 Digital Garden을 활용할 것이다. 아래 플러그인을 다운받아 주자.

플러그인을 다운 받고 옵션으로 들어가면 최상단에 아래와 같은 문구와 링크가 걸려있다.

이 플러그인을 이용한 웹 페이지 퍼블리싱 튜토리얼이 소개되어 있는데, 해당 방법대로 했을때 Vercel을 이용해서 퍼블리싱 하게 되는데, 문제가 하나 있다.
문서 이름에 특정 문자가 포함될 경우 사이트가 문서가 정상적으로 퍼블리싱 되지 않는다는 것이다.(나의 경우 C++ 에서 '+'가 경로에 포함될 경우 오류가 발생했다)
따라서 이 튜토리얼을 응용해서 Netlify 로 웹을 퍼블리싱 하는 방법도 아래에 소개한다. 나는 Vercel과 Netlify 둘 다 퍼블리싱 한 상태이다.

1.1. Vercel을 이용한 퍼블리싱

일단 깃허브를 통해 저장소를 생성하자.

https://github.com/oleeskild/digitalgarden
위 저장소를 들어가면 아래와 같은 버튼을 볼 수 있다.

Deploy 버튼을 눌러 Deploy해 준다.

아래와 같은 창이 나오면서 깃허브에 저장소와 Vercel의 프로젝트를 자동으로 생성해 준다. 저장소 이름을 설정해 준다. 소문자와 '-'만 사용할 수 있다. 나는 digital-garden 이란 이름으로 만들었다.

이제 플러그인 설정으로 와서 아래 칸을 채워 준다. repo name은 방금 생성한 저장소 이름을 넣어주고, 깃허브 유저네임, 토큰을 입력해 준다. 토큰은 인터넷에서 찾아보면 자세히 나와 있다.

제대로 입력하면 X표시가 체크표시로 바뀌게 된다.

그리고 한가지 더 중요한 옵션이 있는데 Slugify Note URL 설정을 꺼준다. 영어 해석을 읽어보면 알겠지만, 노트의 제목이 영어가 아닌 경우 비활성화 하라는 경고가 있다. 참고로 사용해 보았을때, Vercel은 오류가 발생하지만, Netlify에선 발생하지 않았다. 그래도 Netlify만 사용하더라도 일단 비활성화 하는 것을 추천한다.

이렇게만 해도 Vercel에 웹을 퍼블리싱 할 수 있다.
퍼블리싱 할 노트에 속성을 추가해 주어야 한다.
노트에 들어가서 가장 최상단줄에

---

를 입력하면 자동으로 속성테이블이 생긴다.

여기서 두가지 옵션을 사용할 수 있다.

dg-publish
dg-home

dg-publish는 해당 노트를 웹에 퍼블리싱 할 것 인지를 결정하고, dg-home은 웹 사이트의 홈을 설정하는 것이다. 당연히 하나만 설정해야 한다. 나는 README 파일을 홈으로 설정했다.

이제 좌측 탬에서 아래 아이콘을 클릭하면 웹페이지에 퍼블리싱 할 수 있다.


위와 같이 퍼블리싱할 노트를 선택해서 퍼블리싱하면 된다.

Vercel의 프로젝트에서 밑줄친 도메인을 클릭하면 페이지로 이동할 수 있다.

1.2. Netlify를 이용한 퍼블리싱

일단, Vercel을 이용한 퍼블리싱에 성공했다고 가정을 한다. 그 과정에서 만든 깃허브 저장소가 필요하다.

일단 Netlify에 접속해서 로그인을 했다고 가정한다.

Import an existing project를 클릭해서 새 프로젝트를 만들어 준다. 나는 이미 만들어져 있기 때문에 위와같은 창이 나오지만, 아무 프로젝트가 없을 경우 가장 중앙에 프로젝트 생성 버튼이 있을 것이다.

깃허브를 선택하고, 저장소를 선택해 준다.


그리고 다른 설정은 필요하다면 하고, Project name 은 꼭 입력하자. 도메인 주소에 포함될 이름이다.

그리고 아래 버튼을 눌러 Deploy해준다.

정상적으로 생성되면 아래와 같은 프로젝트를 확인할 수 있고, 마찬가지로 밑줄 친 주소가 내 도메인 주소다.