GitHub Pages 블로그를 Hugo PaperMod 테마를 사용해서 블로그를 만든 방법을 기록해 둔다. [PaperMod WiKi - Installation] 문서와 블로그를 참고했다.

Installation

  1. Hugo 설치 및 site 생성 (작성일 기준 최신 버전 테마는 Hugo 버전 v0.112.4 이상 필요)

    $ brew install hugo
$ hugo new site MyFreshWebsite --format yaml

  2. Theme 설치 (권장 방식인 git submodule 사용)

    # Initialize git repository
$ git init && git commit -am "initial commit"

# Install theme
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# needed when you reclone your repo (submodules may not get cloned automatically)
$ git submodule update --init --recursive
    • Theme update 
      $ git submodule update --remote --merge

  3. hugo.yaml에 theme 명시 (구 config.yaml)

    theme: ["PageMod"]

Customizing

<img> tag로 post에 image 추가하기

참고 : PaperMod and Hugo tweaks

  1. hugo.yaml에 아래 설정 추가 
    markup:
  goldmark:
    renderer:
      unsafe: true # 이 설정이 없으면 <img> tag를 사용할 수 없다.
    • Markdown 문법(![]())을 사용하면 이 설정이 없어도 되지만 image size를 조절할 수 없다.
  2. Post 구조를 아래와 같이 변경 
    contents
ㄴ posts
   ㄴ post-1
      ㄴ index.md
      ㄴ image.jpg
  3. Markdown 안에서 <img> tag로 image 추가 
    <img src="./image.jpg" width="300" />
  1. /content 경로에 menu page를 markdown file로 생성
  2. hugo.yaml에 menu 설정 추가 (참고)

Deploy to GitHub

  1. Repository 두 개 생성 (실제로 website로 보여지는 파일들은 /public에 있으므로 저장소 분리)

    1. blog source : blog source를 upload할 repository
    2. {username}.github.io : public directory를 upload할 repository

  2. Remote repo로 추가

    # blog source repository
$ git remote add origin https://github.com/username/blog-source.git

# public directory만 submodule로 따로 관리
$ git submodule add -b main https://github.com/username/username.github.io.git public

# Submodule 등록 확인
$ ll .git/modules
    • submodule에 theme과 public directory 두 개가 등록되어 있다면 정상적으로 등록된 것
    • 만약, fatal: 'public' already exists and is not a valid git repo 과 같은 error가 발생하면 public 폴더를 삭제한 뒤 재시도
    • Root와 /public에서 각각 git remote -v를 실행하면 서로 다른 repository가 등록되어 있는 것을 확인

  3. 배포 script

    • 블로그를 배포할 때 blog-source와 {username}.github.io 두 repository에 각각 push해야 함
    • 배포 과정을 script로 작성해서 사용 (참고)

Reference