티스토리에 글을 올리면 깃허브에도 잔디가 심어지도록 RSS와 Github Actions를 사용해 연동해보도록 하겠습니다.
🖇️ 준비하기
1) 티스토리 RSS 설정
'블로그 관리 페이지 - 관리 탭 - 블로그 항목'에서 기타 설정을 사진과 같이 변경해줍니다.
잘 설정되었다면 '자신의_블로그_주소/rss'로 접속 시 다음과 같은 화면이 보입니다.
ex) https://dev-district.tistory.com/rss
2) 깃허브 레포지토리 클론하기
깃허브에서 README.md 파일이 있는 폴더를 클론해옵니다.
선호하는 방법으로 클론해 오면 되며, 개인적으로 SSH 방식을 추천합니다. (참고 링크)
VSCode에서 클론해 온 폴더를 열어 연동할 준비를 마칩니다.
🖇️ Github Action 파일 작성하기(로컬에서 수행)
1) 명령어 입력
VSCode의 터미널을 열고 아래 두 개의 명령어를 입력합니다.
첫 번째로, Node.js 프로젝트로 만들고 기본 설정을 가진 package.json 파일 생성 위한 명령어입니다.
npm init -y결과 예시입니다.
두 번째로, RSS 정보를 파싱할 수 있는 rss-parser 라이브러리를 설치하는 명령어입니다.
npm i rss-parser결과 예시입니다.
2) package.json 파일 작성
package.json 파일을 열어 다음과 같이 작성합니다. 그대로 복사해서 사용해도 됩니다.
{
"name": "기존에_설정된_본인_이름",
"version": "1.0.0",
"description": "",
"main": "readmeUpdate.js",
"type": "module",
"scripts": {
"start": "node readmeUpdate.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"rss-parser": "^3.13.0"
}
}기존 package.json 파일에서 추가된 코드는 다음과 같습니다.
"main": "readmeUpdate.js",
"type": "module",
"scripts": {
"start": "node readmeUpdate.js"
},
3) readmeUpdate.js 파일 생성
루트 디렉토리에서 'readmeUpdate.js' 라는 이름의 자바스크립트 파일을 새로 생성하고, 다음과 같은 내용을 작성합니다.
중간에 위치한 try문 안의 ✅ 표시 부분을 본인의 블로그 rss 페이지 주소로 대체합니다.
import { writeFileSync } from "node:fs";
import Parser from "rss-parser";
// ----- [1] 고정 영역: 자기소개, 기술 스택 등으로 커스텀 -----
const staticContent = `
# Hi there 👋
이 부분을 커스텀
## 📕 Latest Blog Posts
`;
// ----- [2] 자동 갱신 영역: 블로그 RSS 읽어서 최신 글 목록 추가 -----
const parser = new Parser({
headers: {
Accept: "application/rss+xml, application/xml, text/xml; q=0.1",
},
});
(async () => {
let blogSection = "";
try {
// ✅ 아래 parseURL("") 안에 본인의 블로그 rss 페이지 주소를 입력
const feed = await parser.parseURL("✅ https://dev-district.tistory.com/rss");
const latestPostsCount = 5; // 최신 글을 몇 개 가져올지
for (let i = 0; i < latestPostsCount && i < feed.items.length; i++) {
const { title, link } = feed.items[i];
console.log(`${i + 1}번째 게시물: ${title} (${link})`);
blogSection += `<a href="${link}">${title}</a></br>\n`;
}
} catch (error) {
console.error("RSS 파싱 중 오류 발생:", error);
blogSection += "블로그 글을 불러오지 못했습니다.\n";
}
// ----- [3] 파일 작성 -----
const finalContent = staticContent + blogSection;
writeFileSync("README.md", finalContent, "utf8");
console.log("README 업데이트 완료");
})();readmeUpdate.js 는 기존의 README.md 에 덮어씌워지게 되고, 앞으로는 해당 파일을 수정해 깃허브 프로필을 꾸미면 됩니다.
4) main.yml 파일 생성
Github Action 파일을 생성하기 위해 루트 디렉토리에서 '.github'(온점 주의) 폴더 - 'workflows' 폴더 - 'main.yml' 파일을 생성합니다.
해당 폴더 구조는 다음과 같습니다. -> '.github/workflows/main.yml'
main.yml 파일에는 아래의 내용을 작성합니다.
코드 아래쪽의 ✅ 표시 부분을 본인의 깃허브 이메일과 아이디로 대체합니다.
# This is a basic workflow to help you get started with Actions
name: Readme Update
# Controls when the workflow will run
on:
workflow_dispatch: // 🅰️ 깃허브 Actions 탭에서 수동 실행 버튼이 생김
schedule:
- cron: "0 * * * *" // 🅱️ 매시간 0분에 action 실행
permissions:
contents: write
# 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 "✅ 본인_깃허브_이메일"
git config --local user.name "✅ 본인_깃허브_아이디(이름)"
git commit -m "Update README.md"
git push🅰️ 부분의 코드는 테스트를 위한 수동 실행 버튼을 추가하기 위함입니다.
🅱️ 부분의 cron은 일정 실행 시간을 설정하는 문법으로, Github Action에서는 UTC를 기준으로 작성합니다.
각 자리는 '분(0-59) 시(0-23) 일(1-31) 월(1-12) 요일(0-7, 0=월)'을 나타냅니다.
아래의 cron 표현식 표를 참고하여 원하는 주기를 설정할 수 있습니다.
5) .gitignore 파일 생성
깃허브에 올라갈 필요가 없는 파일을 제외하기 위해 다음의 내용으로 루트 디렉토리에 .gitignore 파일을 생성합니다.
/node_modules
6) 깃허브에 push
로컬 환경에서 수행해야 할 작업이 모두 끝났습니다!
최종적인 폴더 구조는 다음과 같습니다.
깃허브에 변경사항을 모두 push 합니다.
git add .
git commit -m "티스토리 깃허브 연동"
git push origin main
🖇️ Github Action 설정하기(깃허브에서 수행)
1) 권한 허용
레포지토리의 설정 탭에 들어가 'Setting -> Actions -> General' 메뉴의 가장 마지막 항목인 'Workflow permissions' 항목을 'Read and write permissions'로 설정하고 저장합니다.
2) 동작 테스트
블로그에 테스트용 글을 하나 업로드한 뒤, 액션 탭의 'Readme Update' 워크플로우에 들어갑니다.
그리고 워크플로우를 수동으로 동작시킬 수 있는 'Run workflow' 버튼을 눌러 업데이트가 잘 동작하는지 테스트해봅니다.
예를 들어, 아래와 같이 'test'라는 제목의 글을 업로드하고
워크플로우를 수동으로 동작시켜 보면 노란원이 돌아가며 실행되며
초록색 체크 표시가 뜨며 동작이 완료되고
최신 글 항목도 첫 번째로 잘 업데이트된 모습을 볼 수 있습니다.
🖇️ 정리하기
Github Actions을 사용하지 않았을 때는 README.md 파일을 수정하고 커밋하면 바로 프로필에 반영되었지만,
이제부터는 readmeUpdate.js 파일을 수정하고 Actions의 워크플로우를 한 번 실행시켜 주어야 프로필에 반영됩니다.
예시 화면으로 저의 깃허브 프로필 링크를 올려두겠습니다!
Action 과정에서 오류가 발생하면 깃허브에 등록한 이메일로 오류가 발생했다는 메일이 옵니다.
업데이트한 글이 없어도 커밋할 것이 없다며('nothing to commit') 오류 메일이 전송되니 참고해주세요.
읽어주셔서 감사합니다:)
