Hugo의 일반적인 사용 기술 소개

Hugo는 GitHub와 호환되는 오픈 소스 goldmark를 Markdown 파서로 사용합니다.

소개

Hugo는 Golang으로 작성된 정적 웹사이트 페이지 생성 도구이며, 효율성은 Ruby로 작성된 Jekyll보다 훨씬 높습니다. Github에서 바이너리 패키지를 직접 다운로드하고 압축 해제한 후 PATH 환경 변수에 추가하여 사용할 수 있습니다.

SCSS 기능을 지원하고 테마 개발에 적합한 Hugo-extended 버전을 설치하는 것이 좋습니다. 또한 goldmark를 통해 많은 확장이 구현되었으며 가장 일반적으로 사용되는 것은 작업 목록입니다. 자세한 목록은 MarkdownGuide의 소개를 참조하십시오. Hugo는 고도로 사용자 정의할 수 있으며 설계 시 Markdown 구문과 호환되도록 노력합니다.

기본 사용법

테마를 통해 페이지 사용자 정의: themes.gohugo.io에서 볼 수 있는 다양한 테마가 있습니다. hugo-geekdoc을 예로 들어 보겠습니다. 다운로드 후 프로젝트의 themes 디렉터리에 직접 넣습니다.
설치가 성공했는지 확인:

hugo version

현재 디렉터리에 새 프로젝트 만들기:

hugo new site hugo

테마 템플릿을 themes 디렉터리에 추가하고 구성 파일 config.toml에 theme="doks"를 추가하거나 --theme hyde 매개변수로 시작합니다:

git clone --depth 1 --recursive https://github.com/h-enk/doks.git themes

기사 만들기:

hugo --verbose new post/create-hugo-blog.md

서비스 시작:

hugo server --buildDrafts --bind="0.0.0.0" --port=38787

정적 파일(초안 포함)을 생성하고 기본적으로 public인 buildDir 디렉터리에 저장합니다:

hugo -D

구성 파일

기본적으로 루트 디렉터리의 hugo.toml, hugo.yaml 및 hugo.json과 같은 구성 파일이 사용됩니다. --config a.toml,b.toml 방식으로 구성 파일을 지정할 수도 있습니다. 그러나 디렉터리를 사용하는 것이 좋습니다. 이는 기본적으로 config 디렉터리이며 구성 파일의 configDir 구성 항목을 사용하여 수정할 수 있습니다.

hugo.toml
config/
 |-_default/ 
 | |-hugo.toml
 | |-languages.toml
 | |-menus.en.toml
 | |-menus.cn.toml
 | `-params.toml
 |-develop/
 | |-hugo.toml
 | `-params.toml
 `-production/
   `-hugo.toml

디렉터리의 첫 번째 레이어는 _default 기본 구성과 production 디렉터리를 포함한 환경입니다. 예를 들어 --environment production으로 시작하면 _default의 구성이 production의 구성과 병합되고 다음 방식으로 템플릿에서 확인할 수 있습니다:

{{ if eq hugo.Environment "production" }}
<div> Production Mode </div>
{{ else }}
<div> Development Mode </div>
{{ end }}

두 번째 레이어는 구성 항목의 최상위 레벨에 해당합니다. 일반적으로 [Params]는 params.toml에 해당하고 [Menu]는 menu.toml에 해당하며 다양한 언어를 포함합니다.

기본 개념

섹션

콘텐츠 디렉터리 구조를 기반으로 정의된 페이지 모음입니다. 이 디렉터리 아래의 첫 번째 수준 하위 디렉터리는 모두 섹션입니다. 하위 디렉터리를 섹션으로 만들려면 디렉터리에 _index.md 파일을 정의해야 하며 이러한 방식으로 모든 섹션이 섹션 트리를 형성합니다.

