Search

loconotion과 Notion으로 블로그 이전

date
2022/06/28
tags
블로그
노션
4 more properties
노션 블로그 시리즈

워드프레스

최초의 codingdad 블로그는 워드프레스를 사용해서 AWS의 Lightsail에 호스팅을 했어요. 워드프레스가 손에 익기도 했고, 서버위에 올려서 동적으로 하고 싶었던 것도 많았더랬죠. 하지만 아무리 워드프레스의 편집환경이 발전했다고 해도 노션과 같은 Wyswyg 기반의 편집기에는 비할바가 아닌더라고요. 노션은 잠깐 짬날때 페이지 열어서 몇 줄 타이핑하다가 다시 닫아도 되는데, 워드프레스는 브라우징해서 글 찾아 들어가고 편집 눌러서 편집하다가 저장하고 나오고 하는 과정이 은근히 진입장벽으로 작용해서 글쓰기 자체를 포기하게 만드는 느낌이에요.

notablog

notablog
dragonman225
그래서 노션을 블로그로 사용할 수 있을까 찾아보던 중에 눈에 들어온 것이 notablog 프로젝트예요. notablog는 노션의 데이터베이스를 실제 데이터베이스처럼 사용하는게 특징이에요. 신기하게도 제작자 본인이 만든 노션 API를 써서 데이터베이스를 긁어온 다음에, 블로그 리스트나 태그별 리스트 페이지와 함께 static 사이트를 생성주는 방식입니다. 이렇게 리스트 페이지를 생성해주는게 제일 맘에 들었습니다.
그런데 사용하다보니 이 방식에 단점이 있었어요. 데이터베이스를 가져다 웹을 재구성하는 방식이다 보니 단순한 페이지 컨텐츠가 아니라 링크드 데이터베이스와 뷰를 마구 사용하는 복잡한 페이지는 notablog에서 지원하지를 않아요. notablog에서 지원하지 않는 노션의 기능을 사용할 수 없다는 것은 정말 심각한 문제죠. notablog 프로젝트에 디펜던시가 걸려서 제약이 생기니까요.

loconotion

그렇게 찾게 된 것이 loconotion 프로젝트예요. loconotion은 노션의 웹 퍼블리싱 기능을 그대로 사용해서 얻은 HTML을 살짝 가공하고, 필요한 것을 끼워넣고, URL을 예쁘게 바꿔주는 방식입니다. 그렇다보니 노션과 가장 가까운 모습의 결과물을 볼 수 있는 것이 장점이죠. 노션의 모든 기능을 자유롭게 사용하면 됩니다. loconotion에서 기능을 지원해줄 때가지 기다릴 필요가 없어요.
반면 리스트 페이지를 생성해준다거나, 페이지의 프로퍼티를 활용해서 URL을 교체한다거나 하는 일은 어려운 것이 단점입니다.
하지만 노션에는 이미 데이터베이스와 뷰라는 풍부한 기능이 있어요. 이 기능을 잘 활용하면 리스트 페이지 정도는 만들어 낼 수 있습니다. 어떤 면에서는 약간 ‘수동성’이 겸비된 이 방식이 원하는 레이아웃을 만들어 내기는 더 좋은 것 같기도 해요.
loconotion에서 제일 불편한 것은 URL 교체를 위해서는 설정 파일에 페이지의 GUID와 slug에 대한 매핑을 모두 기술해줘야 한다는 점이에요. 글 편하게 쓰려고 옮기는 건데, 새 페이지 추가할 때마다 설정 파일을 편집해서 올린다는 건 말이 안되겠죠? 그래서 notablog와 loconotion을 중간체쯤 되는 무엇인가가 있으면 좋겠다는 생각에, loconotion에 데이터베이스를 인식하는 기능을 추가하게 되었습니다.

Notion API로 URL과 slug 매핑하기

노션은 사용하기 편한 Restful API를 제공하고 있어요. 이미 저의 노션 데이터베이스에는 url slug 프로퍼티가 있었기 때문에, API를 사용해서 데이터베이스를 얻어온 후에 페이지의 GUID와 slug를 매핑하기만 하면 되는 거죠. 그 후에 loconotion에 있는 get_page_slug() 메소드에서 매핑 테이블을 활용해서 slug를 반환하면 끝! 입니다.
아래는 Notion API로 데이터베이스 정보를 얻어온 후에 페이지의 slug 프로퍼티를 읽어오는 코드입니다.
self.slug_dict = {} database_id = self.config.get("database_id", None) token = self.config.get("token", None) url = f'https://api.notion.com/v1/databases/{database_id}/query' headers = { "Authorization" : f"Bearer {token}", "Notion-Version": "2021-08-16" } r = requests.post(url, headers=headers) res_dict = r.json() log.info( f'url = {url}') log.info( f'headers = {headers}') log.info( f'respons = {json.dumps(res_dict, indent=4)}') for page in res_dict['results']: id = page['id'].replace("-", "") try: rich_text = page['properties']['slug']['rich_text'] if len(rich_text) == 0: continue slug = page['properties']['slug']['rich_text'][0]['text']['content'] except Exception as e: log.error(f'Exception in getting slug. id:{id}, error:{e}') continue self.slug_dict[id] = slug log.info ( f'slug_dict = {self.slug_dict}')
Python
한 10년 만에 파이썬 코딩을 해봤는데, 10년만에 운전하는 것처럼 힘드네요. 어쨌든 이렇게 해서 블로그 이전이 마무리되었습니다. 이제는 컨텐츠만 열심히 채워넣으면 되는데…

