자바스크립트를 활성화 해주세요

h042 Netlify에 Hugo 올리는 방법

 ·  ☕ 4 min read

    왜 Netlify를 쓰나요

    크게 다음의 이유 때문에 Netlify를 사용하니다.

    • 빌드하는 과정이 따로 필요하지 않습니다. 레포지토리에 push하는 것으로 사이트가 갱신됩니다.
    • 개인의 도메인으로 연결할 수 있습니다.
    • Let’s Encrypt로 생성된 SSL증명서를 자동으로 사용할 수 있게 해줍니다.

    좀 더 자세히 알아볼까요

    Netlify의 CI를 이용하면, 로걸에서 빌드하지 않아도 Netlify의 Compute를 빌려서 빌드할 수 있습니다. github등과 같은 레포지토리가 업데이트되면, 이벤트를 받아 배포 작업을 걸 수 있는데 이를 Continuous Deployment(줄여서 CD)라고 합니다. 이외에 다른 장점이 소개되어 있는데,

    • Continuous Deployment를 제공합니다.
    • global CDN을 제공합니다.
    • ultra-fast DNS
    • atomic deploys
    • instant cache invalidation
    • one-click SSL
    • a browser-based interface
    • a CLI

    hugo에서 제공하고 있는 공식 문서는 다음과 같습니다.
    https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

    바로 사용할 수는 없습니다. Netlify는 github과 같은 레포지토리의 이벤트를 받아서 실행합니다. 즉,

    • GitHub, GitLab, Bitbucket 등과 같은 레포지토리의 계정이 필요합니다.

    절차

    • Netlify 계정을 만듭니다.
      • app.netlify.com 에 signup합니다.
      • twitter, gitlab, github등의 어카운트를 사용할 수 있습니다.
    • 새로운 사이트를 만듭니다.
      • dashboard에서 New Site from Git을 선택합니다.
        • gitlab, github, bitbucket을 지원합니다.
    • git repository에서 netlify.toml 파일을 생성합니다.
    • Netlify console에서 Deploy site를 선택하면, 터미널이 나오며 build가 시작됩니다.
    • Build가 완료되면 적당한 이름으로 생성된 .netlify.com 이 표시됩니다.
    • 필요한 경우 Settings에서 도메인등의 정보를 입력합니다.

    netlify.toml

    제가 사용하고 있는 netlify.toml의 내용은 다음과 같습니다.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    [build] 
  publish = "public"
  command = "hugo"

[context.production.environment]
  HUGO_VERSION = "0.73.0" # if older, use format: 0.53 (no trailing zero)
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"
  
[context.branch-deploy.environment]
  HUGO_VERSION = "0.73.0" # if older, use format: 0.53 (no trailing zero)

[context.deploy-preview.environment]
  HUGO_VERSION = "0.73.0"

    주의해야할 점

    로컬에서 실행해 볼 때에는 다음의 설정은 아무래도 좋았는데, 실제 퍼블리쉬하는 경우에는 고쳐야할 설정항목이 있습니다.

    • /config/_default/config.toml
      baseURL = "http://example.org"

    로컬에서 hugo 명령어로 빌드해 보면 아시겠지만, 이 baseURL로 redirect하는 사양이 되어 있습니다. 이부분을 리마크 처리해 둡니다.

    # baseURL = "http://example.org"

    • static/manifest.json
      스마트폰 등에서 앱으로 등록하는 경우등에는 manifest.json도 사용됩니다.

        "name": "tkim.info",
  "short_name": "tkim.info",
  "default_locale": "ko",
  "description": "Tkim, The greatest partner of development in the world.",

    Netlify의 build 로그

    deploys > deployed 를 클릭해 로그를 보면 다음과 같은 내용을 볼 수 있습니다.

    10:44:50 AM: Waiting for other deploys from your team to complete