content/
 `-blog/               <-- 섹션, 콘텐츠의 하위 디렉터리이기 때문입니다.
   |-funny-cats/
   | |-mypost.md
   | `-kittens/        <-- _index.md를 포함하므로 섹션입니다.
   |   `-_index.md
   `-tech/             <-- 위와 동일한 섹션
       `-_index.md

섹션을 통해 콘텐츠를 분류하는 것 외에도 유형 사용자 정의도 허용됩니다. 페이지에 유형이 없으면 기본적으로 섹션에 해당하는 값이 사용됩니다. 사용할 때 다음 조회 순서를 참조할 수 있습니다. 템플릿 유형이 섹션보다 우선 순위가 높기 때문에 더 나은 사용자 정의가 가능합니다. 또한 .Kind 변수인 페이지, 섹션, 용어, 홈, 분류 등 다양한 페이지 유형을 처리할 수 있습니다. 공식 Methods Kind의 소개를 참조하십시오.

템플릿

Hugo는 GoLang의 html/template 라이브러리를 템플릿 엔진으로 사용하며 세 가지 유형의 템플릿으로 나뉩니다.

단일: 단일 페이지를 렌더링하는 데 사용됩니다.
목록: 디렉터리의 모든 콘텐츠와 같이 관련 콘텐츠 집합을 렌더링합니다.
부분: 다른 템플릿에서 참조할 수 있으며 페이지 머리글 및 페이지 바닥글과 같은 템플릿 수준 구성 요소 역할을 합니다.

그중 baseof.html은 다양한 섹션의 루트 템플릿 역할을 하며 템플릿 조회 메커니즘이 있습니다. 콘텐츠와 완전히 일치하는 템플릿을 찾을 수 없으면 한 단계 위로 이동하여 거기에서 검색합니다. 기본 템플릿 baseof.html의 조회 규칙은 다음과 같습니다.

/layouts/section/<TYPE>-baseof.html
/themes/<THEME>/layouts/section/<TYPE>-baseof.html <--- 다른 유형의 템플릿
/layouts/<TYPE>/baseof.html
/themes/<THEME>/layouts/<TYPE>/baseof.html
/layouts/section/baseof.html
/themes/<THEME>/layouts/section/baseof.html <--- 다른 섹션의 템플릿
/layouts/_default/<TYPE>-baseof.html
/themes/<THEME>/layouts/_default/<TYPE>-baseof.html
/layouts/_default/baseof.html
/themes/<THEME>/layouts/_default/baseof.html <--- 기본값

템플릿에서 Partials 모듈은 {{ partial "xx" . }}를 통해 도입되고 모듈의 해당 페이지 정보는 {{ . }}를 통해 볼 수 있습니다. 또한 {{ partial "header.html" (dict "current" . "param1" "1" "param2" "2" ) }} 방식으로 매개변수를 추가할 수 있습니다.

위의 Partials 도입 방식 외에도 {{ define "main" }} ... {{ end }}를 통해 다양한 유형(예: 단일, 목록 등)으로 모듈을 사용자 정의한 다음 {{ block "main" . }} ... {{ end }} 방식으로 사용할 수 있습니다.

변수 참조

템플릿에서 변수는 {{ xxx }} 방식으로 참조되며 변수 사용 방법은 다음과 같습니다.

글로벌 구성: 예를 들어 .Site.Params.titile은 hugo.toml의 [Params] 또는 config/_default/params.toml의 구성에 해당합니다.
페이지 매개변수: 시작 부분에 지정할 수 있으며 .Params.xxx 방식으로 참조할 수 있습니다.
기타 매개변수: 여기에는 일부 내장 매개변수가 포함되며 .Title, .Section, .Content 및 .Page와 같이 직접 사용할 수 있습니다.
지역화 매개변수: 일반적으로 i18n "global-identifier"로 지정하거나 i18n .Site.Params.xxx로 변환합니다.
함수 사용: 예를 들어 hugo.Environment, hugo.IsExtended 등이 있습니다. 다른 내용은 함수 내용을 참조하십시오.

위의 변수 외에도 json, yaml, toml 및 xml과 같은 형식의 데이터 파일을 data 디렉터리에 저장하고 .Site.Data.xxx 방식으로 템플릿에서 참조할 수 있습니다.

기본 구문

템플릿은 {{ }}로 래핑되고 내부 콘텐츠를 액션이라고 하며 일반적으로 두 가지 유형이 있습니다.

데이터 평가: 변수를 직접 사용하는 것을 포함하여 템플릿에 직접 출력됩니다.
제어 구조: 조건, 루프, 함수 등이 포함됩니다.

또한 각 줄을 래핑할지 여부를 제어할 수 있습니다. -로 제어됩니다. 예를 들어 {{- -}}는 시작도 끝도 래핑하지 않지만 끝에서 압축할 수도 있습니다.

----- 댓글
{{/* comment */}}
----- 기존 변수, 사용자 정의 변수 액세스
{{ .Title }}
{{ $var }}
{{ $var := "Value" }}
{{ $var := `Hello
World` }}

슬라이스 VS. 맵

슬라이스는 배열에 해당하며 일반적인 작업은 다음과 같습니다.

{{ $fruit := slice "Apple" "Banana" }}

{{ $fruit = append "Cherry" $fruit }}
{{ $fruit = append $fruit (slice "Pear") }}
{{ $fruit = append (slice "Cherry" "Peach") $fruit }}

{{ $fruit = uniq $fruit }}

{{ range $fruit }}
  I love {{ . }}
{{ end }}

{{ range $index, $value := $fruit }}
  {{ $value }} or {{ . }} is at index {{ $index }}
{{ end }}

{{ $first := first 2 $fruit }}
{{ $last := last 3 $fruit }}
{{ $third := first 3 $fruit | last 1 }}
{{ $third := index $fruit 2 }}

사전 사용법은 다음과 같습니다.

{{ $hero := dict "firstame" "John" "lastname" "Lennon" }}

{{ $hero = merge $hero (dict "birth" "1940") }}

{{ $hero.firstame }}
{{ $firstname := index $hero "firstname" }}
{{ range $key, $value := $hero }}
  {{ $key }}: {{ $value }}
{{ end }}

{{ $basis := "lastname" }}
{{ if eq $relation "friend" }}
  {{ $basis = "firstname" }}
{{ end }}
Hello {{ index $hero $basis }}!

{{ range slice "firstname" "lastname" }}
  {{ . }}: {{ index $hero . }}
{{ end }}

사용할 때 {{ if reflect.IsSlice $value }} 또는 IsMap를 통해 특정 유형을 판단할 수 있습니다.

논리적 판단

if 문은 특정 값의 참 또는 거짓을 판단하는 데 사용되지만 with를 사용하는 것이 좋습니다. 이 경우 컨텍스트는 범위 내에서 리바운드됩니다.

{{ if .IsHome }} xxx {{ end }}          // IsHome이 true일 때 호출되고 그렇지 않으면 not을 사용합니다.
{{ if eq .Title "Home" }} xxx {{ end }} // 변수가 같은지 판단하고 같지 않으면 ne
{{ if and .IsHome .Params.show }} xxx {{ end }}   // 여러 조건이 동시에 충족되고 조건 중 하나가 충족되면 or
{{ if strings.Contains "hugo" "go" }} xxx {{end}} // 지정된 문자열이 포함되어 있는지 판단합니다.

// 다음 두 가지 방법은 동일하며 비어 있으면 건너뜁니다.
{{ if isset .Params "title" }}
    <h4>{{ index .Params "title" }}</h4>
{{ end }}
{{ with .Params.title }}
    <h4>{{ . }}</h4>
{{ end }}

// 하지만 else if 문을 사용할 수 있습니다.
{{ if (isset .Params "description") }}
    {{ index .Params "description" }}
{{ else if (isset .Params "summary") }}
    {{ index .Params "summary" }}
{{ else }}
    {{ .Summary }}
{{ end }}

// 다음은 약간 더 복잡한 로직입니다.
{{ if (and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")) }}
    <div class="caption {{ index .Params "attr" }}">
        {{ if (isset .Params "title") }}
            <h4>{{ index .Params "title" }}</h4>
        {{ end }}
        {{ if (isset .Params "caption") }}
            <p>{{ index .Params "caption" }}</p>
        {{ end }}
    </div>
{{ end }}

Param에 description 속성이 설정되어 있으면 Param의 description 내용이 출력되고 그렇지 않으면 Summary의 내용이 출력됩니다.

{{ with .Param "description" }}
    {{ . }}
{{ else }}
    {{ .Summary }}
{{ end }}

반복

사전 데이터의 경우 {{ range $idx, $var := .Site.Data.xxx }}를 통해 탐색할 수 있으며 배열의 경우 {{ range $arr }} 방식으로 탐색할 수 있습니다. 또한 위의 Data를 예로 들어 다음과 같은 방식으로 데이터를 정렬, 필터링 및 가져올 수 있습니다.

// 여기서 컨텍스트는 배열 요소에 액세스합니다. 전역 컨텍스트에 액세스하려면 $.를 사용하여 액세스해야 합니다.
{{ range $array }}
    {{ . }}
{{ end }}

// 변수 및 요소 인덱스를 선언할 수 있습니다.
{{ range $val := $array }}
    {{ $val }}
{{ end }}
{{ range $idx, $val := $array }}
   {{ $idx }} -- {{ $val }}
{{ end }}

// 맵 요소의 인덱스 및 값에 대한 변수 선언
{{ range $key, $val := $map }}
   {{ $key }} -- {{ $val }}
{{ end }}

// 전달된 매개변수가 비어 있으면 else 문이 실행됩니다.
{{ range $array }}
    {{ . }}
{{else}}
    // $array가 비어 있을 때만 실행됩니다.
{{ end }}

또한 다음과 같은 방식을 사용할 수도 있습니다.

<ul>
  {{ range sort .Site.Data.books.fiction "title" }}
    <li>{{ .title }} ({{ .author }})</li>
  {{ end }}
</ul>

{{ range where .Site.Data.books.fiction "isbn" "978-0140443530" }}
  <li>{{ .title }} ({{ .author }})</li>
{{ end }}

{{ index .Site.Data.books "historical-fiction" }}

이런 식으로 다른 변수에 따라 필터링할 수 있으며 .Site.Pages와 같은 내장 변수도 마찬가지입니다.

다음은 조건부 필터링 처리입니다.

{{- if and (isset .Params "math") (eq .Params.math true) }}
{{- end -}}

페이지 필터링

다음은 먼저 현재 섹션의 데이터를 필터링하고 페이지에서 class: "page" 옵션을 설정해야 합니다. 먼저 연도별로 집계한 다음 날짜별로 내림차순으로 정렬하고 날짜와 해당 제목 정보를 표시합니다.

{{ $blogs := where (where .Site.Pages "Section" .Section) "Params.Class" "==" "page" -}}
{{ range $blogs.GroupByDate "2006" "desc" }}
<h1>{{ .Key }}</h1>
<ul>
{{ range .Pages.ByDate.Reverse }}
  <li><span>{{ .Date.Format "2006-01-02" }}</span> <a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
{{ end }}

페이지에서 사용 가능한 변수는 페이지 변수를 통해 볼 수 있으며 {{ . }}를 통해 직접 인쇄하면 파일 경로가 표시됩니다.

다른 일반적으로 사용되는 사용 예는 다음과 같습니다.

{{ range .Data.Pages }}                        // Data.Pages 탐색
{{ range where .Data.Pages "Section" "blog" }} // Data.Pages를 탐색하고 섹션이 블로그인 데이터 필터링
{{ range first 10 .Data.Pages }}               // Data.Pages를 탐색하고 처음 10개 데이터 가져오기
{{ range last 10 .Data.Pages }}                // Data.Pages를 탐색하고 마지막 10개 데이터 가져오기
{{ range after 10 .Data.Pages }}               // Data.Pages를 탐색하고 10번째 데이터 이후의 데이터 가져오기
{{ range until 10 .Data.Pages }}               // Data.Pages를 탐색하고 10번째 데이터 이전의 데이터 가져오기

짧은 코드

ShortCodes는 Markdown에서 표현하기에 편리하지 않은 일부 처리 로직을 처리하는 데 주로 사용되므로 일부 원래 html 코드 작성을 생략합니다. 공식에서는 일부 비디오 웹사이트, relref 등에 대한 링크와 같은 몇 가지 기본 구현을 제공하며 소스 코드는 Github에서 참조할 수 있습니다.

foobar ShortCode가 있다고 가정하면 다음과 같은 방식으로 사용할 수 있습니다. 매개변수 래핑 방식을 참고하십시오. 현재 렌더링을 방지하는 더 나은 방법은 찾지 못했습니다.

{{ foobar "foo" "bar" }}
Some short codes
{{ /foobar }}

ShortCode 템플릿에서 위의 매개변수를 얻는 방법에는 여러 가지가 있습니다. 가장 간단하고 직접적인 with .Get 0을 통해 얻거나 index .Params 0을 통해 얻습니다. 내부는 .Inner 메서드를 통해 읽을 수 있으며 호출해야 합니다. 또한 Hugo ShortCodes의 일부 예를 참조할 수도 있습니다.

일반적으로 사용되는 함수

템플릿에서 {{ with .Site.Data.Resume . }} {{ .SomeData }} {{ end }} 방식으로 참조할 수 있습니다.

고급 사용법

정적 파일

이미지, CSS, JavaScript 등을 포함하며 일반적으로 기존 파일(예: 타사 라이브러리 Bootstrap, FontAwesome 등)입니다. 참조할 때 static 디렉터리에 배치해야 하고 템플릿에서는 해당 디렉터리에 배치해야 하며 자동으로 복사됩니다.

{{ "css/bootstrap.min.css" | absURL }} 방식으로 참조할 수 있습니다. 이 경우 http://foobar.com/css/bootstrap.min.css에 액세스하면 static/css/bootstrap.min.css 파일에 매핑됩니다.

마운트

npm을 통해 타사 JS 패키지를 관리할 수 있지만 이 경우 구성 파일의 module.mounts를 통해 구성해야 합니다.

[module]
  [[module.mounts]]    
    source = "node_modules/katex/dist"
    target = "static/katex"

그런 다음 템플릿에서 다음과 같은 방식으로 사용할 수 있습니다.

<script type="text/javascript" src="{{ "katex/katex.min.js" | absURL }}"></script>`
<link rel="stylesheet" href="{{ "katex/katex.min.css" | absURL }}"/>

