Tips

티스토리에 글 작성하면 자동 Github 커밋되게 하기(feat. GitActions)

dawonny 2024. 5. 27. 17:19
728x90
반응형

블로그에 글을 쓰면 자동으로 커밋되는 걸 설정해보고 싶어서 도전하는 포스팅!

이러면 좀 더 쓰고 싶은 마음이 들지 않을까 하는.. ;)

잘쓰고 있었는데..

 

사실 원래 쓰던 tistory-readme-stats 서비스 가 있었는데 이제 티스토리에서 open api 서비스를 종료해서 사라져버렸다.

아무튼 GitAction 을 활용하는 방법이 있길래 이걸로 해볼까 한다. 차근차근 해보자!

 

RSS 설정

먼저 티스토리 블로그 관리 > 블로그로 들어간다

 

위 처럼 설정해주고 변경사항을 저장한다

그리고 [본인 블로그 주소]/rss 주소로 접속해서 잘 나오는지 한번 확인해보기

ex: https://dawonny.tistory.com/rss

 

GitAction

최신 글 목록 5개를 보여주는 부분을 README에 추가하려고 한다.

깃허브에 처음 들어가면 보이는 소개 페이지가 되겠다.

로컬에 이 레포지터리를 clone 해보자

git clone 한 폴더를 열어주고, 다음과 같은 명령어를 입력한다.

npm init 을 하고 rss-parser 를 설치하기 위함이다.

npm init -y
npm i rss-parser

 

그리고 package.json 파일에 들어가 type 과 start 를 추가해준다. 코드는 아래와 같다.

{
  ...
  "main": "index.js",
  "type": "module", // 추가
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "start" : "node readmeUpdate.js" // 추가
  },
  ...
}

 

이번에는 readmeUpdate.js 를 아래와 같이 작성해보자.

RSS 피드 가져오기에 있는 블로그 주소를 본인의 블로그 주소로 바꿔줘야한다.

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

// 기존 README.md 파일 읽기
const readmePath = "README.md";
let readmeContent = readFileSync(readmePath, "utf8");

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

// 최신 블로그 포스트 추가하는 함수
(async () => {
  // RSS 피드 가져오기
  const feed = await parser.parseURL("https://dawonny.tistory.com/rss"); // 수정

  // 최신 5개의 글의 제목과 링크를 추가할 텍스트 생성
  let latestPosts = "### Latest Blog Posts\n\n";
  for (let i = 0; i < 5 && i < feed.items.length; i++) {
    const { title, link } = feed.items[i];
    latestPosts += `- [${title}](${link})\n`;
  }

  // 기존 README.md에 최신 블로그 포스트 추가
  const newReadmeContent = readmeContent.includes("### Latest Blog Posts")
    ? readmeContent.replace(
        /### Latest Blog Posts[\s\S]*?(?=\n\n## |\n$)/,
        latestPosts
      )
    : readmeContent + latestPosts;

  if (newReadmeContent !== readmeContent) {
    writeFileSync(readmePath, newReadmeContent, "utf8");
    console.log("README.md 업데이트 완료");
  } else {
    console.log("새로운 블로그 포스트가 없습니다. README.md 파일이 업데이트되지 않았습니다.");
  }
})();

 

Github Actions 를 이용해서 주기적으로 readmeUpdate.js 를 실행해서 README.md 파일을 업데이트하게 해보자.

.github 폴더 안에 workflows 폴더를 만들고 그 안에 update-readme.yml 파일을 생성한다.

 

 

이제 update-readme.yml 파일을 작성해줄 것이다. 그 전에 토큰을 만들어줘야한다.

나는 GH_PERSONAL_TOKEN 이라는 이름의 토큰을 만들어주었다.

토큰 권한은 workflow scope 권한을 포함해서 필요한 권한을 선택해주면 된다.

 

해당 레포지터리 페이지의 setting > secrets and variables > actions 로 이동해서 새로운 시크릿을 추가하는 것도 잊지 말자.

복사해두었던 토큰 값으로 설정해주면 된다.

 

