Post

Github 블로그 꾸며보기2 (+obisidan)

Posted Updated
Preview Image
By hyse_yang
10 min read

github 블로그는 나 같은 초보자한테 초기세팅부터 어려웠다. 다행히 Chirpy 블로그가 디자인이 깔끔하면서 초기세팅이 편한 편이었다. 그럼에도 Tistory나 velog에 비해 손이 많이 가는데, 내가 옵시디언을 정말 자주 사용하기 때문에 오히려 좋은 점도 많다.

예를 들어, 내가 이전에 작성한 블로그를 참고하고 싶으면 옵시디언으로 켜서 편집을 하면 된다. 이미지 그대로 사용하고 싶으면 드래그 앤 드롭으로 옮겨주면 알아서 참조해준다.

^9f4625

그리고 나는 local graph view 말고 graph view 자체는 잘 안 쓰는데 가끔 한 번씩 키면 괜시리 열심히 작성했다는 느낌을 받는다.

Pasted image 20240808010356 또, 이미지 파일, .gif 같은 첨부파일 관리가 편하다. 파일 위치가 변경되어도 옵시디언에서 알아서 파일 위치를 업데이트 해준다.

그 대신 옵시디언을 사용하기 전에 몇 가지 세팅을 해줘야 한다.

1. File & links

  • Default location for new notes에서 In the folder specified below를 체크하고 _posts로 경로 지정
  • New link format은 Shortest..로 설정해야 나중에 relative link 기능을 사용할 수 있다.
    • 수정하기 전에 Absolute로 표기했는데 이렇게 하면 노트 간 link 걸기가 어렵다.
  • [[Wikilinks]] 사용을 해제한다.
    • 옵시디언의 경우 ![[파일이름]] 으로 파일을 임베드 혹은 참조를 하는데 이 기능은 옵시디언에서만 지원한다.
    • 이 기능을 키면 띄워쓰기도 %20으로 치환되서 확실하게 참조해주기 때문에 꼭 켜주자.
    • 보통의 마크다운처럼 ![]()으로만 참조한다.
  • Detect all file extensions 필수는 아니지만 스크립트 파일을 사용한다면 이걸 체크해야 보인다.
    • 대신, file 탐색 결과가 지저분해진다는 단점이 있다.
  • Default location for new attachements는 사진, gif 파일 같은 첨부파일을 어디로 저장할지 설정하는 값이다. 이 부분은 취향이니 편한대로 세팅하자.

2. Template 및 노트 기본값 설정

  • 우선, template 파일을 만들자.
  • 이 부분이 옵시디언 + github 불편한 점 중 하나인데, 옵시디언이 최근 metadata(properties) 를 페이지처럼 만들어서 자꾸 형식이 깨진다.
  • 문서 metadata 설정할 때만큼은 반드시 live preview 모드를 끄고 source mode로 바꿔주자.

Chirpy 블로그의 경우 특히, image 설정 부분이 아래 사진처럼 해야 하는데 최신 버전의 옵시디언은 path: ... 형식을 잘 인식하지 못한다. 그렇기 때문에 이 부분은 어쩔 수 없이 source mode로 작성해줘야 한다.

그러고 나서 Daily note와 Unique note creator 중 사용하는 기능에 대해서 위에서 만든 template파일을 template으로 설정해주면 파일생성할 때 대부분의 metadata는 자동으로 완성시켜줄 것이다.

3. 스크립트 파일 만들기

이거는 mac/리눅스면 bash, 윈도우면 batch파일을 만들어서 해도 되고 아니면 os.system()으로 도배된 .py로도 충분히 구현할 수 있는 기능이다. 다만, 파이썬의 경우 아나콘다같은 프로그램을 깔았으면 환경변수가 바뀌어서 파이썬 스크립트 실행이 안 될 때도 있다. 그럴 땐 다시 .py를 직접 실행하는 bash/batch 파일을 만들어도 된다.

