GitHub Gist로 블로그 만들기

작성일: 2024-10-27

일반적인 블로그는 오랜 시간을 들여서 장문의 글을 하나씩 작성해 올리는 구조이다.

개발을 하다보면 글을 작성할 일이 꽤나 많은데, X(구 트위터) 같은 SNS에 익숙해진 나머지 진득하게 글을 작성하는게 쉽지 않더라..

짧은 글들의 토막을 뭉쳐서 하나의 글을 형성하는 구조로 블로깅을 하고 싶은데 유명한 블로그 플랫폼들은 이런 기능을 제공해줄리가 전무후무하다. 그렇다고 X을 블로그처럼 쓰기엔 좀 거부감이 든다.

고민에 고민을 거듭하던 찰나.

GitHub Gist를 써보면 어떨까라는 생각이 났다.

글 수정 목록 복사됨!

rhea-so 2024-10-27

GitHub에 Gist REST API가 제공되고 있어서, 우선 이걸로 Gist 정보를 조회했다.

https://docs.github.com/ko/rest/gists/gists?apiVersion=2022-11-28

Public Gist만 불러올 수 있다. Secret Gist를 불러오고 싶으면 다른 방법을 찾아봐야 한다.

rhea-so 2024-10-27

이후 API 조회 결과를 분해 & 조립하여 다음 타입의 배열로 만들었고

export interface Gist {
  url: string;

  description: string;

  createdAt: string;

  updatedAt: string;

  files: {
    filename: string;

    content: string;
  }[];

  comments: {
    createdAt: string;

    updatedAt: string;

    user: {
      username: string;

      avatarUrl: string;
    };

    body: string;
  }[];
}

https://github.com/rhea-so/gist-blog/blob/main/src/github.ts

rhea-so 2024-10-27

각각의 Gist의 Markdown을 HTML로 변환, HTML 압축, GitHub Copilot에게 CSS 작성 짬 때리고 합친 결과:

오 괜찮은데?

rhea-so 2024-10-27

GitHub Action에서는 schedule 기능을 제공하는데 이걸 이용해서 1시간 간격으로 돌아가는 스케쥴러를 만들 수 있다.

이걸 이용해서 매시간마다 Gist들을 변환, Cloudflare Pages에 배포하는 Node.js 앱을 돌리는 GitHub Action Workflow를 작성했다.

rhea-so 2024-10-27

의식의 흐름을 그대로 블로그 글로 만들 수 있다니.

글이 약간 난잡하게 보일 수는 있겠으나, 작성시 부담이 훨씬 줄어들어서 매우 좋은 것 같다.

한동안은 다른 블로그 플랫폼으로 넘어가는 일 없이 직접 만든 Gist Blog 프로젝트를 사용할 것 같다.

댓글쓰기