update-readme.yml 파일은 다음과 같이 작성한다.

cron 을 원하는 대로 설정하고(나는 1시간에 한 번씩 업데이트가 되도록 했다) github 이메일과 github 사용자 이름, 그리고 방금 만들었던 토큰 이름을 수정하면 된다.

name: Update README

on:
  schedule:
    - cron: "0 */1 * * *" # 매 시간 정각에 실행
  push:
    branches:
      - main

jobs:
  update-readme:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16"

      - name: Install dependencies
        run: npm ci

      - name: Run update script
        run: npm start

      - name: Commit README
        run: |
          git config --local user.name 'your-name' # 수정
          git config --local user.email 'your-email' # 수정
          if [ -n "$(git status --porcelain)" ]; then
            git add README.md
            git commit -m 'Update README with latest blog posts'
            git push
          else
            echo "No changes to commit"
          fi
        env:
          GH_PERSONAL_TOKEN: ${{ secrets.GH_PERSONAL_TOKEN }} # 수정

 

변경 사항이 있을 때만 commit 을 하도록 먼저 git status --porcelain 명령어를 사용해서 변경사항을 확인하도록 했다.

 

이제 모두 끝났다! git push 을 해서 반영해주자.

 

참고)
나는 분명 토큰에 workflow 권한을 주었는데도 자꾸 아래와 같은 오류가 났다.


답답해서 찾던 중 Mac 의 키체인 접근에서 문제를 해결해보라는 글을 보았다.


확인해보니까 내가 새로 생성한 토큰 값이 아닌 다른 토큰으로 채워져 있는 것 같았다.
새로운 토큰 값으로 수정하고 다시 push를 시도해보았다. 

해결! 🥳

 

아래처럼 잘 반영되는 것을 확인할 수 있다.

 

나는 토큰이 잘 반영되지 않는 문제 때문에 시간을 좀 잡아먹었지만,

과정 자체는 단순해서 다른 분들은 트러블 슈팅없이 완성하셨으면 좋겠다!


 

+추가)

최근 글이 업데이트 되지 않았는데도 README 가 수정되는 이슈

 

위처럼 http, https 가 의미없이 계속 반대로 바뀌며 README 에 commit 되고 있는 이슈가 발생했다.

불러온 블로그 주소가 http 일 때에는 무조건 https 로 보이도록 수정을 한다음, 기존 컨텐츠와 비교할 수 있도록 코드를 수정해봤다.

  // 최신 5개의 글의 제목과 링크를 추가할 텍스트 생성
  let latestPosts = "### Latest Blog Posts\n\n";
  for (let i = 0; i < 5 && i < feed.items.length; i++) {
    let { title, link } = feed.items[i]; // const -> let 으로 수정
    link = link.startsWith('http://') ? 'https://' + link.slice(7) : link; // 추가
    latestPosts += `- [${title}](${link})\n`;
  }

 

 

이제 이런 의미없는 README commit 이 일어나지 않길 바라며 ...

 

+추가)

GITHUB_TOKEN 사용

댓글로 알려주신 내용을 추가한다.

 

위에서 내가 설명한 내용에서는 별도의 개인 액세스 토큰을 생성하고 시크릿에 등록을 하는 내용이었다.

하지만 Github Actions 에서 자동으로 제공하는 GITHUB_TOKEN 을 사용하면 그 과정을 생략할 수 있다.

예를 들어 아래와 같이 사용할 수 있다.

github_token: ${{ secrets.GITHUB_TOKEN }}

 

GITHUB_TOKEN 은 해당 워크플로우에 필요한 최소한의 권한만 가지고 있어 보안성이 향상된다.

또한 개인 액세스 토큰과 달리 만료 걱정이 없고, 레포지터리마다 별도로 설정할 필요가 없다.

 

 

 


도움이 되셨다면 좋아요 한 번만 부탁드립니다! :-)


ref: https://systorage.tistory.com/entry/Tistory-Nodejs%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%B8%80-%EC%9E%91%EC%84%B1-%EC%8B%9C-Github%EC%97%90-commit-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

728x90
반응형