아무튼 일단 있으면 편한 jekyll 빌드 스크립트 파일만 만들고 필요하면 추가해서 쓰면 된다.

  1. jekyll localhost 빌드
  2. 수동 git-add-commit-push 자동 스크립트

1. jekyll localhost 빌드

실행하는 스크립트 위치를 잘 고려해서 다음 코드를 작성한다. ruby 환경변수 설정이 되어 있다면 win/mac/linux 사용가능 한 코드다.

1

bundle exec jekyll serve --trace

2. git add-commit-push 자동화

  • git 써드파티 플러그인을 깔았으면 자동으로 백업 타이머를 맞추면 된다.
  • 근데 블로그 빌드 실패해서 바로 수동으로 push 하고 싶을 때 아래 스크립트를 실행한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

@echo off
set "currentDate=%date%"
set "currentTime=%time%"

for /f "tokens=1-4 delims=/- " %%a in ("%currentDate%") do (
    set "year=%%a"
    set "month=00%%b"
    set "day=00%%c"
)

set month=%month:~-2%
set day=%day:~-2%
set "formattedDate=%year%-%month%-%day%"

for /f "tokens=1-3 delims=:., " %%a in ("%currentTime%") do (
    set "hour=00%%a"
    set "minute=00%%b"
    set "second=00%%c"
)

set hour=%hour:~-2%
set minute=%minute:~-2%
set second=%second:~-2%
set "formattedTime=%hour%:%minute%:%second%"

:: commit 메시지 확인용
echo "[Comment]blog update at %formattedDate% T %formattedTime%"

@echo on
pause


git add -A
git commit -m "blog update at %formattedDate% T %formattedTime%"

pause

git push origin main
pause

4. obsidian 일부 기능 구현하기

너무 길어져서 아래 두 문서로 분리했다.

5. 빌드 실패 시 배포 금지

localhost에서 잘 열린다고 github Action에서 빌드가 성공된다는 보장이 없다. 내 경우에는 보통 bundle exec htmlproofer _site 단계에서 자주 Error가 발생되었고 대부분은 md파일 relative link를 잘못 걸어서 발생했다. md파일을 실수 없이 작성하는 게 가장 좋지만 그러기 쉽지 않으니 build 실패 때문에 블로그 전체가 날아가는 걸 방지해야 한다.

블로그 폴더 경로에서 /.github/workflows 안에 있는 yaml파일 코드에 한 줄만 추가해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

name: "Build and Deploy"
on:
  push:
    branches:
      - main
      - master
    paths-ignore:
      - .gitignore
      - README.md
      - LICENSE

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          # submodules: true
          # If using the 'assets' git submodule from Chirpy Starter, uncomment above
          # (See: https://github.com/cotes2020/chirpy-starter/tree/main/assets)

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.3
          bundler-cache: true

      - name: Build site
        run: bundle exec jekyll b -d "_site$"
        env:
          JEKYLL_ENV: "production"

      - name: Test site
        run: |
          bundle exec htmlproofer _site \
            \-\-disable-external \
            \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"

      - name: Upload site artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "_site$"

  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

가장 마지막에 있는 코드들을 다음과 같이 수정한다.

1
2
3
4
5
6
7
8
9
10
11

  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    needs: build
    if: success() # 이 부분 추가
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

이제 다음 시간에는 search 결과나 tag, category 접속 시 home 화면과 똑같은 화면으로 바꿔보도록 해보자.■

Next : 2024-08-11-Github 블로그 꾸며보기3

Reference

5. Build & Deploy

현재 아래 문서들을 참고하지 않았지만 시간된다면 github Action 기능에 대해서 익혀보고 build 실패시 가장 최근에 저장된 파일을 배포하는 workflow를 구현해볼 예정이다.

Doodle, Diary
diary blog obsidian github_action
This post is licensed under CC BY 4.0 by the author.