부록1 - 자바스크립트로 URL 리다이렉트

워드프레스 시절의 URL과 loconotion의 URL이 다르게 생겨서 혹시나 예전 링크를 통해서 들어오는 분은 페이지를 찾을 수가 없다는 404 에러를 만나게 됩니다. 이 분들이 알맞은 페이지를 찾아갈 수 있도록 자동으로 URL을 변경하는 작업을 해봤어요.
방법은 이렇습니다. 깃헙 페이지에 404.html을 넣어두면 404 에러가 났을때 해당 페이지를 보여줘요. 404.html에 자바스크립트를 넣어서 요청된 URL을 변경해주면 됩니다.
워드프레스시절에 쓰던 URL은 https://codingdad.me/2019/09/18/toon-shading-universalrp/ 방식이었고, 지금 URL은 https://codingdad.me/2019-09-18-toon-shading-universalrp 방식이에요. 슬래시가 하이픈으로 바뀌었죠.
loconotion에는 전체 페이지 혹은 특정 페이지 별로 스크립트를 삽입하는 기능이 있어요. 아래는 loconotion에 들어가는 toml 포맷의 설정인데, 404페이지의 GUID 아래에 자바스크립트를 삽입하는 내용입니다. (노션이 toml 문법을 지원하지 않네요. )
[pages] [pages.59f6278a93e04df09e80b20b9d2a3bca] no-links = true [[pages.59f6278a93e04df09e80b20b9d2a3bca.inject.body.script]] inner_html=""" const originalUrl = window.location.href; const regexOriginal = new RegExp('^https://codingdad.me/([0-9]{4})/([0-9]{2})/([0-9]{2})/([a-zA-Z0-9_\\-]+)'); var url = '/'; if (regexOriginal.test(originalUrl)) { const match = originalUrl.match(regexOriginal); url = '/' + match[1] + '-' + match[2] + '-' + match[3] + '-' + match[4]; } setTimeout(function(){ window.location.href = url; }, 1000); """
Plain Text

부록2 - Xml 사이트맵 생성

사이트맵을 만드는게 필수는 아니지만 사이트맵을 만들어서 구글이나 네이버에 등록해두면 왠지 검색이 잘될 것 같은 기분이 들죠. 특히 구글 서치 콘솔에 등록해두면 주기적으로 분석 정보도 보내줘서 유용합니다.
사이트맵은 loconotion에 작업을 하기보다는 깃헙 액션을 사용했어요. 깃헙 액션은 코드가 올라오면 자동으로 빌드, 테스트, 배포등을 할 수 있는 CI/CD 서비스입니다. 깃헙 페이지에 코드를 올리면 페이지가 생성되는 것도 사실은 이 깃헙 액션이 하고 있었더라고요.
깃헙에 가셔서 Actions 탭을 눌러보면 깃헙이 열심히 일한 기록이 보여요.
사이트맵 생성도 동일한 방법으로 할 수 있어요. loconotion이 생성한 정적 사이트를 깃헙에 올리면, 사이트맵 생성 워크플로우가 동작하면서 사이트맵을 만들어줍니다.
아래는 제가 사용하는 설정입니다. uses 부분을 보시면 cicirello님과 stefanzweifel 님의 액션을 사용하고 있어요.
name: Generate xml sitemap on: push: branches: [ main ] jobs: sitemap_job: runs-on: ubuntu-latest name: Generate a sitemap steps: - name: Checkout the repo uses: actions/checkout@v2 with: fetch-depth: 0 - name: Generate the sitemap id: sitemap uses: cicirello/generate-sitemap@v1 with: base-url-path: https://codingdad.me/ - name: Output stats run: | echo "sitemap-path = ${{ steps.sitemap.outputs.sitemap-path }}" echo "url-count = ${{ steps.sitemap.outputs.url-count }}" echo "excluded-count = ${{ steps.sitemap.outputs.excluded-count }}" - name: Commit & Push uses: stefanzweifel/git-auto-commit-action@v4 with: commit_message: Sitemap
YAML