CSS

Hugo는 버전 0.43부터 SASS 컴파일을 지원합니다. 그러나 소스 파일은 /assets/scss/ 또는 /themes/<NAME>/assets/scss/ 디렉터리에만 배치할 수 있습니다. 그런 다음 다음과 같은 방식으로 도입할 수 있습니다.

{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}

resources.Get을 사용하여 SCSS 파일의 내용을 가져온 다음 파이프라인을 사용하여 컴파일, 압축 및 지문을 생성합니다. 이렇게 하면 생성된 파일에 해시 파일 이름을 추가하여 캐시된 이전 파일 대신 CDN에서 최신 CSS를 가져올 수 있습니다. 또한 CSS 컴파일에 대한 위의 구성 옵션 외에도 다음을 참조할 수도 있습니다.

{{ $opts := (dict "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules")) -}}

다음 명령을 통해 코드 강조 표시를 생성할 수 있으며 Style Longer 및 Style에서 예를 참조할 수 있습니다.

hugo gen chromastyles --style=monokai > syntax.css

구성 매개변수 codeFences=true를 설정해야 합니다. 그렇지 않으면 줄 번호와 같은 정보가 테이블 형식으로 표시되어 비정상적인 표시가 발생합니다.

JavaScript

CSS와 유사하게 다음과 같은 방식으로 JS 스크립트를 도입할 수 있습니다.

