By 유스틴 in Self-hosting — 02 8월 2024

Ghost 블로그 초기 설정

연구나 취미 활동을 하면서 기록을 할만한 공간이 필요하다고 생각했다. 다른 사람들에게 보여주기 위한 의미도 있지만, 1년뒤나 2년뒤, 내가 다시 보기 위해서 필요했다. 그리고 논문과 같은 글을 쓰면서 단어나 표현이 떠오르지 않는 경우가 많이 생기는데 글 쓰는 연습을 하기 위해서도 글을 자유롭게 쓸 수 있는 장소가 필요했다.

나는 개인용 서버를 꽤 자주 만들어 봤었다. 이전엔 서버를 만들고 워드프레스를 블로그 용으로 사용해보고자 했는데 설정하는데에 배워야 할게 너무 많았다. 그래서 이번엔 글 쓰는데 집중할 수 있는 블로그 서비스를 찾아보자 생각했고, 그 결과로 선택한 블로그 서비스가 ghost 블로그였다. 개인 서버를 운영하고 있으므로 pro는 사용 안해도 되었고, self-hosting으로 lxc 컨테이너를 만들어서 이 블로그 서비스를 올려놓았다.

ghost 블로그를 처음 설치해보고 들었던 생각은 테마가 이쁘다는 거였다. 다른 블로그 서비스들에 비해 깔끔하고 있어보이는 페이지가 마음에 들었다. 다른 테마도 둘러보았는데 다 퀄리티가 좋았다. 그 중에서 나는 ruby 테마를 선택했는데 카드 형식으로 여러 글들을 한번에 보여준다는 점이 좋아서 이 테마를 선택했다. 정보를 전달하는 기술 블로그처럼 운영할 예정인데 각 분야의 글을 묶어서 한번에 보여주도록 하고 싶었고, 이에 맞는 테마가 ruby였다. 현재까지는 마음에 든다.

테마를 설치하고 그대로 써도 되겠지만, 그래도 여러가지 초기 설정은 해주는게 좋다. 많은 링크들을 참조했고, 일부 안되는 부분은 코드를 보면서 내가 수정해주었다. 여기에서는 참조한 링크와 내가 직접 수정한 부분을 설명하고자 한다.

caddy와 reverse proxy 설정

ghost 블로그를 설치하고 연결하면 자동으로 let's encrypt에서 인증서를 받아와 https를 설정해준다. 그러나, 나는 블로그 서비스 하나만 올리지 않고 여러 서비스들을 한 서버에 한번에 올려놓고 있기 때문에 앞단에 reverse proxy를 이용해서 연결해주는게 더 효율적이다.

lxc는 ubuntu 22.04버전을 설치했고, 아래 링크를 이용해서 설치했다.

위 과정에서 nginx 설정은 했고, reverse proxy를 이용하기 때문에 ssl 설정은 해주지 않는다. 링크는 블로그로 사용할 링크를 넣으면 된다. reverse proxy 설정에서 ip는 서버의 ip, 포트는 80번 포트를 넣으면 된다.

이렇게 해주면 연결은 되지만 무한 리디렉션 에러가 떠서 서버에 들어가지지 않는다. 이를 해결하는 방법은 아래 링크대로 해주면 해결된다.

즉, X-Forwarded-Proto $scheme;을 X-Forwarded-Proto https;로 바꿔주면 해결된다.
/etc/nginx/sites-enabled/.conf 파일에 있는 location 부분을 다음과 같이 수정하자.

location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;
    }

prism.js로 syntax highlighting

syntax highlighting 적용은 두가지 방법이 있다. 첫번째는 직접 서버에 적용하는 방법이고 두번째는 CDN을 사용해 적용하는 방법이다. CDN 사용시 커스터마이징이 제한된다는 단점이 있어 직접 적용하는 방법을 사용했다. 아래 링크에 이에 관한 설명이 나와있다. 수식 등 추가적인 설정 적용방법도 나와있는데 이에 대한 방법은 아래에서 추가적으로 설명할 예정이다.

