Obsidian을 무료로 발행해보자! (feat. Quartz, Cloudflare)

Obsidian의 퍼블리싱 즉 발행은 누구나 들어올 수 있는 사이트에 Obsidian을 통해 작성한 Markdown을 웹사이트 형식으로 보여줄 수 있도록 하는 것입니다. 그래서 웹사이트 형태로 보여주도록 도와줄 녀석과 그 결과를 세상에 공개시켜줄 녀석이 필요합니다.

---

Quartz

Obsidian으로 작성한 Markdown 파일들을 웹사이트 형태로 만들어주는 도구

 

Quartz를 내 Github Repository에 불러오기

이 블로그에는 Github의 가입 방법과 기본 개념에 대해서는 다루지 않겠습니다.

https://github.com/jackyzha0/quartz

GitHub - jackyzha0/quartz: 🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully fun

 

Quartz의 github repository를 들어가면 위 오른쪽에 `Use this template` 버튼이 있습니다. 이걸 누른 후 `Create a new repository`를 누릅니다.

 

그러면 사용할 Repository 이름을 정한 후 생성하시면 됩니다.

 

 

그 후 생겨난 나의 Repository에서 `<>Code`버튼을 누른 후 나오는 url링크를 복사하는 버튼을 클릭해놓습니다.

---

로컬에 Quartz 불러오기

이제 블로그를 작성해나가면서 생길 파일들을 저장할 공간을 지정해야합니다.

 

그리고 터미널이나 CMD를 켜신 후 해당 공간으로 이동하여 아래 명령어를 입력해줍니다.

복사한 링크는 바로 위에 `<>Code`를 눌렀을 때 나왔던 링크입니다.

git clone 복사한링크

 

그럼 이제 Repository 그대로 내 컴퓨터에 파일들이 생깁니다.

---

Obsidian으로 로컬의 Quartz를 읽기

Obsidian을 켠 후 보관소 폴더 열기 쪽의 `열기`버튼을 클릭합니다.

그 후 방금 막 clone한 폴더를 클릭하여 열어줍니다.

 

그러면 왼쪽의 파일 구조가 아래와 같이 되어있습니다.

우리는 여기서 content폴더에 쓸 글들을 추가할 것입니다.

---

index.md 추가하기

index.md란 사이트 딱 들어갔을 때 기본으로 나올 내용이 들어있는 파일입니다. 이걸 만들어줘야 배포했을 때 메인 사이트에 뭐라도 뜨게 됩니다.

 

content 폴더를 클릭하여 new note를 누른 후 제목을 index로 지어준 후 저는 아래와 같이 내용을 추가했습니다.

---
title: KIMBOB의 개발 블로그에 오신것을 환영합니다!
---
🚧🚧이사중입니다~🚧🚧

 

맨 위에 ---와 ---사이에 들어오는 내용들은 meta data란 것으로 일단 간단히 title을 지정하면 해당 사이트에 들어갔을 때 웹의 title이 해당 내용으로 바뀝니다. (안하면 그냥 파일명 따라서 index라고 뜨더라구요)

 

그 후 변경사항을 github에 적용시켜야 하니 터미널 혹은 CMD를 우리가 방금 받은 Repository폴더 안으로 들어가주시고, 아래 명령어들을 쳐주시기 바랍니다.

git add .
git commit -m "쓰고싶은말"
git push

---

Cloudflare

자동으로 Repository에 변동이 있을 때 마다 빌드해서 배포해주는 기능을 해주고 서버도 무료로 사용 가능. 적절한 도메인도 준다.

 

Cloudflare에 Github 연동하기

우선 Cloudflare를 가입하셔야합니다. 각자 알아서 잘 하실거라 믿습니다!

Cloudflare 홈 화면에 가시면 해당 부분을 클릭하여 주세요.

 

Pages 탭부분에서 Git에 연결이라는 버튼을 눌러주세요. 그 후 저희가 방금 세팅한 Quartz를 가져온 레포지토리를 선택해주시면 됩니다.

 

그다음 나오는 이 화면에서 설정하게 되는 프로젝트 이름은 우리 블로그의 url 시작부분을 담당하게 될 것입니다. 그래서 신중하게 정해주시고, 분기는 v4로 설정해주시면 됩니다.

 

그리고 빌드 설정은 빌드 명령어는 npx quartz build 그리고 빌드 출력 디렉터리는 public으로 설정해줍시다.

 

그렇게 되면 이제 github에 파일 변동이 있을 때 마다 자동으로 빌드를 하여 변경사항을 우리의 블로그에 적용해주게 됩니다.

 

잘 되었는지 확인하기 위해 배포 상태에 초록 체크가 뜨면 우리의 도메인으로 들어가봅시다!

 

사이트가 잘 뜨는것을 확인하실 수 있습니다!

 

다음에는 사이트의 이름을 바꾸는 법이랑 기타 다른 설정들을 하는 법을 정리해보겠습니다.