{{ $params := dict "api" "https://example.org/api" }}
{{ with resources.Get "js/main.js" }}
  {{ if hugo.IsDevelopment }}
    {{ with . | js.Build }}
      <script src="{{ .RelPermalink }}"></script>
    {{ end }}
  {{ else }}
    {{ $opts := dict "minify" true "params" $params }}
    {{ with . | js.Build $opts | fingerprint }}
      <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
    {{ end }}
  {{ end }}
{{ end }}

스크립트에서 import * as params from '@params'; 방식으로 매개변수를 참조할 수 있으며 Shims 메서드를 통해 React 코드를 도입할 수도 있습니다. 더 많은 기능은 Hugo JS를 참조하십시오.

이미지 렌더링

Hugo에서 이미지 형식을 사용자 정의하는 것은 약간 번거롭습니다. ![name](uri){: width="420"}와 같은 방식은 지원하지 않습니다. html을 직접 사용하는 것을 지원하므로 다음과 같은 방식으로 구성할 수 있습니다.

<img src="picture.png" alt="some message" width="50%" />

css에서 img 정렬을 사용자 정의할 수 있지만 이 경우 하나의 정렬만 사용할 수 있습니다. 또한 공식에서는 figure의 shortcodes 코드를 제공하며 사용할 수 있지만 다른 플랫폼에서 호환성 문제가 발생합니다.

