talk

Blog 만들며 확인한 것들

📊 4.212K (3.346K/170KW) ⏱ 14 mins

필요한 자료나 생각을 정리하는 것은 개인적으로 obsidian을 이용하고 있다. 대부분은 정리에 그치고 있고 특별히 정제된 포맷의 글로 작성해본 적은 없었다. 마침 기술 블로그가 필요할 수도 있는 작은 취미 생활을 하게되어 이번 기회에 하나 만들어보려 했다. 제약사항은 아래와 같이 설정했다.

  1. 호스팅은 Github page를 사용한다.
  2. Static Sites Rendering 툴을 사용한다. 2.1. 컨텐츠 갱신을 쉽게한다. 2.2. 레이아웃, 스타일 변경을 통해 약간의 사이트 개인화가 가능하다.

Jekyll

2.1, 2.2를 위한 후보로 Jekyll을 생각했다. 장점은 Github에서 Jekyll기반 렌더링을 지원하니 별도의 Local Jekyll 서버를 두지 않아도 렌더링이 가능하다. 그러나 2.2를 위해 수정때마다 매번 deploy를 해야하는 것은 당연히 불편한 일일 것이다. 결국 로컬 테스트 환경이 필요했다.

Jekyll의 로컬환경을 만들때 마지막 렌더링을 Github에 맡긴다면 Github dependency versions에 맞춰 로컬환경을 맞춰야한다. 로컬 테스트 환경을 Portable하게 만드는 게 좋을 것 같아 Docker를 이용해보았다. 맥에서는 Ruby/Gem이 바로 사용 가능하지만 나는 Linux/WSL2를 주로 사용하기 때문에 필요했다. (Jekyll 로컬 테스트 환경 설정은 본문 아래에서 다룬다.)

그러나 Jekyll 테스트 환경을 구축해 보다보니 Gem과 Jekyll 사이의 dependency 관리가 좀 별로인 부분이 있었다. 굳이 렌더링을 Github에 맡겨야하는지에 대한 의문이 들었다. Github를 이용하지 않는다면 Github dependency를 맞춰야한다는 단점도 없고, 사이트 생성을 위한 코드들도 공개하지 않아도 되는 장점이 있다.

이런 생각까지 미치니 어차피 로컬 테스트 환경을 만들고 Static rendering을 할 것이면 Jekyll이 굳이 필요하지 않다고 생각되었다. 그래서 다른 후보를 찾아보니 Hexo와 Hugo가 있었다. 좀 더 익숙한 Node.js 기반의 Hexo를 테스트 해보게 되었다.

Hexo

JavaScript Runtime 기반으로 로컬 테스트 환경을 만들수 있다 것이 가장 큰 편의성이다. Docker Container 보다 빠르게 시작할 수 있다. Jekyll 보다 후에 개발되었기 때문에 문법도 다소 현대식이고 더 합리적인것 같다. 단점은 사용자 커뮤니티에서 Non-English가 Major라는 것이다.

theme에서 사용하는 기본 CSS Preprocessor가 SCSS가 아닌 Stylus라는게 다소 의아하긴했다. 물론 변경도 가능하나 Theme은 보통 기본 설정으로 구성되니 변경하는 것이 좋은 선택은 아닐 수 있다. 기타 사이트 생성시 Decoration을 위해 필요했던 외부 서비스는 아래가 있었다.

실행에 큰 문제가 없었고 필요한 플러그인도 크게 부족함이 없었다. Github Action을 이용해 Deploy하는 설정은 아래 섹션에 작성하였다.

Jekyll 로컬 테스트 환경

Docker를 통해 interactive하게 Jekyll을 사용할 수 있도록 아래와 같은 스크립트를 작성했다. WSL2 환경에서 dockerd 실행 여부도 확인한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/bin/bash

# .env
# MY_VOLUME=./docs

if [[ $(cat /proc/version) == *"WSL2"* ]]; then
  docker_status=$(sudo service docker status)
  if [[ $docker_status = *"Docker is not running"* ]]; then
    sudo service docker start
  fi
fi

docker compose --env-file .env up -d
docker compose exec jekyll /bin/bash
docker compose down
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# docker-compose.yml

version: '3.8'
services:
  jekyll:
    image: jekyll/jekyll
    volumes:
      - ${MY_VOLUME}/:/srv/jekyll
      - ./vendor/bundle:/usr/local/bundle
    ports:
      - '4000:4000'
      - '35729:35729'
    environment:
      - TZ=Asia/Seoul
    command: /bin/bash
    tty: true
    stdin_open: true

Docker 환경에서는 아래와 같이 실행한다.

1
2
bundle install
bundle exec jekyll serve --host 0.0.0.0 --livereload

Github Action을 이용한 Hexo Deploy

Github Page로의 Deploy는 Github Action 이용하여 수행하도록 설정하였다.

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
name: Deploy blog - JIT

on:
  push:
    branches:
      - jit

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20.x]
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: Restore cache
        uses: actions/cache@v3
        id: node-cache
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: npm install
        if: steps.node-cache.outputs.cache-hit != 'true'
        run: npm install
      - name: Setup Environment
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
          GIT_NAME: ${{ vars.GIT_NAME }}}
          GIT_EMAIL: ${{ vars.GIT_EMAIL }}}
        run: |
          git config --global user.name ${GIT_NAME}
          git config --global user.email ${GIT_EMAIL}
          sed -i "s/\${GH_TOKEN}/${GH_TOKEN}/" _config.yml
      - name: Generate and Deploy Site
        run: |
          npx hexo deploy -g

생각

맥OS가 아닌 환경에서 블로그 로컬 테스트 환경이 필요하면 Hexo를 사용하여 여러 OS에서 Portable하게 블로깅을 시작할 수 있다. Hexo로 환경을 구축하고, 로컬이나 CI환경을 이용해 빌드하고, 그 결과를 Deploy 하는 것을 고려해봐도 좋을 것이다.

Share