Hugo

hugo로 블로그를 운영중에 있지만, 아래처럼 구글 검색결과에 - - 이렇게 표시가 되는 게 보였다. 글을 쓰기만 했지 내글이 어떻게 검색되는지 몰랐다. 중간에 2번 대시가 나오는게 이상해서 hugo layout 을 오랜만에 살펴보기로 했다.

Hugo에서 Math 표현식을 설정하려면 MathJax 또는 KaTeX와 같은 수식표현 라이브러리를 사용해야 한다. 이들 라이브러리는 LaTeX 형식의 수학 표현식을 웹 페이지에 아름답게 렌더링할 수 있게 해준다.

hugo 를 0.104 버전에서 0.125 로 업그레이드 한 내용을 정리해보려 한다. hugo 기능중에 Multilingual mode 를 사용하고 싶었고, 중요한 hugo.toml 파일을 계속 수정해야만 했다. 그래서 별도로 프로젝트 폴더를 분리해서 테스트를 했었고, 기왕 하는김에 버전업도 오랜만해 해보기로 했다.

이 블로그는 hugo 프레임워크로 만들어졌다. CSS 를 딱히 건들지 않다보니, 애플기기(iOS, MacOS, iPadOS)에서는 폰트가 안정감있고 가독성있게 나오는 반면에, window os에서는 사이트가 그다지 이쁘지도 않고 글이 잘 안읽히는 느낌이다. 이유는 window의 기본서체인 맑은고딕 폰트 때문인데, css로 자간을 조금 조정하면 나아지긴 하지만, 아예 다른 폰트로 바꿔보기로 했다. 아래 그림이 맑은고딕 폰트상태의 블로그이다.

이 블로그는 hugo 프레임워크를 사용하고 있고, 테마는 beautiful hugo를 사용하고 있다. 사실 이 블로그를 만들고 나서 디폴트 기능과 디자인 외에 덧붙일만한 기능들을 공부해가며 추가해왔다. 예를 들면 애드센스광고를 특정위치에 넣는다던가, 문단과 문단사이 간격 조정하기 위해 CSS 파일구조를 파악하고 수정하기도 했다.

부트스트랩 아이콘은 2,000개 이상의 아이콘이 있는 무료 고품질 오픈 소스 아이콘 라이브러리이며, SVG, SVG 스프라이트 또는 웹 글꼴 등 원하는 대로 포함가능하다. 아이콘을 적당히 잘쓰면 깔끔한 디자인의 웹페이지를 만들 수 있다. Bootstrap Icons 을 hugo 프로젝트에 연동하는 법을 정리해본다.

파비콘(favicon)은 웹사이트를 대표하는 아이콘을 말하며, 보통 인터넷 웹 브라우저의 주소창 혹은 즐겨찾기 이미지로 사용된다. 사파리 브라우저의 경우 파비콘이 있으면 그 이미지로 표시가 되지만, 파비콘이 없으면 웹사이트 정보를 활용하여 텍스트가 나오곤 한다. 파비콘이 있어줘야 웹사이트 다운 모습이 갖춰지는 듯 하다.

docker 를 이용해서 hugo 개발환경을 구성중인데, golang 과 데비안os 를 최신 이미지로 받더라도, hugo 버전이 항상 v0.80 으로 설치되고 있었다. 방법이 있나 해서 찾아보니, hugo github 에서 release 되는 버전을 직접받아 설치하면 되었다. 짧게 정리해본다.