우과 사용 안내

보통 웹 사이트를 만드는 데 많은 시간을 들여야 한다.너는 그것의 재무 원가를 개발하고 유지하며 위탁 관리해야 한다.만약 네가 스스로 그것을 개발한다면, 너는 중요한 기술 지식을 필요로 한다.이것은 보통 많은 사람들이 그것을 짓는 것을 방해할 수 있다.그러나 모든 사이트가 복잡한 구조나 비싼 자원을 필요로 하는 것은 아니다.블로그, 서류 가방, 회사 사이트, 잡지, 문서 사이트 등은 정적 사이트 생성기를 이용하여 저렴한 가격으로 제작할 수 있고 상당히 가볍다.
정적 사이트 생성기는 정적 사이트를 만드는 구축 도구입니다.이들 사이트의 페이지는 사전에 구축된 것으로 사용자의 방문 사이에 자주 바뀌지 않는다.SSG는 일반적으로 템플릿을 가져오고 제공된 데이터를 템플릿에 추가하여 HTML 페이지를 만듭니다.그리고 미리 보이는 페이지는 사용자가 방문할 수 있는 곳에 위탁 관리됩니다.이것은 동적 사이트와 달리 동적 사이트는 사용자가 요청할 때 페이지를 생성합니다.
SSG는 사이트 개발을 단순화합니다.SSG를 사용하여 사이트를 만들려면 몇 단계와 짧은 시간이 필요합니다.SSG는 새로운 개발자와 경험이 제한된 사람들에게 좋은 도구로, 그들은 힘들이지 않고 사이트를 만들기를 희망한다.많은 SSG 자원이 풍부하여 광범위한 사이트 테마, 평론, 호스트 통합 등 흔한 실용 프로그램을 제공합니다. SSG의 다른 장점은 그들이 생성한 정적 사이트와 관련이 있습니다.정적 사이트에 관련된 이동 부품은 훨씬 적고 구축, 보호와 유지보수가 더욱 쉽다.페이지가 미리 표시되어 있는 그대로 제공되기 때문에 그것들의 속도는 매우 빠르다.더 복잡한 인프라를 갖춘 다른 사이트보다 정적 사이트를 확장하는 것이 쉽다.
Hugo는 Go로 작성된 SSG 및 프레임워크입니다.Go의 레이아웃은 Go 템플릿을 사용합니다.다른 SSG와 다른 주요 장점 중 하나는 페이지를 구축하는 속도입니다.이것은 놀라운 내용 관리를 제공하여 여러 운영체제 플랫폼에서 사용할 수 있고 분류법을 지원하며 내용 생성표를 제공하고 예쁜 URL을 지원하며 거의 모든 곳에서 위탁 관리할 수 있다.이러한 기능 외에도 개발 기간 동안 실시간으로 다시 불러오고 다양한 내용 유형 옵션을 지원하며 글자 수와 분 읽기 기능을 갖추고 있다.이것들은 단지 우과가 제공하는 많은 기능의 견본일 뿐이다.

장치

우과는 플랫폼을 뛰어넘는 것이다.다양한 설치 방법이 있습니다.여기에는 package managers, source code 또는 Docker이 포함됩니다.그러나 그것을 설치하는 가장 간단한 방법은 바이너리 파일을 사용하는 것이다.현재 Hugo는 맥OS, 리눅스, 윈도, FreeBSD, OpenBSD를 위해 바이너리 파일을 미리 구축했다.Hugo의 Github 저장소 here에서 다운로드할 수 있습니다.반드시 너의 경로에 그것들을 설치해야 한다.
설치가 완료되면 터미널에서 hugo --help을 실행하여 설치가 완료되고 정상적으로 작동하는지 확인합니다.이것은 네가 마땅히 보아야 할 앞의 몇 줄이다.

$ hugo --help
hugo is the main command, used to build your Hugo site.
Hugo is a Fast and Flexible Static Site Generator built with love by spf13 and friends in Go.

사이트 생성

새 사이트를 만들려면 사이트 소스 코드의 위치를 선택합니다.사이트 이름을 선택하고 선택한 위치의 터미널에서 다음 명령을 실행합니다.

$ hugo new site <site-name>
Congratulations! Your new Hugo site is created in <site-path>.

