최근 휴고 블로그에 진행한 작업들

휴고 블로그에 적용한 내용들

휴고 블로그로 세팅하고 옵시디안에서 글을 쓰고, 빌드하고 퍼블리싱 하는 과정들을 모두 자동화했다. 워드프레스처럼 많은 기능들이 있는 것들은 아니지만, 나에게는 딱 이정도가 적절하다. 그간 작업한 것들을 정리해보자면 아래와 같다.

• 옵시디안 마크다운 적용 : 옵시디안에서 글 작성하면 html 태그를 전혀 쓰지 않아서 좋다. 아래처럼 사용하고 있는데, 이걸 휴고로 빌드하면 제대로 되질 않는다. 그래서 변환하는 코드를 만들어서 사용하고 있다. 옵시디안에서는 기존처럼 사용하고, 빌드해서 퍼블리싱될 때 변환한다.

![[이미지파일명 or 주소 | 설명 | 사이즈
[[링크페이지 or 주소

• 구글 애드센스 광고: 기존에 있던 광고도 간단하게 숏코드로 넣었다. 요즘같이 ChatGPT로 점점 검색하는 시대에 누가 페이지를 들어와보기나 할까 싶지만, 그 동안 사용해왔던 것 버리기 좀 그래서 게시글 중간중간에 넣을 수 있도록 추가했다.

• 인기글 추가: 이건 구글 애널리틱스에서 API 받아서 넣어봤는데, 괜찮은 것 같다. 그냥 내 블로그에서 누가 뭘 검색해서 들어오는지 파악하는 용도다. 그럼 그 글에 대해서 좀 더 정리도 해야할 것 같고… 굳이 필요 없는데 그냥 넣고 싶었다. 휴고로 매번 빌드할 때마다 인기글 긁어다가 뿌려주는 방식으로 했는데, 괜찮다.

• 이미지 변환(webp): png를 썼더니 용량이 좀 되서 로딩할 때 느려지는 페이지가 있었다. 그래서 모든 페이지에서 이미지를 찾아서 webp로 변환하고 사이즈도 줄이는 작업을 진행하도록 했다. 물론 빌드할 때 적용된다. 그랬더니 좀 페이지 로딩이 빨라진 페이지도 있다. (오 webp 포맷 좋다. 화질 저하도 없어 보이고…)

• 검색 기능: fuse.js 를 사용해서 전체 페이지 검색 기능을 넣었다. 제목 비중을 높게 설정했고, 게시글, 태그 순서다. 찾아볼 때 좀 편하긴 하다. 사실 옵시디안에서 검색하긴 하지만…

• 댓글 기능: 깃헙의 디스커션을 이용을 댓글을 추가했다. 다른 블로그들에 잘 설명이 되어 있어서 그냥 따라만 하면 붙는다. 댓글을 달 때, 깃헙 계정이 있어야 한다는 점이 좀 그렇지만, 무료다. 댓글들은 깃헙 페이지 디스커션에 그대로 남는다.

• 깃헙 레포: 지금까지 작업한 내용을 깃헙에 올려놨다. 민감 정보는 따로 config.yaml로 뺐고 공개하진 않지만, 다른 코드만 봐도 어떻게 짜야할지 대충 알도록 해놨다. 최근에도 틈 날때마다 계속 수정하고 있어서 git push를 하고 있다.

정적페이지라서 뭐 신경쓸 것이 없다. 욕심도 버렸고 그냥 글을 주구장창 올리게 될 것 같다. 휴고 블로그가 워낙 훌륭하고, 빠르고, 기능이 많아서 마음에 든다. 그리고 이 테마 만든 사람도 깔끔하게 만들어서 사용하고 보기에도 좋다.

아 앞으로 이건 더 추가해야할 기능이 있다.

• 태그 리스트: 괜히 프론터메터에 태그를 적도록 해서, 열심히 적고 있는데 이거 써먹어봐야할 것 같다. 인기글 밑으로 태그 리스트를 좀 보여주면 어떨까 싶다. 그러면 내가 뭔 내용을 주로 쓰는지 한 눈에 파악이 될 것 같다.