dev/null

기타) 깃 블로그 이사하기 - 깃블로그+Obsidian - Quarts, Github Action

10 min read

최근 Obsidian에만 정리를 해오고, 블로그를 잘 안썼다.

그 이유는

  • 블로그와 옵시디언의 차이점
    1. 같은 마크다운 기반의 텍스트 작성이지만
      • 링크 기능
      • 표 그리기
      • 그 외 자잘한 것들
    2. 디렉토리 구분의 차이점

등의 차이점들이 너무 불편했… 사실 변명이다.

하지만 변경이 아닌 단 하나는 링크 기능. 한 번 옵시디언의 링크를 체험하면 마크다운에서 절대경로를 일일히 작성하는건 너무 불편하다.

그렇다고 옵시디언 유료, 옵시디언 전체 공개 등은 번거롭기도 하고 불편하기도 하고.. 그래서 블로그 엔진 중 옵시디언과 유사한 녀석들을 찾아봤고, 엄청난 유튜브를 봤다. 샘플 페이지(저분 블로그) / 퍼블리싱 샘플을 보면 내가 원하던 기능이 모두 있는 것을 볼 수 있다.

재밌겠다. 해봐야지.

블로그 이사

00. 환경

25.05.07 작성일 기준 최신 버전 → v4

현재 Quarts.v4 가 최신 릴리즈 버전이어서 v4를 기준으로 작성한다.

1. Quarts 설치

초기 설정

로컬에다가 Quarts의 사본을 저장하자. 일단 이름은 알아보기 쉽게 QuartsV4 로 정했다.

git clone https://github.com/jackyzha0/quartz.git QuartsV4
 
cd QuartsV4

이후 Quarts에 필요한 녀석들을 확인하자. 없으면 다운받고

 
node -v <- 20 이상 필요
npm -v  <- 9.3.1. 이상 필요

종속성 추가

종속성 추가는 시간이 꽤 걸리니 배터리가 넉넉할 때 해두기…

npm i
kimeu@KEC-Win11 MINGW64 /d/0000_github/QuartsV4 (v4)
$ npm i
 
added 519 packages, and audited 520 packages in 1m
 
176 packages are looking for funding
  run `npm fund` for details
 
found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 10.9.0 -> 11.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.3.0
npm notice To update run: npm install -g npm@11.3.0
npm notice

오 깔려만 있으면 알아서 업데이트도 해주는구나

새 Quarts 시작 하기

npx quartz create

그럼 디렉토리 콘텐츠 초기화 방법을 선택하랜다

kimeu@KEC-Win11 MINGW64 /d/0000_github/QuartsV4 (v4)
$ npx quartz create

T   Quartz v4.5.0
|
*  Choose how to initialize the content in `D:\0000_github\QuartsV4\content`
|  > Empty Quartz
|    Copy an existing folder
|    Symlink an existing folder

마침 Empty Quartz 로 선택됐네.

그 다음

o  Choose how to initialize the content in `D:\0000_github\QuartsV4\content`
|  Empty Quartz
|
*  Choose how Quartz should resolve links in your content. This should match
Obsidian's link format. You can change this later in `quartz.config.ts`.
|  > Treat links as shortest path ((default))
|    Treat links as absolute path
|    Treat links as relative paths
—

이건 Obsidian 링크 처리 방식에 따라 다르다고 한다. Default는 가장 짧은 경로를 사용하므로 나중에 변경할거 아니라면 ~ shortest~를 선택하겠지만..

나는 이미 Obsidian을 사용 중이고 내 Volt는 뭔지 궁금해서 찾아봄

오 이미 ~short~ 였구나. 맘놓고 선택해도 되겠군.

그리고 아래 메시지가 나오면 성공!