이 명령은 사이트에 프레임워크를 생성합니다.archetypes을 제외하고는 대부분의 폴더가 비어 있습니다.테마를 추가하고 설정을 가볍게 변경할 수 있습니다. 처음부터 사이트를 구축하는 것이 아니라.너는 theme.hugo.io에서 일련의 주제를 찾을 수 있다.대부분의 주제에 대해 그것들을 추가하는 것은 통상적으로 같다.그러나 약간의 변화는 있을 수 있다.첨가 주제가 어떤 것인지 설명하기 위해 this startup website theme을 예로 들겠습니다.디렉터리를 사이트 폴더로 변경하고git 저장소를 초기화하며 테마를 하위 모듈로 추가합니다.

$ cd <site-name>
$ git init 
$ git submodule add https://github.com/SteveLane/hugo-icon.git themes/hugo-icon 

Hugo 서버, 주제 및 일부 예제를 사용하여 로컬 실행 사이트에 구성하려면 다음을 실행합니다.

$ hugo server -t hugo-icon --config themes/hugo-icon/exampleSite/config.toml

브라우저에서 localhost:1313을 방문하면 이것을 볼 수 있습니다.

필드 구조

전형적인 우과 사이트에는 이런 구조가 있다.

├── archetypes
├── config
├── content
├── data
├── layouts
├── resources
├── static
└── themes

원형

원형은 내용 파일의 템플릿으로 사용됩니다.예를 들어, 사이트를 생성할 때 작성되는 기본 원형은 다음과 같습니다.

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

hugo new 명령을 사용하여 만든 새 컨텐트에는 이 컨텐트가 포함됩니다.hugo new posts/hello.md을 실행하면 다음 파일이 contents/posts에 생성됩니다.

--------
title: "Hello"
date: 2021-05-20T11:03:02
draft: true
--------

너는 새로운 원형과 맞춤형 전단 물질과 구조를 만들 수 있다.새 컨텐트를 만들 때 --kind 로고 명시적 설정을 사용하지 않으면 경로에서 해당 컨텐트의 원형이 추정됩니다.예를 들어 archetypes/profile.md에 프로파일 원형이 있는 경우 hugo new profile/lisa-jane.md을 사용하여 컨텐트 폴더에 새 프로파일을 만들 수 있습니다.

자산.

자산은 송달되기 전에 처리해야 할 서류다.Hugo pipes는 자산 처리를 수행하는 기능입니다.예를 들어, SASS 파일이 있다고 가정합니다.그것의 경로는 assets/sass/form.sass이다.SASS를 CSS로 변환하려면 resources.ToCSS 파이프를 사용합니다.

{{ $formSass := resources.Get "sass/form.sass" }}
{{ $formStyling := $formSass | resources.ToCSS }}

Hugo pipes은 축소, 번들, JS 처리 등의 기능을 수행한다.

프로비저닝

기본적으로 Hugo 사이트 구성은 사이트 루트 디렉토리의 config.toml 파일에 저장됩니다.캐시, URL, 사이트 제목, 실시간 리셋, 내용 디렉터리, 원형 디렉터리, 언어, 버전, 개발 서버 등 configure any number of things을 선택할 수 있습니다. 더 잘 조직하기 위해 여러 개의 프로필을 선택할 수 있습니다.이 경우 config 폴더에 저장됩니다.Hugo 명령이 있는 --config 플래그를 사용하여 구성을 지정할 수도 있습니다.이 로고와 함께 사용하는 파일은 다른 설정보다 우선합니다.다음은 위에서 만든 시작 사이트의 구성 파일의 예입니다.

baseURL = "http://a-startup.com/"
languageCode = "en-us"
title = "My Startup Site"

만족하다

이것이 바로 사이트의 실제 내용이 있는 곳이다.예를 들어 블로그에서 내용은 모든 게시물, 이미지, 문서 및 기타 자원이 될 것이다.Hugo는 HTML 및 가격 인하를 포함한 variety of content types을 지원합니다.일반적으로 내용 실례는 전단 내용, 즉 실례의 메타데이터를 포함한다.posts/hello.md에서 가장 중요한 문제는 제목, 날짜와 초고 상태이다.hugo new 명령을 사용하여 컨텐츠 인스턴스를 만들 수 있습니다.

데이터

