웹사이트 검색

Debian 11에서 Hugo를 사용하여 웹 사이트를 만드는 방법


이 페이지에서

  1. 전제 조건
  2. Debian 11에 Hugo 설치
  3. Hugo로 웹사이트 만들기
  4. 정보 페이지 및 샘플 게시물 만들기\n
  5. 웹사이트에 테마 설치
  6. 웹사이트 구축 및 시작
  7. Hugo 웹사이트에 액세스
  8. 결론

Hugo는 Go로 개발된 무료 오픈 소스 웹사이트 프레임워크입니다. Hugo는 간단하고 빠른 웹 사이트를 쉽게 만들 수 있는 안정적이고 현대적인 정적 사이트 생성기를 제공합니다. 미리 만들어진 템플릿과 SEO, 주석 달기, 분석 및 기타 기능을 포함한 기타 기능이 함께 제공됩니다. Hugo 사이트는 PHP, Python, Ruby와 같이 비용이 많이 드는 실행 시간 없이 실행할 수 있으며 데이터베이스가 필요하지 않습니다.

이 게시물에서는 Debian 11에서 Hugo 사이트 생성기를 설치하고 사용하는 방법을 보여줍니다.

전제 조건

  • Debian 11을 실행하는 서버.\n
  • 루트 암호는 서버에서 구성됩니다.\n

데비안 11에 Hugo 설치

기본적으로 Hugo 패키지는 Debian 11 기본 리포지토리에 포함되어 있습니다. 다음 명령을 사용하여 설치할 수 있습니다.

apt-get install hugo -y

Hugo가 설치되면 아래 명령을 사용하여 Hugo 버전을 확인할 수 있습니다.

hugo version

다음 출력이 표시되어야 합니다.

Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)

Hugo로 웹사이트 만들기

이 섹션에서는 hugo.example.com이라는 새 웹사이트를 만듭니다.

다음 명령을 실행하여 웹사이트를 생성합니다.

hugo new site hugo.example.com

웹 사이트가 생성되면 다음과 같은 결과가 표시되어야 합니다.

Congratulations! Your new Hugo site is created in /root/hugo.example.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

다음 명령을 사용하여 Hugo에서 만든 모든 파일을 나열할 수 있습니다.

ls -l hugo.example.com

다음과 같은 결과가 표시됩니다.

drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes
-rw-r--r-- 1 root root   82 Nov 13 09:27 config.toml
drwxr-xr-x 2 root root 4096 Nov 13 09:27 content
drwxr-xr-x 2 root root 4096 Nov 13 09:27 data
drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts
drwxr-xr-x 2 root root 4096 Nov 13 09:27 static
drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes

정보 페이지 및 샘플 게시물 만들기

먼저 다음 명령을 사용하여 디렉토리를 웹 사이트로 변경하십시오.

cd hugo.example.com

그런 다음 다음 명령을 사용하여 정보 페이지를 만듭니다.

hugo new about.md

다음과 같은 결과가 표시됩니다.

/root/hugo.example.com/content/about.md created

다음으로 다음 명령을 사용하여 about.md 페이지를 편집합니다.

nano content/about.md

아래와 같이 파일을 변경합니다.

---
title: "About Us"
date: 2021-11-13T09:28:18Z
draft: false
---

This is About Us page for this website.

다음으로 다음 명령을 사용하여 샘플 게시물을 만듭니다.

hugo new post/page.md

다음과 같은 결과가 표시됩니다.

/root/hugo.example.com/content/post/page.md created

다음으로 다음 명령을 사용하여 샘플 게시물 페이지를 편집합니다.

nano content/post/page.md

아래와 같이 파일을 변경합니다.

---
title: "Page"
date: 2021-11-13T09:29:29Z
draft: true
---

# Hugo Page

This is my first hugo website page!

완료되면 파일을 저장하고 닫습니다.

웹사이트에 테마 설치

다음으로 Hugo 웹사이트에 액세스하려면 테마를 다운로드하고 설정해야 합니다.

먼저 다음 명령을 사용하여 디렉터리를 테마로 변경합니다.

cd themes

그런 다음 다음 명령을 사용하여 Hugo 테마를 다운로드합니다.

wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

그런 다음 다음 명령을 사용하여 다운로드한 테마의 압축을 풉니다.

unzip master.zip

그런 다음 다음 명령을 사용하여 추출된 테마의 이름을 바꿉니다.

mv hugo-strata-theme-master hugo-strata-theme

다음으로 config.toml의 콘텐츠를 사이트의 구성에 복사합니다.

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

그런 다음 다음 명령을 사용하여 config.toml 파일을 편집합니다.

nano ../config.toml

다음 줄을 추가/수정합니다.

baseurl = "/"

[[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

파일을 저장하고 닫은 다음 웹 사이트에 대한 index.html 파일을 만듭니다.

cd ../
nano layouts/index.html

다음 줄을 추가합니다.

{{ define "main" }}
        {{ if not .Site.Params.about.hide }}
                {{ partial "about" . }}
        {{ end }}

        {{ if not .Site.Params.portfolio.hide }}
                {{ partial "portfolio" . }}
        {{ end }}

        {{ if not .Site.Params.recentposts.hide }}
                {{ partial "recent-posts" . }}
        {{ end }}

        {{ if not .Site.Params.contact.hide }}
                {{ partial "contact" . }}
        {{ end }}
{{ end }}

파일을 저장하고 닫습니다.

웹사이트 구축 및 시작

이제 이를 사용하기 위해 웹사이트를 구축해야 합니다. 다음 명령을 실행하여 빌드할 수 있습니다.

hugo

다음과 같은 결과가 표시됩니다.

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | EN  
-------------------+-----
  Pages            |  8  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  2  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 48 ms

다음으로 Hugo 서버를 시작하고 다음 명령을 사용하여 서버 IP와 바인딩합니다.

hugo server --bind=0.0.0.0 --baseUrl=http://104.245.34.233 -D -F

다음과 같은 결과가 표시됩니다.

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | EN  
-------------------+-----
  Pages            | 11  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  3  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 42 ms
Watching for changes in /root/hugo.example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/hugo.example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://104.245.34.233:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

이 시점에서 Hugo 서버가 시작되고 포트 1313에서 수신 대기합니다.

휴고 웹사이트에 접속하기

이제 웹 브라우저를 열고 URL http://your-server-ip:1313을 사용하여 웹 사이트에 액세스하십시오. Hugo 기본 페이지가 표시됩니다.

왼쪽 창에서 정보를 클릭합니다. 다음 화면에 정보 페이지가 표시되어야 합니다.

결론

축하합니다! Hugo를 성공적으로 설치하고 Debian 11에서 웹 사이트를 만들었습니다. 이제 Hugo를 사용하여 안전하고 빠른 웹 사이트를 쉽게 구축할 수 있습니다.