.gif)
서두
노션을 알게된지는 꽤 됐지만, 개인 웹사이트 정비와 깃허브 페이지를 이용하기 위해
일부러 사용하지않고있었다.
그러다가 매번 마크다운을 코드에서 작성하고 푸시하는게 귀찮고
좋은 텍스트 에디터를 추가할 방법이 없을까 생각하다가
노션을 오랜만에 다시검색했다
깃허브 페이지와 노션을 연동해서 글을 포스트하는 글이 적힌걸 발견했다.
https://lourcode.kr/posts/Jekyll-기반-Github-Pages와-Notion-Page-연동/
감사하게도 소스코드와 깃허브를 공유해줘서 많은 참고가 됐다.
Notion Database Response의 구조
https://developers.notion.com/reference/block
Github Action과 Repogitery Variable를 이용한 최신 글만 업데이트
코드를 살펴보니 매번 공개설정한 모든글을 불러오기때문에 블로그 운영를 오래하게 되면 글이 쌓이게 되면 오랜시간이 걸릴거라 예상이되서
Notion DB 필터의 조건을 추가했고, 이를 사용하기 위해서, Repo 에서 저장하고 있는 저번 업데이트 날짜를 불러와 그것보다 이후에 수정 된 글만 새로 작성 하게 끔 만들었다.
const lastUpdate = process.env.LAST_UPDATE;
const response = await notion.databases.query({
database_id: databaseId,
filter: {
"and" : [
{
property: "Publish",
checkbox: {
equals: true
}
},{
timestamp: "last_edited_time",
"last_edited_time": {
on_or_after: lastUpdate
}
}
]
}
})
- run: node _scripts/notion-importer.js
env:
NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
DATABASE_ID: ${{ secrets.DATABASE_ID }}
LAST_UPDATE: ${{ vars.LAST_UPDATE}} //저번에 저장한 값 불러오기
//새로 값을 저장하기
- name: Get Current Date and Time
id: date
run: echo "CURRENT_DATE_TIME=$(date -u +"%Y-%m-%dT%H:%M:%SZ")" >> $GITHUB_ENV
//Repo의 변수를 변경하기위해서는 권한이 필요하다.
- name: Update Repository Variable
env:
GITHUB_PAT: ${{ secrets.PAT }}
REPO_OWNER: ${{ github.repository_owner }}
REPO_NAME: ${{ github.event.repository.name }}
VARIABLE_NAME: "LAST_UPDATE" # 설정할 변수의 이름
VARIABLE_VALUE: ${{ env.CURRENT_DATE_TIME }} # 현재 시간과 날짜
run: |
curl -X PATCH \
-H "Authorization: Bearer $GITHUB_PAT" \
-H "Accept: application/vnd.github+json" \
https://api.github.com/repos/$REPO_OWNER/$REPO_NAME/actions/variables/LAST_UPDATE \
-d '{"name": "'$VARIABLE_NAME'", "value": "'$VARIABLE_VALUE'"}'
이 글을 따라
내 사이트와 환경에 따라 수정을 해서 적용을 했고
매번 Push하고 Deploy 하는것에서 벗어나
깃허브 액션을 통한 포스트로 구조를 변경했다.
유튜브 링크가 임베드되지 않는 문제가 있었는데,
notion-to-md 패키지에서 제공하는 setCustomTransformer 을 사용해
n2m.setCustomTransformer("video", async(block) => {
//console.log(block);
const{ video } = block;
if(!video.external.url) return "";
return `{% youtube "${video.external.url}" %}`;
});
비디오를 임베드 할수 있게 만들었다.
이렇게 생성한 명령어는
Jekyll-Youtube 플러그인의 자동 생성으로 Embeded Video로 대체된다.
https://github.com/dommmel/jekyll-youtube
이왕 정비하는 김에 목차와 사이드 내비게이션,
giscus를 사용한 댓글 기능,
그리고 전체적으로 홈페이지 색깔을 다크 테마로 적용했다.
다음에 한다면 목차에 토글기능을 넣어서 긴 목차를 줄여서 볼수있는 방법을 추가할 예정이다.