[Tistory] Node.js를 활용한 티스토리 글 작성 시 Github에 commit 하는 방법

티스토리 블로그에 에러 처리 했던 방법, 문제 해결 했던 방법 등을 정리하다보니 github 잔디에 소홀해졌다.

.rss 파일을 이용해서 티스토리에 글을 작성할 때마다 github에 commit이 되게해서 잔디를 채워보자. (하루에 글을 하나씩 쓰자...)

 

Tistory RSS 설정

먼저 블로그에 RSS가 공개 되어있는지 확인해야 한다.

만약 RSS가 설정되어 있지 않다면 RSS부터 설정하자.

 

1. 블로그설정 - 관리 - 블로그로 들어간다.

 

2. 아래와 같이 설정해주고 변경사항을 저장한다. (공개될 RSS는 그냥 50개로 하자.)

 

3. 본인 블로그 주소/rss 로 접속해서 확인한다. ex) https://systorage.tistory.com/rss

GitAction을 통한 자동화

사실 글 제목은 글 쓸때마다 커밋이지만 그럼 서버를 올려야하는 방법밖에 떠오르지 않아서 GitAction을 사용하기로 했다.

 

1. 글 목록이 올라갈 레포지토리를 생성한다. (이 글의 경우 본인 소개 페이지)

2. 로컬로 해당 레포지토리를 clone한 후 아래 명령어를 입력한다.

npm init -y

3. npm init 후 rss-parser를 설치한다.

npm i rss-parser

4. package.json에 start 명령어와 "type": "module"을 추가해준다.

...
  "main": "readmeUpdate.js",
  "type": "module",
  "scripts": {
    "start": "node readmeUpdate.js"
  },
...

 

5. readmeUpdate.js 파일을 추가후, 아래처럼 작성한다.

import { writeFileSync } from 'node:fs';
import Parser from "rss-parser";

/**
 * README.MD에 작성될 페이지 텍스트
 * @type {string}
 */
let text = `# Hi there 👋

## 이런 환경에 익숙해요✍🏼

## 언어

<p>
  <img alt="" src= "https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=white"/> 
  <img alt="" src= "https://img.shields.io/badge/TypeScript-black?logo=typescript&logoColor=blue"/>
</p>

## Contact me

## 📕 Latest Blog Posts

`;

// rss-parser 생성
const parser = new Parser({
    headers: {
        Accept: 'application/rss+xml, application/xml, text/xml; q=0.1',
    }});

(async () => {

    // 피드 목록
    const feed = await parser.parseURL('https://systorage.tistory.com/rss');

    // 최신 5개의 글의 제목과 링크를 가져온 후 text에 추가
    for (let i = 0; i < 5; i++) {
        const {title, link} = feed.items[i];
        console.log(`${i + 1}번째 게시물`);
        console.log(`추가될 제목: ${title}`);
        console.log(`추가될 링크: ${link}`);
        text += `<a href=${link}>${title}</a></br>`;
    }

    // README.md 파일 작성
    writeFileSync('README.md', text, 'utf8', (e) => {
        console.log(e)
    })

    console.log('업데이트 완료')
})();

6. .github폴더를 생성하고 그 안에 workflows를 생성한다. 그 안에 main.yml을 생성한다. (git action 파일 생성 과정)

7. 아래 코드를 복사해서 붙여넣는다.

# This is a basic workflow to help you get started with Actions

name: Readme Update

# Controls when the workflow will run
on:
# 1시간에 한번씩 아래 스크립트를 실행한다.
  schedule:
    - cron: "0 */1 * * *"
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm ci
      - name: Update README
        run: npm start
      - name: Commit README
        run: |
          git add .
          git config --local user.email "본인 github 이메일"
          git config --local user.name "본인의 github 이름"
          git commit -m "Update README.md"
          git push

 

8. 깃허브에 push하면 끝이다.

 

위의 gitAction 스크립트는 1시간에 1번씩 되어있지만 실제로는 거의 1시간 30분에 한번씩 되는거 같다. (git action에 스크립트가 쌓여있으면 느려짐)

그러므로 하루에 한번씩 업데이트되게 하는것도 나쁘지 않다 (cron을 이 코드로 변경 "0 0 * * *")

이렇게 하면 아래 사진처럼 최근 5개의 글만 업데이트 된다.

 

 

아래에서 전체 코드 및 결과물을 확인할 수 있다.

• https://github.com/rkdden/rkdden

GitHub - rkdden/rkdden

 

글을 안썻다면 커밋이 되지않는다 (열심히 글을 쓰자)