또 다른 방법이 있습니다. layouts/_default/_markup/render-image.html에서 이미지 렌더링 방법을 사용자 정의한 다음 ![name](uri?width=100px)와 같은 방식으로 사용합니다. 하지만 지원되는 매개변수는 위의 파일에서 구성해야 합니다.

다른 렌더링 후크에 대한 자세한 내용은 렌더링 후크 내용을 참조하십시오.

데이터 전송

데이터는 Scratch를 통해 전송할 수 있으며 Page와 ShortCodes 간에 데이터를 전송하는 데 사용됩니다. 템플릿에서 임시 데이터 전송을 사용하려면 newScratch를 통해 새로 만들 수 있습니다. Hugo에서 자동으로 생성된 Scratch를 예로 들어 보겠습니다. .Page.Scratch와 .Scratch는 기능이 동일합니다.

{{ .Scratch.Set "hey" "Hello" }} # 3 또는 (slice "Hello" "World")일 수도 있습니다.
{{ .Scratch.Get "hey" }}         # 가져오기
{{ .Scratch.Add "hey" "Welcome" }} # Go 언어와 유사하게 덧셈, 문자열 연결, 숫자 덧셈, 배열 연결 수행
{{ .Scratch.GetSortedMapValues "hey" }} # Get을 통해 맵을 가져오는 것 외에도 키별로 정렬된 값을 반환할 수도 있습니다.
{{ .Scratch.Delete "hey" }}      # 삭제

