👻 Obsidian 정적호스팅 CICD 과정

#프로젝트 #개발 #Hosting #Obsidian #CI/CD

개요

먼저 옵시디언(Obsidian)에 대한 정보를 확인하고 싶다면.

→ 여기로 🎵 Obsidian

정보!

현재 보고있는 해당 사이트는 Obsidian앱의 지속적인 통합(CI), 지속적인 배포(CD)를 구현한 사이트이다.

아주 기본적인 셋팅이므로, 이후 커스텀은 각자의 취향대로 진행하면 될 것이다.
WAS가 아닌 WEB 정적 호스팅을 위한 셋팅이다.

목차

1. 지속적인 통합

1.1 옵시디언과 Git 연동

1.2 Git자동 통합 셋팅

2. 지속적인 배포

2.1 옵시디언 배포파일 생성/배포

2.2 Netlify와 Git 연동

3. 배포 확인

1. 지속적인 통합

1.1 옵시디언과 Git 연동

옵시디언 파일을 생성하면, 다음과 같은 화면을 볼 수 있다.

Pasted image 20250218151731.png Pasted image 20250218151806.png

이후 해당 위치에 Git을 생성해 줄 것이다.

Git repository 생성하기

Pasted image 20250218152044.png Pasted image 20250218152103.png

옵시디언과 Git 레포 연동하기

이전 생성한 옵시디언 폴더로 이동한다.

> cd C:\이하경로\obsidian\TEST

Pasted image 20250218153131.png

깃 파일 생성 해당 과정전 pc에 Git이 설치되어 있어야한다. (방법은 알아서)

> git init

Pasted image 20250218153319.png

깃 레포에 연결

> git remote add origin https://github.com/LeeTaeSung0628/obsidian_Test.git

Pasted image 20250218153445.png

옵시디언 레포에 올리기

> git add .

> git commit -m "initial commit"

> git push -u origin master

Pasted image 20250218153543.png Pasted image 20250218153553.png

여기까지 따라왔다면, 옵시디언 파일을 git 레포지토리에 저장하는 것 까지 마칠 수 있다.

1.2 Git자동 배포 셋팅

이전에 생성한 옵시디언 app에서 Git플러그인을 설치한다.

Pasted image 20250218151330.png

옵시디언의 Git플러그인이다. 기본적인 커밋 푸시 및 셋팅이 가능하다.

기능은 제한적이기 때문에, GitDesktop이나, Cmd에서 직접 Git을 셋팅하는것을 추천한다.
이후 셋팅이 완료되었을 때 배포 자동화를 위해 사용하면 편리하다.

설치후 플러그인 셋팅 → 깃 디렉토리를 설정해주자.

Pasted image 20250218153814.png Pasted image 20250218153858.png

이전에 생성한 깃 파일의 주소가 들어가면 된다.

C:\Users\경로\obsidian\TEST\.git

연결이 완료되면 우측에서 변경사항 및 간단한 커밋/푸시/풀 동작이 가능하다.

Pasted image 20250218154352.png

또한 설정에서 오토 커밋/푸시/풀 설정을 통해 지속 적인 통합 셋팅이 가능하다.

주의

해당 디렉토리에 .gitignore 파일 및 세부적인 git셋팅은 자유롭게 진행하면 된다.
옵시디언은 캐쉬파일로 인한 충돌이 잦기 때문에 상세히 설정하는 것을 추천한다.

푸시 테스트

Pasted image 20250218154615.png Pasted image 20250218154633.png

정상적으로 푸시 완료.

2. 지속적인 배포

2.1 옵시디언 배포파일 생성/배포

해당 Git 레포는 옵시디언의 마크다운(md파일)자체를 저장하고 관리하는 레포다.
정적 컨텐츠 호스팅을 위한 레포지토리를 추가적으로 생성하여 줄 것이다.

옵시디언 배포파일 생성하기

여러 방법이 있지만, md파일을 기반으로 배포가능한 형태의 HTML파일을 생성해주는 플러그인을 사용할 것이다.
다양한 옵션을 지원하지만, 오늘은 기본적인 기능만 설명하겠다.

Control + P -> export 를 검색

Pasted image 20250218160328.png Pasted image 20250218160359.png

폴더 생성 후 익스포트 한다.

주의

이때 처음엔 index페이지를 생성하고, 추후 삭제하는 것을 추천(Netlify는 index가 필수)

Pasted image 20250218160428.png Pasted image 20250218160532.png

생성한 새 디렉토리에 정상적으로 생성된것을 볼 수 있다.

이렇게 생성한 배포용 파일은 `1. 지속적인 통합`과 같은 방법으로 깃에 올리면 된다.

배포용 HTML파일 레포지토리

2.2 Netlify와 Git 연동

Netlify 정적 호스팅 서비스를 사용하여 Git 레포를 배포하겠다.

https://www.netlify.com/

위 사이트로 접속하여 로그인 한 후, 깃 레포에 Netlify서비스를 적용한다.

깃허브를 선택한다.

Pasted image 20250218161424.png

배포용 옵시디언 레포를 선택한 후, SAVE를 누른다.

Pasted image 20250218161515.png

site_name을 설정하고 Deploy를 누른다.

Pasted image 20250218161728.png

정적웹사이트를 위한 셋팅으로 이외의 값은 공란으로 두어도 무방하다.

그리고 기다리면...

Pasted image 20250218161824.png

Pasted image 20250218161847.png

3. 배포 확인

배포가 완료되고, 주소를 입력하여 확인이 가능하다.

Pasted image 20250218161937.png

이후 해당 사항들은 자유로운 커스텀이 가능하다.

커뮤니티 플러그인
인덱스페이지
테마
etc..

참고사항

본인의 경우에는 로컬 Obsidian에 민감정보를 포함하고 있으므로, 정적 호스팅 전, public한 Vault 레포지토리를 거쳐 배포되도록 관리하고 있다.

Pasted image 20250218162355.png

좌 : 프라이빗 볼트 / 우 : 퍼블릭 볼트

최종

이렇게 사이트 배포가 완료되었다!

+ 추가

주의

현재 Export HTML 1.8.01 버전 기준으로 export된 HTML css에 오류가 있다.

BRAT 플러그인을 사용하여 버전 업(베타) 하여 해결 Pasted image 20250219154331.png Pasted image 20250219154315.png