Jekyll 이미지 관리하기

게시 2024/12/14

6 분읽는 시간

Jekyll 이미지 관리하기

Jekyll에서는 일반적으로 글은 _posts 에 이미지는 assets 에 저장한다.

하지만 이러한 방식의 경우 추후 image가 많아 질경우 두가지 디렉토리에 관리를 해줘야하는 불편함이 예상되었다..

일반적인 jekyll의 이미지 리소스 관리

  
learninghub/                 # 프로젝트의 루트 디렉토리
├── _config.yml              # Jekyll 설정 파일
├── _posts/                  # 블로그 게시글을 저장하는 디렉토리
│   ├── 2024-12-14-ubuntu-upgrade.md    # 블로그 포스트
│   └── ...                  # 다른 포스트들
├── _site/                   # 빌드 후 생성되는 사이트 파일
├── assets/                  # 정적 파일들 (이미지, CSS, JavaScript)
│   ├── images/              # 이미지 파일들
│   │   ├── image1.png       # 이미지 파일1
│   │   ├── image2.jpg       # 이미지 파일2
│   │   └── ...              # 다른 이미지들
└── ...

만약 카테고리와 포스트가 많아지게 된다면… 이미지가 너무 복잡해 질거라 예상했다.

만약 `_post` 에 `.md` 와 image를 같이 저장한다면?

  
learninghub/                     # 프로젝트의 루트 디렉토리
├── _config.yml                   # Jekyll 설정 파일
├── _posts/                       # 블로그 게시글을 저장하는 디렉토리
│   ├── 2024-12-14-ubuntu-upgrade.md    # 블로그 포스트 파일
│   ├── 2024-12-14-ubuntu-upgrade/      # 해당 포스트의 이미지 폴더
│   │   ├── ubuntu-runner-upgrade.png   # 이미지1
│   │   └── ubuntu-runner-upgrade2.jpg  # 이미지2
│   │   └── ...              # 다른 이미지들
└── ...

게시글에 대한 마크다운과 이미지가 같이 관리 된다면 더욱 편하다고 생각했다.

Jekyll에서 이미지를 관리하는 방법

CDN(Content Delivery Network)

  
# The CDN endpoint for media resources.
# Notice that once it is assigned, the CDN url
# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
#
# e.g. 'https://cdn.com'
cdn: "https://unggu0704.github.io/learninghub"

CDN은 웹 콘텐츠를 여러 데이터 센터(엣지 서버)에서 복제
사용자가 이미지를 요청할 때 가장 가까운 서버에서 전송.. .하는 개념

하지만 jekyll에서 블로그 호스팅으로 쓰기에 현재로써는 image를 호스팅하는 서버 즉 내 블로그 url을 적어둔다.

이렇게 되면 jekyll은 이미지를 가져올 때 내 블로그의 url을 찾아간다.

baseurl

  
# The base URL of your site
baseurl: "/learninghub"

일반적인 baseurl을 사용하여 로컬 환경에서도 url이 통일 될 수 있게 설정한다.

시도 방법

플러그인 - jekyll-postfiles를 사용 (X)

https://github.com/nhoizey/jekyll-postfiles

permalink의 설정에 맞춰 폴더를 생성해 이미지 경로를 쉽게 해주는 플러그인… 이지만
Github Page에서는 동작하지 않는다고 한다…

CDN을 통한 사용법 (X)

이미지 경로를 ![tt](/_posts/image/apple-touch-icon.png)_test_ 로 설정
cdn 설정을 통해 deploy 작업을 거치면
- "https://unggu0704.github.io/learninghub" 가 추가로 붙는다.
https://unggu0704.github.io/learninghub/_posts/image/apple-touch-icon.png)_test_test) 가 완성

하지만.. 해당 방법은 확장성이 낮으며 로컬 환경에서 이미지 테스트를 해볼 수가 없다.

해결

permalink와 site.url을 사용

결국 중요한건 이미지가 있는 경로까지 url 설정을 해야한다. (배포/로컬 환경 동일하게!)

  
└─Tech
    └─jekyll-blog
        │  2024-12-15-Jekyll-로컬-환경-구축.md
        │
        └─2024-12-15-Ubuntu에러
                2024-12-15-Ubuntu에러.md
                image 1.png
                image.png

본래는 _post 에 모든 .md 파일을 넣어야하지만 카테고리 관리를 위해 내부에 별도의 폴더를 디렉토리 이름으로 설정해 관리하고 있다.
불러와야할 url
- {환경에따른 주소}/learninghub/categories/tech/jekyll-blog/Ubuntu에러/image경로

/learninghub

baseurl 설정으로 가져올 수 있다.

기존의 permalink 설정

  
permalink: /posts/:title/

post에 접근시 접근 url은
- https://unggu0704.github.io/learninghub/posts/post 제목
해당 디렉토리 경로를 가져오기 위해 permalink를 실제 디렉토리 이름과 동일하게 작업

변경된 permalink 설정

  
permalink: /:categories/:title/

실제 _post 안에서 카테고리 이름과 동일하게 폴더를 만들어 관리하여 url을 통일
이럴 경우 실제 url과 디렉토리 구조와 동일하게 맞추어진다.

baseurl과 permalink의 조합

  
![image.png](/tech/jekyll-blog/jekyll%EC%9D%B4%EB%AF%B8%EC%A7%80%EA%B4%80%EB%A6%AC//image.png)

baseurl + page.url (현재 접속url) 을 하여 이미지 경로를 설정
Liquid 템플릿 구문을 사용하기 위해서 render_with_liquid: true` 작업이 필수적

이미지가 정상적으로 로드 되는 것을 확인할 수 있었다.

Tech, jekyll-blog

writing