{{ .Scratch.SetInMap "hey" "Hello" "World" }} # 맵 설정, key:value는 Hello:World에 해당
{{ .Scratch.SetInMap "hey" "Hey" "Andy" }}
{{ .Scratch.Get "hey" }} # map[Hello:World Hey:Andy]

템플릿 디버깅

{{ printf "%#v" .Permalink }}를 통해 현재 변수 정보를 인쇄할 수 있습니다. 또한 페이지 레이아웃을 디버그하려면 보기 쉽게 head에 다음 내용을 추가할 수 있습니다.

<style> 
div { 
  border: 1px solid black;
  background-color: LightSkyBlue; 
} 
</style>

모범 사례

최상위 디렉터리에는 archetypes, assets, content, data, i18n, static, layouts 여러 디렉터리가 포함되어 있습니다.

archetypes/: new 하위 명령을 통해 새 기사를 만들 때의 템플릿입니다.
config/: 기본적으로 hugo.[toml|yaml|json]이 구성으로 사용되며 다음 디렉터리 방법을 사용할 수 있습니다.
- _default/: 기본 구성입니다.
- production/: 전역 구성입니다.
i18n/: 지역화입니다.
themes/:
- halo/: 해당 템플릿 이름입니다.
  - assets/: 템플릿의 리소스 파일입니다.
    - images/
    - js/: JavaScript 관련 스크립트입니다. 자세한 내용은 footer/script-footer.html을 참조하십시오.
    - scss/: SCSS 파일입니다.
      - app.scss: 최상위 SCSS 파일, 다른 디렉터리의 파일을 포함합니다. 자세한 내용은 head/head.html을 참조하십시오.
    - static/: 정적 파일입니다.
      - syntax.css: 위의 hugo gen chromastyles 명령으로 생성된 CSS 파일입니다. 자세한 내용은 head/head.html을 참조하십시오.
  - layouts/: 레이아웃 템플릿입니다. 여기서 _default는 기본값이고 partials는 다른 템플릿의 참조입니다.
    - _default/
    - blog/: 블로그 섹션 템플릿에 해당합니다.
    - docs/: 문서 섹션 템플릿에 해당합니다.
    - partials/: 다른 템플릿에서 참조합니다.
    - resume/: 이력서 섹션 템플릿에 해당합니다.
      - baseof.html: 렌더링을 위한 루트 페이지입니다.
    - shortcodes/: 짧은 코드입니다.
    - slide/: 슬라이드 섹션 템플릿에 해당합니다.
    - 404.html: 404 페이지를 생성합니다.

CSS 관련 내용은 다음 파일에 따라 달라집니다.

syntax.css: 구문 강조 표시, 압축만 하면 됩니다.
main.css: 핵심 사용자 정의 구성입니다. 부트스트랩 변수를 사용하기 위해 scss 템플릿에서도 참조됩니다. 따라서 bootstrap.min.css를 별도로 도입할 필요가 없습니다.
fontawesome.min.css: 사용된 아이콘이며 아이콘의 내용을 참조할 수 있습니다.

또한 Bootstrap의 관련 변수는 bootstrap/scss/_variables.scss에 저장됩니다.

Leapcell: 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼

마지막으로 Golang 배포에 가장 적합한 플랫폼인 **Leapcell**을 추천합니다.

1. 다국어 지원

JavaScript, Python, Go 또는 Rust로 개발하십시오.

2. 무제한 프로젝트를 무료로 배포하십시오.

사용량에 대해서만 지불하십시오. 요청도 없고 요금도 없습니다.

3. 탁월한 비용 효율성

유휴 요금 없이 사용한 만큼 지불하십시오.
예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

4. 간소화된 개발자 경험

손쉬운 설정을 위한 직관적인 UI
완전 자동화된 CI/CD 파이프라인 및 GitOps 통합
실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅

5. 간편한 확장성 및 고성능

고도의 동시성을 쉽게 처리하기 위한 자동 확장
제로 운영 오버헤드 — 구축에만 집중하십시오.

문서에서 자세히 알아보십시오!

Leapcell Twitter: https://x.com/LeapcellHQ

Hugo에 대한 깊이 있는 조명: 이상적인 정적 블로그 프레임워크