Ubuntu 18.04 LTS에 Hugo 사이트 생성기를 설치하는 방법
이 페이지에서
- 요구 사항\n
- 시작하기\n
- Hugo 설치
- Hugo로 웹사이트 만들기
- 정보 페이지 및 블로그 게시물 만들기
- 첫 번째 테마 설정
- 웹사이트 구축
- Hugo 서버 액세스
- 결론
Hugo는 웹 사이트를 쉽게 만드는 데 사용할 수 있는 Go 언어로 작성된 무료 오픈 소스 프레임워크입니다. 간단하고 빠르고 안전한 정적 사이트 생성기이므로 실행하는 데 데이터베이스가 필요하지 않습니다. Hugo는 플러그인 없이 무제한 콘텐츠 유형, 분류, 메뉴, 동적 API 기반 콘텐츠 등을 지원합니다. Hugo는 강력한 콘텐츠 관리, 내장 템플릿, 단축 코드, 사용자 지정 출력, 다국어 등을 포함한 다양한 기능을 제공합니다.
이 튜토리얼에서는 Ubuntu 18.04 LTS 서버에 Hugo를 설치하는 방법을 배웁니다.
요구 사항
- Ubuntu 18.04를 실행하는 서버.\n
- 고정 IP 주소 136.243.240.39가 서버에 구성되어 있습니다.
- 루트 비밀번호가 서버에 설정됩니다.\n
시작하기
시작하기 전에 시스템을 최신 버전으로 업데이트해야 합니다. 다음 명령을 실행하여 이를 수행할 수 있습니다.
apt-get update -y
apt-get upgrade -y
서버가 업데이트되면 서버를 다시 시작하여 변경 사항을 적용하십시오.
휴고 설치
기본적으로 최신 버전의 Hugo는 Ubuntu 18.04 기본 리포지토리에서 사용할 수 없습니다. 따라서 Git 저장소에서 다운로드해야 합니다. 다음 명령으로 다운로드할 수 있습니다.
wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb
다운로드가 완료되면 다음 명령을 사용하여 Hugo를 설치합니다.
dpkg -i hugo_0.58.2_Linux-64bit.deb
종속성 오류가 발생하면 다음 명령을 실행하여 종속성을 해결하십시오.
apt-get install -f
다음으로 다음 명령을 사용하여 Hugo 버전을 확인할 수 있습니다.
hugo version
다음 출력이 표시되어야 합니다.
Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z
다음 명령을 실행하여 Hugo에서 사용 가능한 옵션 목록을 볼 수도 있습니다.
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.
Complete documentation is available at http://gohugo.io/.
Usage:
hugo [flags]
hugo [command]
Available Commands:
config Print the site configuration
convert Convert your content to different formats
deploy Deploy your site to a Cloud provider.
env Print Hugo version and environment info
gen A collection of several useful generators.
help Help about any command
import Import your site from others.
list Listing out various types of content
mod Various Hugo Modules helpers.
new Create new content for your site
server A high performance webserver
version Print the version number of Hugo
Flags:
-b, --baseURL string hostname (and path) to the root, e.g. http://spf13.com/
-D, --buildDrafts include content marked as draft
-E, --buildExpired include expired content
-F, --buildFuture include content with publishdate in the future
--cacheDir string filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
--cleanDestinationDir remove files from destination not found in static directories
--config string config file (default is path/config.yaml|json|toml)
--configDir string config dir (default "config")
-c, --contentDir string filesystem path to content directory
--debug debug output
-d, --destination string filesystem path to write files to
--disableKinds strings disable different kind of pages (home, RSS etc.)
--enableGitInfo add Git revision, date and author info to the pages
-e, --environment string build environment
--forceSyncStatic copy all files when static is changed.
--gc enable to run some cleanup tasks (remove unused cache files) after the build
-h, --help help for hugo
--i18n-warnings print missing translations
--ignoreCache ignores the cache directory
--ignoreVendor ignores any _vendor directory
-l, --layoutDir string filesystem path to layout directory
--log enable Logging
--logFile string log File path (if set, logging enabled automatically)
--minify minify any supported output format (HTML, XML etc.)
--noChmod don't sync permission mode of files
--noTimes don't sync modification time of files
--path-warnings print warnings on duplicate target paths etc.
--quiet build in quiet mode
--renderToMemory render to memory (only useful for benchmark testing)
-s, --source string filesystem path to read files relative from
--templateMetrics display metrics about template executions
--templateMetricsHints calculate some improvement hints when combined with --templateMetrics
-t, --theme strings themes to use (located in /themes/THEMENAME/)
--themesDir string filesystem path to themes directory
--trace file write trace to file (not useful in general)
-v, --verbose verbose output
--verboseLog verbose logging
-w, --watch watch filesystem for changes and recreate as needed
완료되면 다음 단계로 진행할 수 있습니다.
Hugo로 웹사이트 만들기
이제 Hugo가 설치되었습니다. 이제 Hugo로 웹사이트와 콘텐츠를 만들 차례입니다.
다음 명령을 실행하여 test.example.com이라는 새 웹 사이트를 만들 수 있습니다.
hugo new site test.example.com
웹 사이트가 성공적으로 생성되면 다음과 같은 결과가 표시됩니다.
Congratulations! Your new Hugo site is created in /root/test.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.
다음 명령을 사용하여 웹 사이트에서 생성된 모든 파일을 나열할 수도 있습니다.
ls test.example.com/
다음 출력이 표시되어야 합니다.
archetypes config.toml content data layouts static themes
정보 페이지 및 블로그 게시물 만들기
이제 디렉터리를 웹 사이트로 변경하고 다음 명령을 사용하여 about.md 페이지를 만듭니다.
cd test.example.com
hugo new about.md
다음 출력이 표시되어야 합니다.
/root/test.example.com/content/about.md created
다음으로 about.md 파일을 열고 내용을 추가합니다.
nano content/about.md
다음과 같이 변경합니다.
--- title: "About" date: 2019-09-10T06:57:08Z draft: false --- I am hitesh jethva working as a technical writer.
완료되면 파일을 저장하고 닫습니다. 그런 다음 다음 명령을 사용하여 첫 번째 게시물을 작성하십시오.
hugo new post/first.md
다음 출력이 표시되어야 합니다.
/root/test.example.com/content/post/first.md created
다음으로 first.md 파일을 열고 내용을 추가합니다.
nano content/post/first.md
다음과 같이 변경합니다.
--- title: "First" date: 2019-09-10T06:58:51Z draft: false --- ## This is my first blog post Hi How are you!
첫 번째 테마 설정
정보 페이지와 블로그 게시물이 생성되었습니다. 이제 첫 번째 테마를 설정할 차례입니다.
먼저 디렉토리를 테마로 변경하고 다음 명령을 사용하여 hugo-strata-theme를 다운로드합니다.
cd themes
wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip
다운로드가 완료되면 다음 명령을 사용하여 다운로드한 테마를 추출합니다.
unzip master.zip
그런 다음 추출된 테마의 이름을 아래와 같이 바꿉니다.
mv hugo-strata-theme-master hugo-strata-theme
다음으로 themes/hugo-strata-theme에서 예제 config.toml 파일의 내용을 /root/test.example.com/config.toml에 있는 사이트의 config.toml 파일로 복사해야 합니다.
다음 명령으로 수행할 수 있습니다.
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
다음으로 baseurl 변수를 업데이트하고 아래와 같이 config.toml 파일의 이 테마 탐색에 새 정보 페이지를 포함합니다.
nano ../config.toml
아래와 같이 기본 URL을 업데이트합니다.
baseurl = "/"
또한 새 정보 페이지를 포함하려면 다음 행을 추가하십시오.
[[menu.main]] name = "About" url = "about" weight = 5
완료되면 파일을 저장하고 닫습니다.
다음으로 themes/hugo-strata-theme/layouts/index.html에 있는 테마 템플릿 레이아웃을 사용하여 랜딩 페이지 레이아웃을 test.example.com/layouts/index.html로 업데이트해야 합니다.
nano /root/test.example.com/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 }}
완료되면 파일을 저장하고 닫습니다.
완료되면 다음 단계로 진행할 수 있습니다.
웹사이트 구축
이제 웹 사이트에 대한 테마가 구성되었습니다. 웹사이트를 구축할 시간입니다. 이렇게 하려면 디렉터리를 웹 사이트로 변경하고 다음 명령을 사용하여 사이트를 빌드합니다.
cd /root/test.example.com
hugo
다음 출력이 표시되어야 합니다.
| EN +------------------+----+ Pages | 17 Paginator pages | 0 Non-page files | 0 Static files | 26 Processed images | 0 Aliases | 5 Sitemaps | 1 Cleaned | 0 Total in 18 ms
이제 Hugo 서버를 시작하고 다음 명령을 실행하여 서버 IP 주소와 바인딩합니다.
hugo server --bind=0.0.0.0 --baseUrl=http://136.243.240.39 -D -F
서버가 성공적으로 시작되면 다음 출력이 표시되어야 합니다.
| EN
+------------------+----+
Pages | 17
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 5
Sitemaps | 1
Cleaned | 0
Total in 28 ms
Watching for changes in /root/test.example.com/{content,data,layouts,static,themes}
Watching for config changes in /root/test.example.com/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://136.243.240.39:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop
완료하면 Hugo 웹 인터페이스에 액세스할 수 있습니다.
휴고 서버 접속
이제 Hugo 서버가 시작되어 포트 1313에서 수신 대기합니다. 다음으로 웹 브라우저를 열고 URL http://136.243.240.39:1313을 입력합니다. 아래와 같이 Hugo 서버 대시보드로 리디렉션됩니다.
이제 왼쪽 창에서 정보를 클릭합니다. 다음 이미지에서 정보 페이지를 볼 수 있습니다.
이제 왼쪽 창에서 블로그 버튼을 클릭합니다. 다음 이미지에서 블로그 게시물을 볼 수 있습니다.
결론
위의 튜토리얼에서는 Ubuntu 18.04 서버에 Hugo 서버를 설치하는 방법을 배웠습니다. 휴고로 about 페이지와 테마로 사이트를 만드는 방법도 배웠습니다. Hugo에 대한 자세한 내용은 Hugo Doc에서 Hugo 공식 문서를 참조하십시오. 궁금한 점이 있으면 언제든지 문의해 주세요.