개요
지금 보고 있는 이 블로그는 꽤 괜찮다.
디자인 예쁘고, 속도도 빠르고, 검색에도 잘 노출되고, 댓글창도 있고, 개인 도메인도 달려있다.
무엇보다 가장 좋은 건 내 노션 페이지를 그대로 발행할 수 있다는 것이다.
이걸 위해 지금까지 여러 시도들을 했지만, 별로 만족스럽지 않았다.
느리거나 오류가 많아서 손이 많이 갔고, 그렇다고 월 5천원이 넘는 우피를 쓰기엔 가격이 아까웠다.
(커피는 잘 사먹지만 5천원은 아깝다? 😵🔨)
그리고 마침내 괜찮은 방법을 찾아냈는데, 꽤 쓸만해서 공유하려고 한다.
내가 만든 건 아니고, 훌륭한 무료 서비스—super.so—를 기술을 활용해 커스텀했다.
무엇을, 왜 커스텀 한 것인지 Before & After를 준비했다.
- SEO 무료
- 커스텀 도메인 사용 무료
(물론 도메인은 직접 사야한다)
- 커스텀 JS, CSS 무료
뱃지 제거, 댓글창, 여백 수정
- 레이턴시 차이 없음
intersection 기반 prefetch 지원 (감사합니다! @희수)
여기까지 읽었을 때 설득이 된다면, 지금부터 공유하는 방법을 따라하면 된다.
super.so 페이지 발행
가입 절차는 생략하도록 하자.
로그인하면 다음과 같이 노션 페이지를 요구하는 페이지가 뜬다.
정보를 넣고 Create site를 눌러 진행한다. 이 때 사이트명은 영문으로 적어야 한다.
블로그 메인으로 쓸 노션 페이지가 있어야 한다
우측 상단의 공유 - 게시를 눌러 웹 링크를 얻는다.
디자인도 다양하게 꾸밀 수 있는데, 이건 각자의 몫으로 하자 ^_^
프록시 배포하기
CloudFlare는 다양한 인프라 서비스를 제공하는 굉장히 훌륭한 서비스다.
그 중에는 worker라는 서비스도 있는데, 우리는 이것을 리버스 프록시이자 중간자로 활용할거다.
요청을 포워딩 하고, 그 응답을 잘 조작해서 보내주는 것이 목적이다.
가입 절차는 생략하고, 워커부터 배포해보자.
유의사항
커스텀 도메인을 설정하려면 CloudFlare에 해당 도메인을 등록해야 합니다.
DNS 서버 이전이 불가능하다면 NGINX 웹 서버를 통한 방법을 추천드립니다 🥲
워커 스크립트 배포
이미 워커 스크립트를 Github에 공유해두었다.
다음 버튼을 통해 쉽게 배포가 가능하다!
버튼을 누르면 등장하는 간단한 후속 단계를 소개한다.
- Github 승인
Github Actions 등록을 위해 깃허브 인증이 필요하다.
- CloudFlare 계정 설정
이어서 Github Actions에 사용할 계정 ID와 API 토큰이 필요하다.
Account ID는 대시보드에 바로 있고, API 토큰은 약간 귀찮아서 과정을 첨부한다.
API 토큰 얻기완료되면 Connect account를 누르면 된다.
- Github Actions 설정
- 포크
- Workflows 활성화
‘Fork the repository’를 선택한다.
원하는 위치로 포크한다.
보안을 위해 Fork의 workflow는 기본 비활성화 되어있다.
링크를 눌러 활성화해주자.
환경변수 설정
우리의 worker 스크립트가 사용할 환경 변수를 몇 가지 지정해주자.
환경변수 지정 전까지는 접속이 되지 않을 것이다.
포크한 레포지터리의 Settings - Secrets and variables - Actions - Variables 탭으로 이동한다.
New repository variable을 눌러 환경 변수를 추가한다.
추가해야하는 Variable은 다음과 같다.
변수명 | 값 | 비고 |
TARGET_DOMAIN | super.so 도메인 | ㅤ |
SERVE_DOMAIN | 블로그 도메인 | 커스텀 도메인이 없으면 기본 도메인 사용 |
(선택) 커스텀 도메인 설정
Settings - Triggers에서 커스텀 도메인 설정이 가능하다.
유의사항
위에서 언급했다시피 커스텀 도메인을 등록하기 위해서는 CloudFlare 도메인 등록이 필요하다.
DNS 이전이 불가능한 상황이라면 NGINX 리버스 프록시를 통한 방법을 추천한다.
(선택) 댓글창 설정
Giscus를 이용해서 댓글창을 달아본다.
Giscus?
갑자기 등장한 Giscus는 좀 의아할텐데, Giscus는 Github Discussion을 통해 댓글창을 운영할 수 있는 서비스이다.
홈페이지에 가면 쉽게 설정 가능하므로 자세한 설명은 생략하려고 한다.
어려운 부분이 있다면 댓글 부탁드립니다.
포크한 레포지터리의
/cloudflare-worker/static/giscus.js 에 가면 설정이 있다.
최상단 주석을 해제하고, Giscus 레포지터리 정보 등을 입력하면 댓글창이 활성화된다.
깃허브 인터페이스를 벗어나지 않고 작업할 수 있다.
(선택) 배포가 안돼요!
자동으로 배포되는것이 기본이지만, 그렇지 않다면 직접 배포해줄 수도 있다.
Actions - Deploy Worker에서 워크플로우를 직접 실행시켜주자.
커스텀
여기서 더 커스텀하고 싶을 수도 있다.
그래서 포크한 레포지터리의
/cloudflare-worker/static에 커스텀할 수 있는 파일들을 만들어두었다.
각각
customized.per-site.css, customized.per-site.js다.이곳에 원하는 css, js를 삽입하면 되겠다.
유지보수
가끔 Repo에 업데이트가 있을 텐데, 주로 스타일에 관한 내용이라서 충돌이 없을 것이다.
적용하고 싶다면
Sync Fork - Update branch를 눌러 최신버전으로 갱신이 가능하다.끝
마침내 모든 것이 끝났다. 배포된 페이지에 들어가서 확인해보고, 꾸미면 된다.
간단한 것 같지만 삽질을 꽤 많이 했다. (시험기간엔 시험빼고 다 재밌다)
만든 페이지는 곧 검색에도 노출되기 시작할텐데, 더 적극적인 노출을 원하면 구글 서치 콘솔/네이버 서치 어드바이저 등을 사용하자.
좋은 자료를 공유할 수 있게 되어서 기쁩니다 😀 제안이나 질문은 댓글로 부탁드립니다.
Made with Bullet