서론

올해 초 가리사니 개발자공간을 종료하고 GitHub Pages에 Jekyll을 적용하여 블로그 운영을 시작했습니다.

문제는 루비 언어를 사용할 줄 모르고 Jekyll의 자유도가 낮아 만족스럽지 않았습니다.

거기다가 로컬에서 실행하는 방법을 몰라 글을 고칠 때마다 GitHub에 푸시하고 오류가 날 경우 수정하고 다시 푸시하는 번거로움이 있었습니다.

그래서 JavaScript 기반의 VuePress를 적용해보기로 했습니다.

VuePress 설치

• https://vuepress.vuejs.org/
• https://vuepress.vuejs.org/guide/getting-started.html

vuePress v2.0.0-rc.9 / yarn 기준으로 설명하겠습니다.

yarn create vuepress 프로젝트이름
# 위저드가 실행되며 선택지를 선택하면 프로젝트가 생성됩니다.

• 이상하게 매뉴얼 업데이트가 안되어 별도로 설정해줘야하는 것들이 있습니다.
• 그래서 .github/workflows/deploy-docs.yml 파일을 수정합니다.

  name: Deploy Docs
  on:
  push:
    branches:
      - <퍼블리시 타겟 브랜치>
  permissions:
  contents: write
  jobs:
  deploy-gh-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: yarn
      - name: Install Deps
        run: yarn install
      - name: Build Docs
        env:
          NODE_OPTIONS: --max_old_space_size=8192
        run: |-
          yarn run docs:build
          > docs/.vuepress/dist/.nojekyll
      - name: Deploy Docs
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          # This is the branch where the docs are deployed to
          branch: gh-pages
          folder: docs/.vuepress/dist
  

• branch: gh-pages 부분은 업로드를 할 브랜치로 설정합니다. (gh-pages를 예로 설졍하겠습니다.)
• 깃허브 리포지토리의 /settings/pages 에서 브랜치를 gh-pages로 설정합니다. (/root)
• 이제 <퍼블리시 타겟="" 브랜치=""> 에 커밋하면 자동으로 배포됩니다.

로컬 실행

yarn docs:dev

후기 및 결론

• 사람들이 왜 VuePress를 안쓰고 Jekyll을 쓰는지 알 것 같다…
• 자바스크립트를 사용해서 자유도가 높을 줄 알았는데 지킬보다도 자유도가 떨어진다.
  • 메뉴나 메인페이지마저도 마음대로 설정할 수 없다.
  • 주어진 규격이 있고 그 규격을 벗어날 수 없다.
• 그럼 내일은 다시 지킬을 설정해보도록 하겠다.
• 나중에 여유가 난다면… 직접 GitHub용 블로그 시스템을 만들어 보는것도 나쁘지 않을 것 같다.