elecbrandy

Hugo 블로그 구축하기 (1)

hugo
📚 Hugo 블로그 만들기
  1. Hugo 블로그 구축하기 (1)
  2. Hugo 블로그 구축하기 (2)
  3. Hugo 블로그 구축하기 (3)

1. 소개

Hugo + Github 조합으로 30분 만에 개인 개발 블로그를 구축하기 (1)

세상에 정말 많은 블로그 서비스가 존재한다. 개인 메모용, 혹은 지식을 공유하기 위한 개발 블로그 등등... 나는 마크다운 기반으로 필기하는 습관이 있어 Hugo + GitHub Pages 조합을 선택했다.

아래 Hugo 테마 사이트에 들어가면 전세계 Hugo 유저들이 제작한 블로그 테마가 등록되어 있다. 다른 테마를 원하는 경우 아래 링크에서 더 많은, 더 예쁜 테마를 확인해보자. 각 테마 내부에 데모 사이트 접속부터 실제 설치-사용방법까지 적혀있기 때문에 초보자라도 쉽게 따라할 수 있다.

물론 설치 과정에서 시행착오가 존재할 수 있고, 업데이트가 종료된 테마인 경우 최신 Hugo 엔진에서 작동하지 않는 경우도 있다. 따라서 이와 같은 고민을 겪을 초보자를 위해 이 가이드를 작성하며, 우선 freshPink 테마를 사용해 실습해보자.




2. 기본 정보

가이드에 앞서 우리가 사용할 기술에 대한 간단한 사전 지식을 읽어보자!


2-1. Github Page

GitHub Pages는 GitHub 저장소에 있는 HTML, CSS, JS 파일 등의 정적 콘텐츠를 웹사이트로 호스팅해주는 서비스이다. GitHub 계정이 있다면 누구나 추가 비용 없이 웹사이트를 호스팅할 수 있다. 감사합니다 Github!


2-2. Github Actions

GitHub Actions 이란 깃허브 저장소 내에서 개발 작업을 자동으로 처리해주는 도구이다.


2-3. Hugo

Hugo 는 Go 언어로 작성된 정적 사이트 생성기(Static Site Generator)이다. (사용하기 위해 Go를 알 필요없음)




4. freshPink 테마 살펴보기

이번 가이드로 사용해볼 테마는 freshPink 테마이다. 다음 링크를 접속해서 어떻게 생긴 테마인지, 데모사이트는 어떤지 한번 살펴보자.




5. 설치 방법




6. Local에 설치하기

6-1. Go , Hugo 설치

# Go, Hugo 설치하기
brew install go
brew install hugo

# extended 버전인지 확인하기
hugo version

6-2. Github repo 세팅하기

# 클론 받기
git clone https://github.com/<username>/<username>.github.io.git

# 해당 디렉토리로 이동
cd <username>.github.io

# Hugo site 생성하기 (강제)
hugo new site . --force

# gitignore 추가
echo "/public/" >> .gitignore

6-3. hugo.toml 덮어씌우기

baseURL = 'https://example.org/' # your git repository address
title = 'freshpink' # your own blog title
languageCode = 'en-us'
canonifyURLs = true

[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10

[[menus.main]]
name = 'TAGS'
pageRef = '/tags/'
weight = 20

[[menus.main]]
name = 'ABOUT'
pageRef = '/about/'
weight = 30

[module]
  [module.hugoVersion]
    extended = true
    min = "0.116.0"
  [[module.imports]]
    path = "github.com/elecbrandy/freshpink"

[params]
  # --- Site Metadata ---
  googleAnalytics = "G-000000000"
  copyright = 'Copyright © 2024 elecbrandy'

  # --- Theme & Display Settings ---
  primaryColor = "#fa8b84"
  math = true

  # --- GitHub Chart ---
  githubUsername = "elecbrandy"
  showGithubChart = true

  # --- Main Image ---
  mainImageUrl = "https://zrr.kr/0wve8W"
  showMainImage = true

[taxonomies]
  tag = 'tags'

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

6-4. hugo.toml 수정하기


6-5. theme 받아오기

# go.mod 만들기 -> 모듈로 테마를 관리하겠다는 뜻 -> go.mod 가 생성됨
hugo mod init github.com/username/username.github.io

# hugo.toml 파일에 지정한 테마를 모듈로 다운받는다는 뜻
hugo mod get

# 다운로드 후 모듈 정리 등
hugo mod tidy

6-5. theme 적용 확인하기

# 새로운 글 만들어보기
hugo new posts/hello.md

# 로컬 서버 띄우기 (캐시 무시)
hugo server --ignoreCache --noHTTPCache

# 확인했다면 일단 푸시해주자
git add .
git commit -m "blog init"
git push origin main

6-6. theme 업데이트

hugo mod get -u
hugo mod tidy

만약 사용하던 테마에 새로운 기능이 추가되었다면 -> 테마를 최신 버전으로 업데이트하기 위해 위 명령어를 사용하면 된다.




7. 마무리




📚 Hugo 블로그 만들기
  1. Hugo 블로그 구축하기 (1)
  2. Hugo 블로그 구축하기 (2)
  3. Hugo 블로그 구축하기 (3)