Hugo
화면 크기에 따른 블로그 이미지 비율 조정
본 블로그는 PC에서 접속하는 환경을 대상으로 작성되었다. 최근 스마트폰을 통해 블로그를 확인해보니, 이미지들의 비율이 블로그 작성시에 고려한 형태와 다른 것을 깨달았다. 웹페이지가 PC에서는 가로가 긴 화면을 통해 보이고, 스마트폰에서는 세로가 긴 화면을 통해 보이는 것이 위 문제의 원인이다. 다양한 디바이스의 화면 크기를 고려해서 웹페이지를 구성하는 것을 [반응형 웹 디자인]이라 한다. 필자는 반응형 웹 디자인까지는 아니더라도, 최소한 블로그에 들어가는 이미지가 화면 크기에 대해 비율적으로 삽입되게 하고자 했다. 확인 과정에서, 다음과 같은 이유로 테마의 short code를 일부 추가했다. [Hugo]에서는 기본적으로 md 서식을 통한 블로그 작성이 가능하다. [md 기반 이미지 사이즈 조절]이 가능했던 것으로 보이나, 필자의 블로그에는 적용되지 않았다. md 기반으로 이미지를 삽입하면, 이미지 크기가 최대로(화면 가로 크기 기준) 설정된다. [Hugo Refresh 테마]에서는 HTML 서식 기반의 블로그 작성을(short code) 제공한다. Hugo Refresh 테마의 figure 태그는 고정 크기로 이미지를 삽입하도록 한다. Hugo는 Static Site Generator로, 화면 크기를 동적으로 얻는 것은 불가하다. Hugo Refresh 테마의 short code (themes/hugo-refresh/layouts/shortcodes 폴더 내부 파일 참조) 중 figure.html은 다음과 같이 작성되어 있다. {{- $original := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "src")) -}} {{- $width := printf "%s" (.Get "width" ) -}} {{- $height := printf "%s" (.Get "height") -}} {{- $size := printf "%sx%s" $width $height -}} ... {{- with $original -}} {{- $image := .Resize $size -}} ... {{- end -}} 이 중, figure 태그의 width 또는 height에 “…%“를 할당하지 못하도록 하는 코드는 ‘$image := .Resize $size’이다. 따라서, figure.html을 복사한 figure_per.html 파일을 만들고, 다음과 같이 수정했다. {{- $original := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "src")) -}} {{- $width := printf "%s" (.Get "width" ) -}} {{- $height := printf "%s" (.Get "height") -}} {{- $caption := printf "%s" (.Get "caption") -}} {{- $alt := printf "%s" (.Get "alt") -}} {{- with $original -}} {{- $image := . -}} <div class="columns is-centered container"> <div class="column is-full"> <figure> {{- if $caption -}} <img class="rounded-corners" src="{{- $image.RelPermalink -}}" width="{{- $width -}}" height="{{- $height -}}" alt="{{- $alt -}}" > {{- else -}} <img class="rounded-corners" src="{{- $image.RelPermalink -}}" width="{{- $width -}}" height="{{- $height -}}" > {{- end -}} {{- if $caption -}} <figcaption>{{- $caption -}}</figcaption> {{- end -}} </figure> </div> </div> {{- end -}}
블로그 저작 환경 구축
[블로그 저작 도구 선택]에 작성한 바와 같이, [Hugo]를 기반으로 개인 지식정리 블로그를 작성하기로 결정했다. 개인 PC 또는 시놀로지에 [Docker]를 설치하여 Hugo 기반 블로그 저작 환경을 구축할 수 있었는데, 다음과 같은 이유로 개인 PC에 블로그 저작 환경을 구축하기로 했다. 개인 지식 정리 블로그이기 때문에, 외부에서 포스트를 작성하는 경우가 없다. 정적 페이지 빌드 결과를 시놀로지에 업로드해서 블로그를 호스팅 할 계획이다. 시놀로지에서 [네이티브하게 블로그 호스팅]이 가능하다. 시놀로지 내부 Docker를 실행시켜 호스팅하는 방식은 네이티브하게 호스팅하는 방식보다 웹 서비스 성능이 떨어질 것으로 예상된다. (웹 서비스가 컨테이너 내부에서 동작하기 때문) Docker에서 [xdevbase/hugo-builder] 이미지를 기반으로 컨테이너를 만들었기 때문에, 블로그 저작 환경 구축에 특별한 어려움은 없었다. 다만, 블로그 저작 결과를 임시로 확인하기 위해서, 컨테이너에서 실행되고 있는 서버에 호스트의 웹 브라우저가 접속할 수 있도록 만들어줘야 했다. [컨테이너 내부에 Apache 서버가 실행되는 경우]에는 호스트에서 바인딩된 포트번호로 접속이 가능하다. 하지만, Hugo 서버를 일반적인 명령어 (hugo server -D)로 실행할 경우, 호스트에서 접속할 수 없다. 따라서, [호스트에서 접속 가능하도록 Hugo 서버를 실행시키는 방법]을 참조하여, 다음과 같은 명령어로 Hugo 서버를 실행시켰다. hugo server –baseURL “http://localhost” -p {컨테이너에서 바인딩된 포트번호} –bind {컨테이너의 IP주소} 호스트 웹 브라우저의 주소창에는 다음과 같이 입력해서 컨테이너에서 실행되는 Hugo 서버에 접속할 수 있다. http://localhost:{호스트에서 바인딩된 포트번호}
