이미지 첨부하기

지난 번 작성한 글에 이미지를 첨부하고 싶다. 이미지 파일명은 sample.png라고 하자. 근데… 어디에 이미지 파일을 복사해야 할지 모르겠다. content/posts/sample.png 에 복사하면 될까? 일단 해보자.

├── content
│   └── posts
│       ├── first-post.md
│       └── sample.png

이미지 복사를 완료했으면 글을 수정해보자.

• content/posts/first-post.md

  ---
  title: "First Post"
  date: 2021-01-16T19:49:44+09:00
  draft: true
  ---
  
  ## 시작하기
  
  앞으로 할 일
  
  - https://fshilver.github.io 매일 방문하기
  - 두 번째 포스팅 작성하기
  - ![이미지 다운로드에 실패할 경우 보여집니다.](sample.png)
  

안보인다…

결론부터 말하자면 폴더 구조를 아래처럼 하면 된다.

• Before

  ├── content                        
  │   └── posts
  │       ├── first-post.md
  │       └── sample.png
  

• After

  ├── content
  │   └── posts
  │       └── first-post
  │           ├── index.md
  │           └── sample.png
  

1. content/posts/first-post 폴더를 생성한다.

2. content/posts/first-post.md를 위에 생성한 폴더 안으로 이동시키되 이름을 index.md로 변경한다.

3. 이미지 파일을 content/posts/first-post/sample.png로 복사한다.

4. 위 과정을 명령어로 하면 아래와 같다.

   # 현재 폴더 : my-blog-site
   mkdir content/posts/first-post
   mv content/posts/first-post.md content/posts/first-post/index.md
   mv content/posts/sample.png content/posts/first-post/
   

성공이다. 위와 같이 하나의 포스팅에 대응되는 폴더를 만들고 관련된 파일을 넣어두는 방법을 Hugo에서는 Page Bundle이라고 한다. 포스팅에 포함되는 모든 이미지 파일들을 묶어서 관리할 수 있다. 포스팅 별로 이미지 파일을 관리할 수 있으므로 직관적이고 관리에 용이하다. 특히 Jekyll에 비해서는…

https://gohugo.io/content-management/page-bundles/#examples-of-leaf-bundle-organization

아쉽지만 동영상 파일이나 PDF 파일 첨부는 좀 다른 방법을 써야 한다. 이에 대한 내용은 추 후 다루겠다.

오늘까지의 내용만으로도 Hugo를 이용해 블로그를 하기에 충분하다. 하지만 누군가 만들어 놓은 테마를 사용해야만 하기 때문에 내 입맛에 맞게 테마를 꾸미기 위해서는 좀 더 알아야 할 내용이 많다. 다음 글부터는 테마를 직접 만들기 위한 내용을 다뤄 볼 예정이니 기대(?)하시라.