GitHub Actions로 Tistory 게시물 커밋 남기기 ( JavaScript )

Tistory 게시물로 GitHub Commit 남기기

티스토리에 학습한 내용을 기록하면서 GitHub에 커밋을 남기는 방법이 없나 찾아보게되었습니다.

Tistory RSS와 GitHub Actions를 활용해서 가능하다는 것을 알게되어서 정리하게 되었습니다!

개념 미리 알고 시작하기

• GitHub Actions GitHub 저장소 내에서 자동화된 빌드, 테스트, 배포 작업을 설정하고 실행하는 CI/CD 서비스
• RSS (Rich Site Summary) 웹사이트나 블로그의 최신 콘텐츠를 자동으로 받아볼 수 있도록 표준화된 XML 기반 피드 형식
• Node.js와 npm 자바스크립트 런타임 환경과 그 패키지 매니저로, 프로젝트 의존성 관리에 사용됨

완료된 GitHub Repo 바로 보러가기

https://github.com/devchaeyoung/blog-auto-commit

GitHub - devchaeyoung/blog-auto-commit

 

먼저 워크플로우에 동작할 순서를 정리하였습니다.

1. 워크플로우 시작 조건
     - main 브랜치에 push 또는 pull_request 발생 시
     - 3시간마다 실행
2. 환경 변수 설정
     - TISTORY_RSS_URL (시크릿에서 불러옴)
3. 저장소 클론
4.  Tistory RSS 읽어와서 README 업데이트 내용 작성
5. 기존 저장소와 변경사항이 있다면 업데이트하기

작성한 Workflows

처음 GiHub Workflow를 작성한다면 주의해야할 점은 .github폴더 안에 해당 워크플로우가 작성되었는지와 npm ci를 실행하기 위한 -lock.json과 같은 파일이 있는지 확인해야합니다.

만약 해당 포스트를 참고하는 시점에 지금 작성된 actions/checkout나 actions/setup-node에 버전 업데이트가 있다면 최신 버전으로 입력해주세요!

나머지 자세한 설명은 주석을 통해 남겨두었습니다. 나중에 사용할 때는 주석을 지워서 사용하면 된니다!

name: Readme Update

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  schedule:
    - cron: "0 */3 * * *"  # 3시간마다 실행

// GitHub Actions의 권한 설정
permissions:
  contents: write
  pull-requests: write

env:
  TISTORY_RSS_URL: ${{ secrets.TISTORY_RSS_URL }}

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Update README with latest Tistory posts
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const rssParser = require('rss-parser');
            const parser = new rssParser({
              requestOptions: {
                headers: {
                  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
                }
              }
            });
            const feed = await parser.parseURL(process.env.TISTORY_RSS_URL);

            // 최신 5개 포스트 추출
            const posts = feed.items.slice(0, 5).map(item => {
              const title = item.title.replace(/\[.*?\]\s*/, '');
              const link  = item.link;
              return `- [${title}](${link})`;
            }).join('\n');

            // README.md 파일 읽기
            const readmePath = './README.md';
            let md = fs.readFileSync(readmePath, 'utf8');

            // 기존 최신 게시물 영역 교체
            const updated = md.replace(
              /<!-- POSTS-START -->[\s\S]*?<!-- POSTS-END -->/,
              `<!-- POSTS-START -->\n${posts}\n<!-- POSTS-END -->`
            );

            fs.writeFileSync(readmePath, updated);

      - name: Check for changes
        id: verify_diff
        run: |
          git diff --quiet . || echo "changed=true" >> $GITHUB_OUTPUT

      - name: Commit README
        if: steps.verify_diff.outputs.changed == 'true'
        run: |
          git config --local user.email "${{ secrets.GH_EMAIL }}"
          git config --local user.name "${{ secrets.GH_NAME }}"
          git add README.md
          git commit -m "docs: Updated New Posts"
          git push origin main

설정해야할 GitHub Secrets

- TISTORY_RSS_URL : 본인 tistory주소 끝에 /rss를 붙였을 때 HTML과 같은 화면이 잘 나타나는지 확인후 url을 그대로 붙여넣어주기.

- GH_EMAIL : 본인의 GitHub Email 

- GH_NAME : 본인의 GitHub 이름

GitHub Secrets 설정 방법

레포지토리의 설정 > Secrets and variables > New repository secret을 눌러 등록할 수 있습니다.

 

README에 수정할 영역 지정해주기

아래와 같은 형태로 수정될 영역을 리드미에 표시해줍니다.

## 최신 Tistory 게시물

<!-- POSTS-START -->
<!-- POSTS-END -->

잘 동작하는지 확인하기

모두 잘 설정했다면 세시간마다 한번씩 Actions 탭에서 아래와 같이 잘 동작하는 것을 확인할 수 있습니다.

마무리

• npm ci vs npm install 정리
  https://devchaeyoung.tistory.com/entry/npm-install%EA%B3%BC-npm-ci-%EC%B0%A8%EC%9D%B4

npm install과 npm ci 차이