이 폴더에는 컨텐츠를 확장하기 위한 사이트의 추가 데이터가 포함되어 있습니다.JSON, TOML, CSV 또는 YAML 파일 형식을 사용할 수 있습니다.이 파일에서 데이터를 얻으려면 .Site.Data 변수를 인용해야 합니다.카페 사이트를 예로 들면 메뉴가 data/menus/beverages.json 파일에 있습니다.

{
    "beverages": [
        { "name": "Americano", "price": "$2.50" },
        { "name": "Cappuccino", "price": "$3.75" },
        { "name": "Espresso", "price": "$3.00" },
        { "name": "Macchiato", "price": "$4.00" }
    ]
}

다음과 같이 템플릿에서 이 데이터를 사용할 수 있습니다.

{{ range $.Site.Data.menus.beverages }}
    {{ .name }}: {{ .price }}
{{ end }}

비록 data 폴더는 정적 데이터 파일에 사용되지만, 외부 원본 (예: CMS, 예를 들어 Strapi 또는 다른 API) 에서 JSON과 CSV 데이터를 얻을 수 있습니다.당신은 getJSON과 getCSV이라는 함수를 사용하여 이러한 목적을 실현할 수 있습니다.데이터가 바뀔 때마다 사이트를 구축할 필요가 없기 때문에 더욱 유연성을 허용합니다.Strapi가 있으면 백엔드에 데이터를 추가하고 Hugo 사이트에서 사용할 수 있습니다.access external data on your Hugo site here을 사용하는 방법과 hosting your data with Strapi here을 사용하는 방법에 대해 더 많은 정보를 얻을 수 있습니다.

배치

이것들은 사이트의 템플릿이다.Hugo 템플릿은 Go의 [text/template](https://golang.org/pkg/text/template/)과 [html/template](https://golang.org/pkg/html/template/) 패키지를 사용합니다.HTML로 작성되지만 변수와 함수는 중첩된 중괄호 {{ }}에서 사용할 수 있습니다.템플릿 내부에서 외부 논리를 사용하는 것은 가능하다.이 템플릿 언어에 대한 입문서는 this link에서 찾을 수 있다.

리소스

자원 폴더가 캐시로 사용됩니다.위의 자산 처리에서 생성된 파일은 여기에 저장됩니다.

정지했어

그림, CSS, 자바스크립트, 그리고 다른 정적 내용을 이 폴더에 저장합니다.

메시지

웹 사이트에 추가된 테마는 이 폴더에 있습니다.위에서 생성한 예시 사이트에서 우리는 그 주제를 여기에 두었다.

기능

템플릿에서 내장된 Go 및 Hugo 기능과 도구를 사용할 수 있습니다.예를 들어, archetypes/default.md에서는 다음을 확인할 수 있습니다.

title: "{{ replace .Name "-" " " | title }}"

replace은 문자열의 일부분을 다른 내용으로 바꾸는 함수이다.이 예에서 파일 이름을 입력하고 -자를 모두 삭제한 다음 하나의 빈칸으로 대체합니다.title도 문자열을 제목의 대소문자로 바꾸는 함수이다.이것들은 단지 몇 가지 예일 뿐이다.Hugo's function reference에 더 많이 나와 있습니다.

변량

Hugo는 템플릿에 액세스할 수 있도록 내장 및 구성에 정의된 값을 제공합니다.이러한 변수에는 사이트, 페이지, 분류법, 컨텐트, 메뉴 및 기타 파일에 대한 정보가 포함됩니다.예를 들어, 글로벌 변수 [.Site](http://(https://gohugo.io/variables/site/#site-variables-list)에는 언어, 섹션, 사이트 제목, 기본 URL 등 사이트와 관련된 값이 포함됩니다.

관리하다

앞에서 말한 바와 같이 Hugo pipes는 사이트 자산을 전환하는 기능이다.파이프의 일부 흔한 용도는 converting SCSS/SASS into CSS, resource minification, resource bundling, fingerprinting과 a host of other functions이다.

결론

Hugo는 우수한 정적 사이트 생성기로서 속도가 빠르고 기능이 풍부하다.너는 그것으로 많은 일을 할 수 있다. 사이트의 내용을 처리할 때, 그것은 매우 큰 유연성을 제공한다.우리가 여기서 토론하는 것은 단지 빙산의 일각일 뿐이다.당신은 Hugo documentation에서 더 많은 재미있는 사용 방법을 읽을 수 있습니다.
본문은 최초로 Strapi Blog에 발표되었다.