e2goon / powerjade-blog-legacy

Posts are posted when an issue is opened, modified, or closed.
3 stars 0 forks source link

Github Issue 로 블로그 하기 #3

Open e2goon opened 3 years ago

e2goon commented 3 years ago

지금까지 블로그를 토이프로젝트로 삼아 계속 만들고 삭제하고 반복해왔었는데, 블로그 글을 작성하고 편집하는 과정이 귀찮아서 포스팅을 게을리하는 경우가 많았습니다.

  1. markdown 문서를 작성하고 커밋/푸시하여 포스트 게시
  2. Headless CMS 에서 문서를 작성하고 블로그 게시

1번의 방식은 집에서 블로그 글을 작성하고 커밋/푸시해야하는 번거로움이 있었고, 오탈자가 나면 그 과정을 반복해야 했습니다. 2번의 방식은 Headless CMS 를 사용했을 때 Headless CMS 까지 엮어서 개발/관리해야하는 번거로움 또한 존재 했고 모바일 앱에서 포스트를 작성하는 과정이 매끄럽지 않았습니다.

ezgif-2-1307c75b284d

최근에 Github 앱을 발견했고 첨부 및 간단한 복사/붙여넣기 만으로 사진과 비디오를 첨부할 수 있었습니다. 평소에 markdown 문법을 좋아하기도 했고 글을 쓰는 과정이 단순하고 쉬워서 GIthub Issue 를 블로그 포스트처럼 게시되도록 하는 것이 어떨까? 하는 고민에서 착안하여 제 개인블로그를 개발하였습니다.

Github Issue 에서 글과 이미지를 작성하기

github

텍스트와 이미지를 복사 및 붙여넣기를 해보았습니다. 이렇게 작성하고 업데이트를 누르면 Github Workflow 가 동작하면서 자동으로 빌드 배포가 됩니다. 모든 블로그 글들은 Github Issue 에서 불러오고 있구요.

image

postpublished 레이블을 추가하면 게시됩니다.

Github Workflow 실행 방법

name: Vercel Deploy Hook

on:
  issues:
    types: [opened, edited, deleted, labeled, unlabeled]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Webhook Trigger
        run: curl ${{ secrets.WEBHOOK_URL }}

.github/workflows/main.yml 설정 파일은 다음과 같이 되어 있습니다.

다음과 같이 5가지 중 하나의 액션만 취해도 자동으로 Github Workflow 가 작동합니다. 개발한지 몇달이 지난 지금도 글을 쓰는 과정이 만족스럽습니다. 앞으로도 이 블로그를 꾸준히 개선해서 나만의 공간으로 꾸며볼까 합니다.

image

WEBHOOK_URL 은 Vercel 의 Deploy Hook 을 생성한 뒤 본인의 대상 Repository 의 Setting 탭에서 Action screts and variables 에 Vercel 의 Deploy Hook 을 넣으면 됩니다.