한가지 바뀌어야 할 사항은 코드 적용시 추가할 코드가 다른점으로
{{>prism}} $\rightarrow$ {{> "prism"}}
로 바꿔주어야 적용된다. head 단 안에다가 넣으면 된다.

그러면 다음과 같이 예쁜 syntax highlight를 적용할 수 있다.

import numpy
print("Hello World")

katex로 수식 적용하기

마찬가지로 아래 링크를 사용하면 아주 잘 적용된다. 마찬가지로
{{>katex}} $\rightarrow$ {{> "katex"}}
로 바꿔주어야 한다.

그러면 다음과 같이 예쁘게 수식이 표현되게 됨을 확인할 수 있다.
$$i\hbar \frac{\partial}{\partial t} \Psi(\mathbf{r}, t) = \hat{H} \Psi(\mathbf{r})$$

폰트 바꾸기

폰트의 경우 테마가 달라서 그런지 몰라도 검색해서 나오는 code injection을 사용해서 적용하는 방법은 잘 적용되지 않았다. 그래서 테마의 코드를 수정해 직접 적용하는 방법을 이용해서 수정하였다.

우선 원하는 폰트를 찾아서 폴더에 넣어주어야 한다. 나는 오픈 소스 폰트인 Noto Sans KR 폰트를 적용하고자 했다.

Noto sans KR 폰트는 google webfonts helper 사이트에서 넣어주거나

google webfonts helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!

Mario Ranftl

사람들이 이미 빌드해놓은 폰트를 사용하면 된다.
나는 사람들이 이미 빌드해놓은 폰트를 적용해보았다

git clone을 이용해 폰트를 복사한 후에 woff2, woff 파일들을 assets/fonts 폴더에 복사해준다. 그 후 폰트 적용을 위해 assets/css/general/fonts.css 파일을 수정해준다.

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 700;
  font-style: normal;
  src: local(""),
  url("../fonts/NotoSans-Black.woff") format("woff"),
  url("../fonts/NotoSans-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 900;
  font-style: normal;
  src: local(""),
  url("../fonts/NotoSans-Bold.woff") format("woff"),
  url("../fonts/NotoSans-Bold.woff2") format("woff2");
}

이와 같은 형태로 수정을 해주어 폰트를 설정해준다. 이 폰트를 적용하려면 assets/css/general/fonts.css 의 --font-sans 부분을 다음과 같이 수정해준다.

    /*--font-sans: "Noto Sans Korean", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;*/
    --font-sans: "Noto Sans Korean";
    --font-serif:  Lora, Times, serif;

css를 수정할 때마다 테마가 빌드되게 하려면

    sudo npm run dev

명령어를 theme 최상위 폴더에서 적용하면 되고, css 수정 후 테마가 빌드되게 하려면

    sudo npm run zip

명령어를 이용해 빌드하면 된다. 이 명령어를 사용하지 않으면 ghost를 재시작해도 폰트가 적용되지 않는다.

마지막으로

    ghost stop
    ghost start

명령어를 이용해 ghost를 다시 시작하면 폰트가 적용되어 있는 모습을 확인할 수 있다.

폰트 수정 전

폰트 수정 후

한글 url

한글 url을 적용할 수 있는 방법을 적어주셔서 이를 적용해보았다. 5.88.2버전에서는 적용이 되지 않았으나 5.90.1 버전으로 업데이트 하고나서 적용이 됨을 확인하였다. 안되는 분이 있으면 업데이트를 하고 적용해보시길 바란다.

만약 한글 url을 적용하게 되면 백업을 할 때 500 internal server error가 나면서 백업이 안되는 것을 확인할 수 있다. url에 한글이 있으면 인코딩이 안되어있으면 에러가 나기 때문에 그렇다. 이를 해결하기 위해서는 다음 파일을 수정하면 된다.

-- /versions/5.90.1/node_modules/express/lib/response.js

이 파일의 아래 795번줄처럼 한줄을 추가해주면 된다.

 792        if (charset) value += '; charset=' + charset.toLowerCase();
 793       }
 794     }
 795     value = encodeURI(value)
 796     this.setHeader(field, value);