Hugo Blog에 Custom CSS 적용하기

  • 2022/06/05
  • 3-minute read

참고 사이트 - Add Custom CSS or JavaScript to Your Hugo Site

Table of Contents

문제 정의 과정

  • 이 내용을 찾아보려고 한 것은, 내가 사용하는 anatole 테마가 Markdown의 Table을 지원하지 않는 문제 때문이었다.
  • 해당 내용에 관련해서 테마 원 제작자에게 Issue를 등록해서, 물어봤는데, 아직 지원하지 않고 있어서 Custom으로 사용하거나, Pull Request하면 받아준다고 해서 진행하게 되었다.
  • 가장 먼저 테스트해본 방법은 당연히 테마 자체를 변경해서, 적용이 되면 Pull Request까지 진행할 생각이었는데, 생각보다 잘 안되었다.
  • 부족한 Hugo 및 Golang에 대한 지식 및 웹 프로그래밍 자체에 대한 지식이 너무 부족한 탓이었다.
  • 그래서 그냥 테이블을 직접 작성해서 캡쳐해서 넣어서 쓸까…. 고민했는데, VS Code에서 자체적으로 지원하는 Markdown Preview에 있는 테이블이 생각보다 깔끔하고 너무 마음에 들어서, 이에 대한 내용을 적용하고 싶었다.
  • 조금 검색을 진행해보니, Table 자체에 대한 기능을 제공을 안하는 것은 아닌데, Table에 대한 Style이 지정이 되어있지 않아서, 이쁘지 않게 나오는 것이었던 것으로 확인되었고, 이를 위해서는 해당 Table에 대한 Style을 지정해주는 CSS파일이 있어야한다는 것을 확인하였다.
  • VS Code 자체에 포함된 CSS파일을 살펴보니 Table에 대한 내용은 다음과 같았다.
table {
	border-collapse: collapse;
	margin-bottom: 0.7em;
}

th {
	text-align: left;
	border-bottom: 1px solid;
}

th,
td {
	padding: 5px 10px;
}

table > tbody > tr + tr > td {
	border-top: 1px solid;
}
  • 이와 같은 스타일을 적용하니 아래와 같이 기본 형태의 Table을 생성할 수 있었다. |이름|메일주소| |—|—| |Jackson|k9632441@gmail.com| |Jane| JaneDo@gmail.com|
  • 문제는 다음이었는데, 이걸 어떻게 내 사이트에 적용하는지를 몰랐다.
  • 단순하게, 내 사이트에 적용되는 CSS에 붙여넣으면 되긴한데, 이렇게 적용하면 아마 새롭게 빌드될 때마다, 해당 파일이 덮어져서 늘 추가해줘야할 것 같았다.
  • 그래서 Hugo에서 Custom CSS 파일을 적용하는 방법을 찾아보았고, 이에 대한 해답을 다음과 같이 찾을 수 있었다.

해결 방법

  • 해결 방법은 생각보다 단순했다.
  • Hugo에서는 “당연하게?“도 마음에 들지 않으면, 본인이 원하는 형태의 Custom CSS나 Custom JavaScript를 적용할 수 있는 방법이 있었다.
  • 나는 JavaScript는 필요없었고, CSS만 적용하면 되었기에, 이에 대한 내용을 확인하였다.
  • 우선 Custom으로 적용할 CSS파일을 생성해서 일반적으로 hugo blog에서 이미지 등을 불러올 때 저장해주는 static 폴더 내부에 css라는 폴더를 생성해서 추가했다. (아래 Tree에서 static folder 내부의 파일을 볼 수 있다.)
├─css
└─images
    ├─A_star_algorithm
    ├─Bellman-Ford-Algorithm
    ├─Clang_atoi
    ├─dfs_bfs
    ├─graph_theory
    ├─hugo_blog_customCSS
    ├─interval_sum
    └─rospy_multithreading
  • 이 다음 config / _default / params.toml 파일을 열어서 다음과 같은 부분을 추가해주었다.
customCss = ["css/table.css"]
  • 그리고 일반적으로 기본적으로 hugo blog의 형태를 정해주는 layouts이라는 폴더가 있는데 해당 폴더는 기본적으로 테마에 포함되어 있다.
  • 테마에 포함되어있는게 기본적으로 load되고, 그 외에 Blog 최상단 폴더에도 동일한 파일이 있다면, 해당 파일이 우선적으로 load되는 형태이다.
  • 이 중에 동작에 해당하는 layouts / partials / head.html 파일을 복사해서, blog 최상단 폴더의 layouts 폴더에 넣어준다.
  • themes / anatole / layouts / partials / head.html 파일을 layouts / partials / head.html로 옮겨주는 방법을 의미한다.
  • 그리고 복사한 head.html파일을 열어서 아래와 같은 부분이 존재할텐데, 해당 부분 삭제하고 아래의 내용을 추가한다.
  • 왜 이렇게 수정하는 지에 대해서는… HTML 문법을 정확하게 몰라서, 이해할 수 없었습니다. 죄송합니다.
<!-- 아래와 같은 원본 코드가 존재 -->
  {{ range .Site.Params.customCss }}
    {{ $minstyles := resources.Get . }}
    {{ $styles := $minstyles | resources.Minify | resources.Fingerprint }}
    <link
      rel="stylesheet"
      href="{{ $styles.RelPermalink }}"
      integrity="{{ $styles.Data.Integrity }}"
      crossorigin="anonymous"
      media="screen"
    />
  {{ end }}

<!-- 아래와 같이 변경해주면 된다. -->
  {{ range .Site.Params.customCss }}
    <link rel="stylesheet" href="{{ . | absURL }}"/>
  {{ end }}
  • 이렇게 수정해주고 다시 블로그를 업데이트해주면 추가한 CSS파일이 적용되는 것을 볼 수 있다.

추가 사항

  • 위의 내용을 추가한 후 사이트를 열고 F12를 눌러보면 아래쪽에 사이트에서 문제가 되는 부분을 보여주는데, 이 중 다음과 같은 오류가 발생할 때가 있었다.
  • Mixed Content: was loaded over HTTPS, but requested an insecure image. This content should also be served over HTTPS
  • 위와 같은 오류는 HTTPS와 HTTP를 혼용해서 사용하는 경우 발생하는 문제라고 한다.
  • 해결 방법은 의외로 간단했는데, config / _default / config.toml 파일을 열어서 baseURL이라고 되어 있는 부분이 https로 시작하는 주소로 되게 변경해주면 되는 것이었다.
  • 이와 같이 변경해주면, 해당 문제가 없어지는 것으로 확인되었다.

Review

  • 사실 간단한 문제였던 것 같은데, 웹이나 Golang 등에 대한 지식이 없어서 너무 오래걸렸던 것 같다.
  • 그리고… PR을 하고 싶었는데… 너무 아쉽다.
  • 혹시 모르니, 원작자에게 방법의 힌트를 조금만 달라고 해야겠다.

comments