• 개요
• super.so 페이지 발행
• 프록시 배포하기
• 워커 스크립트 배포
• 환경변수 설정
• (선택) 커스텀 도메인 설정
• (선택) 댓글창 설정
• (선택) 배포가 안돼요!
• 커스텀
• 유지보수
• 끝

개요

지금 보고 있는 이 블로그는 꽤 괜찮다.

디자인 예쁘고, 속도도 빠르고, 검색에도 잘 노출되고, 댓글창도 있고, 개인 도메인도 달려있다.

무엇보다 가장 좋은 건 내 노션 페이지를 그대로 발행할 수 있다는 것이다.

이걸 위해 지금까지 여러 시도들을 했지만, 별로 만족스럽지 않았다.

느리거나 오류가 많아서 손이 많이 갔고, 그렇다고 월 5천원이 넘는 우피를 쓰기엔 가격이 아까웠다.

(커피는 잘 사먹지만 5천원은 아깝다? 😵🔨)

그리고 마침내 괜찮은 방법을 찾아냈는데, 꽤 쓸만해서 공유하려고 한다.

내가 만든 건 아니고, 훌륭한 무료 서비스—super.so—를 기술을 활용해 커스텀했다.

무엇을, 왜 커스텀 한 것인지 Before & After를 준비했다.

땡칠로그

고민을 나누는 공간

zrr.kr

• SEO 유료
• 커스텀 도메인 사용 유료
• 커스텀 JS, CSS 유료

댓글창을 달거나 디자인을 수정할 수 없다

• 서비스 제공자 뱃지

땡칠로그

고민을 나누는 공간

chll.it

• SEO 무료
• 커스텀 도메인 사용 무료

(물론 도메인은 직접 사야한다)

• 커스텀 JS, CSS 무료

뱃지 제거, 댓글창, 여백 수정

• 레이턴시 차이 없음

intersection 기반 prefetch 지원 (감사합니다! @희수)

여기까지 읽었을 때 설득이 된다면, 지금부터 공유하는 방법을 따라하면 된다.

super.so 페이지 발행

가입 절차는 생략하도록 하자.

로그인하면 다음과 같이 노션 페이지를 요구하는 페이지가 뜬다.

정보를 넣고 Create site를 눌러 진행한다. 이 때 사이트명은 영문으로 적어야 한다.

디자인도 다양하게 꾸밀 수 있는데, 이건 각자의 몫으로 하자 ^_^

프록시 배포하기

CloudFlare는 다양한 인프라 서비스를 제공하는 굉장히 훌륭한 서비스다.

그 중에는 worker라는 서비스도 있는데, 우리는 이것을 리버스 프록시이자 중간자로 활용할거다.

요청을 포워딩 하고, 그 응답을 잘 조작해서 보내주는 것이 목적이다.

가입 절차는 생략하고, 워커부터 배포해보자.

워커 스크립트 배포

이미 워커 스크립트를 Github에 공유해두었다.

다음 버튼을 통해 쉽게 배포가 가능하다!

버튼을 누르면 등장하는 간단한 후속 단계를 소개한다.

1. Github 승인

Github Actions 등록을 위해 깃허브 인증이 필요하다.



2. CloudFlare 계정 설정


이어서 Github Actions에 사용할 계정 ID와 API 토큰이 필요하다.

Account ID는 대시보드에 바로 있고, API 토큰은 약간 귀찮아서 과정을 첨부한다.

🔑API 토큰 얻기

완료되면 Connect account를 누르면 된다.

3. Github Actions 설정
1. 포크


‘Fork the repository’를 선택한다.



원하는 위치로 포크한다.

2. Workflows 활성화


보안을 위해 Fork의 workflow는 기본 비활성화 되어있다.



링크를 눌러 활성화해주자.

환경변수 설정

우리의 worker 스크립트가 사용할 환경 변수를 몇 가지 지정해주자.

환경변수 지정 전까지는 접속이 되지 않을 것이다.

포크한 레포지터리의 Settings - Secrets and variables - Actions - Variables 탭으로 이동한다.

New repository variable을 눌러 환경 변수를 추가한다.

추가해야하는 Variable은 다음과 같다.

커스텀

여기서 더 커스텀하고 싶을 수도 있다.

그래서 포크한 레포지터리의 /cloudflare-worker/static에 커스텀할 수 있는 파일들을 만들어두었다.

각각 customized.per-site.css, customized.per-site.js다.

이곳에 원하는 css, js를 삽입하면 되겠다.

유지보수

가끔 Repo에 업데이트가 있을 텐데, 주로 스타일에 관한 내용이라서 충돌이 없을 것이다.

적용하고 싶다면 Sync Fork - Update branch를 눌러 최신버전으로 갱신이 가능하다.

끝

마침내 모든 것이 끝났다. 배포된 페이지에 들어가서 확인해보고, 꾸미면 된다.

간단한 것 같지만 삽질을 꽤 많이 했다. (시험기간엔 시험빼고 다 재밌다)

만든 페이지는 곧 검색에도 노출되기 시작할텐데, 더 적극적인 노출을 원하면 구글 서치 콘솔/네이버 서치 어드바이저 등을 사용하자.

좋은 자료를 공유할 수 있게 되어서 기쁩니다 😀 제안이나 질문은 댓글로 부탁드립니다.