h036 academic 테마를 설치해 보았습니다

academic 테마는 hugotheme사이트 중에서 가장 많은 별 마크를 받은 테마입니다. 공식 무료 테마사이트 중에서는요.

설치

설치하는 방법은 아시다시피 대게 이 셋중에 하나입니다. 저는 이중에 2 번째 방법을 사용했습니다.

git clone으로 설치하는 방법
git submodule add로 설치하는 방법
zip을 download해서 설치하는 방법

cd /users/administrator/blog
git submodule add https://github.com/gcushen/hugo-academic.git themes/academic

그런데, 설치해서 돌려보면, 매우 많은 에러가 나타날 수 있습니다.

SCSS관련 에러메시지

우선 다음과 같이 text/x-scss와 text/css이 다르다고 불평하는 경우가 있습니다.

 executing "partials/site_head.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-scss" and "text/css"

이 SCSS관련 메시지는 이런 형태로 나타날 수도 있습니다.

Building sites … ERROR 2020/07/06 15:22:40 error: failed to transform resource: TOCSS: failed to transform "main_parsed.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Total in 70 ms
Error: Error building site: logged 1 error(s)

이 문제는 hugo-extended를 설치하는 것으로 해결할 수 있습니다. 저는 hugo를 윈도우즈 환경에서 scoop으로 설치하였기 때문에 hugo-extended도 scoop으로 설치합니다.

scoop install hugo-extended

/home/index.md

이 파일이 없으면 설치가 제대로 안되었다라고 불평합니다.

Building sites … ERROR 2020/07/12 15:27:59 Please complete the installation of Academic by following the steps at https://sourcethemes.com/academic/docs/install/
ERROR 2020/07/12 15:27:59 Homepage not found at /home/index.md!

에러 메시지를 추적해서 검색해 보면, themes/academics/layouts/index.html 안에 다음과 같이 site.Params에 대한 정의가 있는 지를 보고 academic이 설치되었는지를 확인하고 있었습니다.

{{ if not (isset site.Params "theme") }}
  {{ errorf "Please complete the installation of Academic by following the steps at https://sourcethemes.com/academic/docs/install/" }}
{{ end }}

나중에 알게된 내용이지만, 다음의 페이지에서 렌더링 순서를 다음과 같이 소개하고 있습니다.

/layouts//.html
/layouts/_default/.html
/themes//layouts//.html
/themes//layouts/_default/.html

이 순서대로 /themes/academic/layouts/index.html이 먼저 렌더링 되어 출력된 에러메시자가 출력되었습니다. 결론으로는 해당 config 파일들을 설정해 두는 것이 필요했습니다.

우선 config.toml을 백업합시다
어쩌면 테마별로 다시 config.toml을 생성해야 할 지도 모릅니다.
# include 할 수는 없나요? - 없는 것 같습니다.

git clone https://github.com/sourcethemes/academic-kickstart.git blog2
cd blog2
git submodule update --init --recursive

다음과 같이 config 파일들을 설정합니다.

config.toml

/config/_default/config.toml

# 사이트의 기본설정
title = "tkim.info"
baseurl = "http://localhost:1313"
copyright = "tkiminfo@gmail.com"

# 언어설정
defaultContentLanguage = "ja"  # 렌더링의 <html lang=""> 의 부분
hasCJKLanguage = true          # true로 하면、한중일의 문자카운트가 바르게 됩니다.

language.toml

/config/_default/language.toml

# 처음은 영어가 on이 되어 있기 때문에 리마크 해둔다
# [en]
#   languageCode = "en-us"
[ko]
  languageCode = "ko"

menus.toml

/config/_default/menus.toml

# theme의 partial 부품을 편집하지 않아도 이곳에서 설정한 항목에서 자동으로 메뉴바를 생성됩니다.

# [[main]] Dictionary의 리스트형
[[main]]
  name = "Home"
  url = "#about"  # /을 쓰지 않고 #anchor를 쓰면 홈 화면 내 앵커링크가 됩니다.
  weight = 10     # weight가 작을 수록 메뉴의 왼쪽에 표시됩니다.


[[main]]
  name = "Skills"
  url = "#skills"
  weight = 15

[[main]]
  name = "Post"
  url = "/post"   # url은 /content/ 폴더를 기준으로한 상대 Path를 지정합니다.
  weight = 20

params.toml

/config/_default/params.toml

# 외형에 크게 관계되는 설정 파일

theme = "Ocean"   # Academic의Theme 간단히 생상등을 변경할 수 있습니다.
font_size = "M"   # 폰트사이즈 (초기치는L)

# 코드블록의 syntax hilight 스타일입니다.
# Academic Theme와의 조합에 따라서는 코드를 보기 어려워지므로 반드시 눈으로 확인하는 것이 필요합니다.
# 스타일명은 https://highlightjs.org/static/demo/ 에 있습니다.
highlight_style = "vs2015"

#   Examples: "Mon, Jan 2, 2006" or "2006-01-02"
date_format = "2006/01/02"
#   Examples: "3:04 pm" or "15:04"
time_format = "3:04 PM"

# 커스텀 CSS를 사용하는 경우
plugins_css = ["custom"]

# Google analytics
[marketing]
  google_analytics = ""
  google_tag_manager = ""

최종 형태로 다음과 같은 형태로 보이게 됩니다.