o  Choose how to initialize the content in `D:\0000_github\QuartsV4\content`
|  Empty Quartz
|
o  Choose how Quartz should resolve links in your content. This should match
Obsidian's link format. You can change this later in `quartz.config.ts`.
|  Treat links as shortest path
|
—  You're all set! Not sure what to do next? Try:
  • Customizing Quartz a bit more by editing `quartz.config.ts`
  • Running `npx quartz build --serve` to preview your Quartz locally
  • Hosting your Quartz online (see: https://quartz.jzhao.xyz/hosting)

이 메시지를 따라가기보단 일단 Git 설정 먼저 하자

2. Github 레파지토리 설정 - 수정

공식 설명서에서는 새로운 레파지토리 생성 → GitHub Action를 활성화 하는 과정으로 나오지만, 나는 이미 기존 블로그가 있어서 굳이 새로 만들진 않고 원래 있던 녀석을 수정했다.

레파지토리 리모컨 초기화

일단 쿼츠 레파지토리와의 리모컨을 제거하기 전 확인한다.

git remote -v

origin  https://github.com/jackyzha0/quartz.git (fetch)
origin  https://github.com/jackyzha0/quartz.git (push)
upstream        https://github.com/jackyzha0/quartz.git (fetch)
upstream        https://github.com/jackyzha0/quartz.git (push)

origin에서 fetch와 push 두 개, upstream도 동일한 두 개가 나온다. 이제 origin 리모컨을 삭제한다.

git remote rm origin

그럼 아래와 같이 나옴

$ git remote -v
upstream        https://github.com/jackyzha0/quartz.git (fetch)
upstream        https://github.com/jackyzha0/quartz.git (push)

기존 레파지토리 연결

그 후 연결할 레파지토리로 설정.

git remote add origin [연결 할 레파지토리 주소]

git remote add origin https://github.com/KimEC995/KimEC995.github.io.git

확인하면

$ git remote -v
origin  https://github.com/KimEC995/KimEC995.github.io.git (fetch)
origin  https://github.com/KimEC995/KimEC995.github.io.git (push)
upstream        https://github.com/jackyzha0/quartz.git (fetch)
upstream        https://github.com/jackyzha0/quartz.git (push)

이렇게 나오는데, origin의 리모컨이 연결한 레파지토리의 리모컨과 동일하다면 성공!

변경 사항 동기화 설정

npx quartz sync --no-pull

좀 걸린다.

맨 아래 Done! 이 나오면 성공.

확인

한번 테스트로 이미 있던 README.md를 수정해봤다.

vi README.md

저장하면…

오 따로 push안했는데 자동으로 되네. 편하다.

3. Obsidian 설정

좋아 이제 블로그 꾸미기 시작할까. 물론 이 글도 Obsidian에서 작성 중이지만, 업로드용은 다른 모양새로 만들자.

Obsidian 시작

새 Volt 오랜만에 만드는듯?

새로 생성한 레파지토리의 content 안에 넣자

음.. 오랜만이군…

플러그인 설치 및 관리

이 때 플러그인 설치 및 관리를 진행하라고 한다. 굳이 이 때만 할 수 있는건 아니지만 타이밍이 온김에 하기로..

  1. 테마 관련

    • 내 테마는 AnuPpuccin. 뭐라고 읽을진 모르겠다만 이것과 StyleSettings를 사용 중이다.
    • 기본 외형은 AnuPpuccin 이고 세부 설정은 StyleSettings이라서 일단 AnuPpuccin는 설치만 하고
    • StyleSettings는 원래 꺼에서 Export 했다.
    • 깔끔하구만
    • 그 후 .CSS들도 함께 가져온다.

  2. 편의 기능 관련

    • Image Converter
    • 그 외엔 로컬에서만 쓸거같은데.. 사용하다 필요하면 추가하고.

템플릿 만들기

글 쓸 때 마다 YAML 포멧 태그 만들기 좀 번거롭다. 템플릿 만들자

---
title: "How to publish Obsidian notes with Quartz on GitHub Pages"
tags:
  - 
---

아무거나 템플릿을 만들자.

25.05.08 참고로 여기서는 draft가 포함되어있지만, 굳이 할 필요는 없었다. 전부 포스팅을 생각하고 작성하는 글이니..

그 후 템플릿 등록

이제 글을 쓸 때마다 불러오면 된다.

4. 로컬 - GitHub 연결

온라인에 띡 올려버리기 전에 한번 테스트하기. Quartz서버는 마크다운을 HTML로 변환해준다고 한다.

쿼츠 빌드

npx quartz build --serve

오 접근해보자

헉..! 디렉토리 이름이 블로그 제목이었다!

25.05.08 아니었다. 하드코딩 되어있고, 블로그 제목 바꾸기에서 수정 가능하다.

실시간 수정도 확인된다! 편하다!

GitHub 동기화

npx quartz sync

저 초록 Done! 이 나오면 성공

5. GitHub Action 설정

블로그 하려면 GitHub Action 설정을 좀 바꿔야된다.

deploy 생성

touch .github/workflows/deploy.yml

저 경로로 들어가면 deploy.yml 이 있는데 내용을 링크와 같이 채운다.

버전 주의! 의존성 관련

25.05.07일 기준 해당 링크 내용 중 수정이 필요함 수정 사항 24번 줄 → - uses: actions/setup-node@v4 를 - uses: actions/setup-node@v3으로 수정해야 빌드가 된다.

GitHub Action 수정하기

원래 내 액션은 main에 귀속되어있었는데, 이름을 V4로 바꿈.

처음 액션 설정하는건 기억 안남. 알아서 찾기.

동기화

npx quartz sync

업로드 하고 접속 하면…

확인

와… 이름이 Quartz4야 어쩜좋지…

99. 기타 수정 사항 고치기

블로그 제목 수정하기

블로그 제목 바꾸기

에러 - XML 리다이렉션

XML 리다이렉션 에러

블로그 하단 링크 수정하기

작성 중