10:45:32 AM: Build ready to start
10:45:33 AM: build-image version: ca811f47d4c1cbd1812d1eb6ecb0c977e86d1a1d
10:45:33 AM: build-image tag: v3.3.20
10:45:33 AM: buildbot version: be8ecf2af866e16fa4301cc5c14de2ccbbb21cf4
10:45:34 AM: Fetching cached dependencies
10:45:34 AM: Starting to download cache of 103.0MB
10:45:35 AM: Finished downloading cache in 936.421405ms
10:45:35 AM: Starting to extract cache
10:45:38 AM: Finished extracting cache in 3.220135775s
10:45:38 AM: Finished fetching cache in 4.190672074s
10:45:38 AM: Starting to prepare the repo for build
10:45:38 AM: Preparing Git Reference refs/heads/master
10:45:39 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'public' versus '/' in the Netlify UI
10:45:39 AM: Different build command detected, going to use the one specified in the Netlify configuration file: 'hugo --gc --minify' versus '' in the Netlify UI
10:45:39 AM: Starting build script
10:45:40 AM: Installing dependencies
10:45:40 AM: Python version set to 2.7
10:45:40 AM: Started restoring cached node version
10:45:43 AM: Finished restoring cached node version
10:45:43 AM: v12.18.0 is already installed.
10:45:44 AM: Now using node v12.18.0 (npm v6.14.4)
10:45:44 AM: Started restoring cached build plugins
10:45:44 AM: Finished restoring cached build plugins
10:45:44 AM: Attempting ruby version 2.7.1, read from environment
10:45:45 AM: Using ruby version 2.7.1
10:45:46 AM: Using PHP version 5.6
10:45:46 AM: 5.2 is already installed.
10:45:46 AM: Using Swift version 5.2
10:45:46 AM: Installing Hugo 0.73.0
10:45:46 AM: Hugo Static Site Generator v0.73.0-428907CC/extended linux/amd64 BuildDate: 2020-06-23T16:40:09Z
10:45:46 AM: Started restoring cached go cache
10:45:46 AM: Finished restoring cached go cache
10:45:46 AM: go version go1.14.4 linux/amd64
10:45:46 AM: go version go1.14.4 linux/amd64
10:45:46 AM: Installing missing commands
10:45:46 AM: Verify run directory
10:45:47 AM: ​
10:45:47 AM: ┌─────────────────────────────┐
10:45:47 AM: │        Netlify Build        │
10:45:47 AM: └─────────────────────────────┘
10:45:47 AM: ​
10:45:47 AM: ❯ Version
10:45:47 AM:   @netlify/build 3.0.1
10:45:47 AM: ​
10:45:47 AM: ❯ Flags
10:45:47 AM:   deployId: 5f13a5928c76d3a7de2d4090
10:45:47 AM:   mode: buildbot
10:45:47 AM: ​
10:45:47 AM: ❯ Current directory
10:45:47 AM:   /opt/build/repo
10:45:47 AM: ​
10:45:47 AM: ❯ Config file
10:45:47 AM:   /opt/build/repo/netlify.toml
10:45:47 AM: ​
10:45:47 AM: ❯ Context
10:45:47 AM:   production
10:45:47 AM: ​
10:45:47 AM: ┌────────────────────────────────────┐
10:45:47 AM: │ 1. build.command from netlify.toml │
10:45:47 AM: └────────────────────────────────────┘
10:45:47 AM: ​
10:45:47 AM: $ hugo --gc --minify
10:45:53 AM: Building sites …
10:45:53 AM:                    | EN  | KO
10:45:53 AM: -------------------+-----+------
10:45:53 AM:   Pages            | 132 |  89
10:45:53 AM:   Paginator pages  |   3 |   5
10:45:53 AM:   Non-page files   |   3 |   0
10:45:53 AM:   Static files     | 128 | 128
10:45:53 AM:   Processed images |   0 |   0
10:45:53 AM:   Aliases          |  36 |  18
10:45:53 AM:   Sitemaps         |   2 |   1
10:45:53 AM:   Cleaned          |   0 |   0
10:45:53 AM: Total in 6246 ms
10:45:53 AM: ​
10:45:53 AM: (build.command completed in 6.3s)
10:45:53 AM: ​
10:45:53 AM: ┌─────────────────────────────┐
10:45:53 AM: │   Netlify Build Complete    │
10:45:53 AM: └─────────────────────────────┘
10:45:53 AM: ​
10:45:53 AM: (Netlify Build completed in 6.4s)
10:45:53 AM: Caching artifacts
10:45:53 AM: Started saving build plugins
10:45:53 AM: Finished saving build plugins
10:45:53 AM: Started saving pip cache
10:45:53 AM: Finished saving pip cache
10:45:53 AM: Started saving emacs cask dependencies
10:45:53 AM: Finished saving emacs cask dependencies
10:45:53 AM: Started saving maven dependencies
10:45:53 AM: Finished saving maven dependencies
10:45:53 AM: Started saving boot dependencies
10:45:54 AM: Finished saving boot dependencies
10:45:54 AM: Started saving go dependencies
10:45:54 AM: Finished saving go dependencies
10:45:54 AM: Build script success
10:45:54 AM: Starting to deploy site from 'public'
10:45:54 AM: Creating deploy tree 
10:45:54 AM: Creating deploy upload records
10:45:54 AM: 1 new files to upload
10:45:54 AM: 0 new functions to upload
10:45:55 AM: Starting post processing
10:45:55 AM: Post processing - HTML
10:45:56 AM: Post processing - redirect rules
10:45:56 AM: Post processing - header rules
10:45:56 AM: Post processing done
10:45:57 AM: Site is live
10:46:08 AM: Finished processing build request in 34.923159322s

    Site is live

    레퍼런스

    공유하기
    tkim
    글쓴이
    tkim
    Software Engineer