블로깅 플랫폼 변경: Google Blogger에서 GitHub + Hugo로

< 이미지 출처 = unsplash >

github + hugo로 이사!

이전: google blogger

이전에 사용했던 블로그의 플랫폼은 google blogger였다.
 

tistory나 naver 블로그에 비해 내가 원하는 문법의 허용범위가 더 커서 오랫동안 사용중이었다.
(예를 들면 toc, 각주, MarkDown 문법과 HTML 문법으로의 글 작성 모두 지원 등…)
 

기술 블로그에서 하나의 문서 양이 스크롤을 필요로 한다면 특히나 필요한 것이,
바로 TOC(table of contents) 라고 생각한다.
 

h태그를 이용한 toc의 가장 큰 장점은
전체적인 개요를 한 눈에 살펴볼 수 있고, 또한 해당 태그 부분만의 링크를 가질 수 있다는 점!!
이로써 참고 링크를 추가할 때 문서의 스크롤 위치까지 지정할 수 있는 이점이 있다.¹
 

문제는 바로 이 toc를, google blogger에서 문서 상단에 고정된 방식이 아니라,
스크롤 중에도 상시 표현되는 사이드 바로 빼고 싶었는데 그러자니 xml을 건드리는 수고가 여간 큰게 아니었다.  

게다가 google blogger의 xml 방식 때문인지는 모르겠지만 website 최적화 체감지수가 미묘하게 불쾌하달까? 반응이 반템포 느리다.  

체험해본바 주관적인 최적화 속도는 다음 순서였다.

github.io = velog > tistory >> naver blog > google blogger

이후: github.io

보통 github 블로그 구성시 많이들 이용하는 정적사이트 생성기로서 ruby 언어 기반의 jekyll이 있는데, hugo를 택한 이유는 다음과 같다.

Jekyll
현재 가장 인기 있음(깃헙 별 수 제일 많음)
한글 레퍼런스도 제일 많음
느리다는 제보가 많음(몇 십개의 포스팅 뿐인데도 빌드 하는데 5분씩 걸린다고)
윈도우 공식 지원 안됨

Hexo
자바스크립트(Node.js) 기반
한글 레퍼런스 꽤 많음
메인 개발자가 손을 놓은 듯
개발자가 중국인? 이라 구글링하면 중국어 글이 많이 나옴

Hugo
Go 기반
빌드 빠름
문서화 잘돼있음
깃헙 별 수가 헥소보다 많음
한글 레퍼런스가 거의 없음

출처: http://tadakichi.tistory.com/188

사용하며 느낀 장점

• 사용자 설정이 꽤 자유롭다.
• git으로 관리 가능
• hugo server 명령어를 통해 web과 동일한 수준의 전체 site map 미리보기 가능 (댓글처럼 외부 콤포넌트를 이용한 부분은 제외)
• 게시물의 title, description등을 따로이 설정 가능함으로 SEO에 유리하다.
• 컨텐츠의 원본 문서를 언제든 HTML로 변환할 수 있는 MD파일이 곧 게시글 초안이자 발행 문서임으로, 해당 플랫폼 귀속이 아닌 내 로컬 스토리지에서 관리가 가능하다.
• 위의 장점때문에 플랫폼 이동시, 전체 컨텐츠 이전이 비교적 용이하다.
• 이미지 삽입시, 로컬+github 이중 관리로 링크소실의 염려나 원본 이미지 파일의 관리 등이 수월하다.²
• hugo의 경우 shortcodes(일종의 snippet)를 지원함으로써, markdown의 부족한 부분을 보다 손쉽게 충족하며 문서작성을 돕는다. 이를테면 github의 gist 추가나 tweet, instagram, youtube, vimeo 등을 손쉽게 넣을 수 있도록 기본 built-in으로 들어가있고, 사용자가 직접 추가할수도 있다. ³
• notion, obsidian의 기능중 하나인 callout 기능을 손쉽게 구현 가능
  • hugo에서는 이를 admonition이라고 부른다.⁴
  • hugo의 admonition의 특징은 toggle이 default 옵션이라는 점!!

단점

• 장점에서 언급됐었지만, 아이러니하게도 git으로 관리해야한다는 점
• 때문에 메인 디바이스가 아니거나 모바일인 경우, 배포가 불편하다.
• hugo의 경우, 비공개 게시글이나 비공개 초안 등을 관리한다면 2개의 repository 또는 branch를 운영해야한다.
• 단점일지 조금 애매하긴 한데, hugo에서는 파일명이 곧 url 주소가 된다. 때문에 한글보다는 영어로 파일명을 관리하는 것이 seo에서 유리하다.
• 이는 하나의 게시글당 2번의 commit과 push가 필요하다는 뜻

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Cleaning the public folder (preventing crashes and removing trash)
cd public
find . ! -name '.git' ! -name 'CNAME' -delete
cd ..

# Build the project.
hugo -t LoveIt

# Go To Public folder, sub module commit
cd public

# git pull origin main
git pull origin main

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin main

# Come Back up to the Project Root
cd ..

# blog remote git Commit & Push
git add .

msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

git push origin main

# Create a json file to index with the algolia API
npm run algolia

추가 작업

블로그를 이전하며 새롭게 세팅하고 더불어 추가 연결(?) 작업 등의 목록.

SEO

• google search console, naver search advisor 처리
• google analytics 처리

comment

• github issue를 이용한 utterances를 설치하여 댓글로 자리잡음 하였다.
• light, dark theme를 auto로 설정하여 적용시킬 수 있어 외부 컴포넌트임에도 꽤 이질감 없는 디자인을 보여준다.
• 개발자들이라면 꼭 가지고 있는 github 계정을 활용한 댓글 방식이라, 기술 블로그에 걸맞게 조금이나마 더 나은 전문성과 투명성을 업은 양질의 댓글 문화를 기대할 수 있다(?)

custom domain

이전에 사용하던 도메인(codject.dev)은 프로젝트에서 쓰려고 만든 도메인이었는데, 어떻게 하다보니 블로그에서 쓰고 있었다. inchan.dev 도메인은 작년 justcode 부트캠프와 함께 코딩을 시작하면서 구매해놓았었는데 이제서야 내 이름을 걸고 만든 도메인으로 기술 블로그를 운영해볼까 하는 생각이 들었다.

search service : algolia

algolia에 대한 대략적인 설명이다.

Algolia는 SaaS모델로서 웹 검색을 제공하는 서비스입니다. ⁵,

Algolia는 검색 구현과 검색 분석의 두 부분으로 구성되어 있습니다. 구현 도구를 사용하면 개발자가 사용자를 위한 훌륭한 검색 환경을 더 쉽게 만들고 유지할 수 있습니다. ⁶

장점

• json 파일을 활용한 index 방식이라 그런지 속도가 굉장히 빠르다.
• 검색하고자 하는 문서의 범위를 사용자가 세밀하게 조정 가능하다.
• 검색어 관련 세부적인 분석이 가능하다.
• 소규모 사이트의 경우 free plan으로도 어느정도 커버 가능하다.

단점

• npm - push_algolia_json.js 파일을 실행시키는 스크립트를 만들고 새로운 문서의 발행시마다 API를 통해 indexing을 실행해줘야 하다.⁷ (algolia에서 자동으로 robots.txt 파싱하는 방식이 아닌듯…)

obsidian 연동

obsidian내 해당 폴더를 편입시킴으로써, 모든 기술 문서 통합 관리 가능
이미지 첨부시 obsidian의 자동 링크연결 기능 활용(drag & drop으로 굉장히 편하다.)