Hugo 에 React App 사용하기

Hugo 를 선택한 이유

Mark down 언어를 지원한다.
글 내에서 Shortcode 를 사용할 수 있다.

위에서 이야기한 Mark down 언어를 지원하는 점은 장점이지만, MD 내에서 HTML 을 직접 사용할 수 없는 제약도 있다. 그래서 두번째 Shortcode 를 지원하는 것 같다.

Shortcode

참고: https://gohugo.io/content-management/shortcodes/

Hugo 에서는 이미 아래와 같은 방법으로 이미지나 Youtube 를 삽입하는 방법을 사용한다.

{ {< figure src="/images/logo.png" title="logo image" >}}

{ {< youtube sGd5-aqsnHo>}}

주의 : 처음 { { 는 {{ 와 같이 붙여써야 한다. (Shortcode 가 실행되지 않도록 하기 위해서 띄어쓰기를 한 것임)

사용자 정의 Shortcode

참고: https://gohugo.io/templates/shortcode-templates/

Template 을 만들고, 블로그 컨텐츠 Markdown 파일에서 이를 가져다 쓰는 형식으로 사용한다.

Template 만들기

/layouts/shortcodes/golden.html 이라는 Template 파일을 만든다.

<style>
  .reload_button {
    height:30px;
    margin:10px;
    background-color: lightgray;
  }
</style>

<div style="padding:10px; border-style:solid; background-color:#fceeee;">
  <span id="golden" ></span>
  <button class="reload_button" onclick="reload()"> 다른 명언 보기 </button>
</div>

<script>
{{ $goldens := readFile "documents/golden.txt" }}
{{ $strs := split $goldens "\n" }}

var goldens = [
{{ range $str := $strs }}
{{ printf "%s" $str }},
{{ end }}
];
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
function reload() {
  var idx = getRandomInt(goldens.length);
  var div_golden = document.getElementById('golden');
  div_golden.innerHTML = goldens[idx];
}
reload()

</script>

Hugo Root 디렉토리 아래 documents 디렉토리를 만들고 golden.txt 파일을 만든다. golden.txt 파일은 텍스트 파일이다. 한줄에 하나씩 보여주고 싶은 글귀를 적는다.

Markdown 에 Shortcoding

블로그 글 Markdown 에서 아래와 같이 Short code 를 삽입한다.

{ {< golden >}}

짠… 이렇게 나온다.

React App 사용하기

Hugo Markdown 에서 HTML Javascript 를 사용하는 방법에 대해서 알아보았다. React App 도 Short code 를 이용해서 만들 수 있다.

react build 폴더의 경로 정하기

Hubo 에서 static 폴더는 그대로 루트로 카피된다. 즉 static/monocopter/index.html 은 /monocoptor/index.html 로 변환된다는 뜻이다.
react build 시 경로 집어넣기

package.json 파일에서 아래 내용을 추가한다.

"homepage": "/monocopter/",

react build

$ npm build 또는 yarn build
build/static 폴더 내용을 static/monotocoper/static 으로 카피한다.
build/index.html 파일을 /layouts/shortcodes/monocopter.html 로 카피한다.

그대로 써도 되지만, 불필요한 meta태그는 삭제하는 것도 좋다.

구글링을 해보면 Hugo pipe Babel 을 이용하는 방법이 나오는데, Shortcode 를 이용한 방법이 좀 더 깔끔해 보인다.