📘 [GithubPages] Jekyll hydejack 블로그 커스텀 - 2

2025년 03월 02일 in Study / ETC on #Jekyll #GithubPages

[GithubPages] Jekyll hydejack config.yml 커스텀 방법

---

• 1. _config.yml 기본 정보 설정
• 2. _data/authors.yml 기본 정보 설정
• 3. favicon 설정
• 📑 Reference

이번에는 블로그 이름, 설명, 로고, 저자 정보 등 주요 설정을 변경하는 방법을 단계별로 설명합니다.

1. _config.yml 기본 정보 설정

---

_config.yml 설정 방법에 대해 알아보겠습니다.

# file: `_config.yml`
lang:                  ko-KR, en-US

# The title of your blog. Used in the sidebar and the browser tab.
title:                 Dev Study Note

# A short description (~150 chars) of the page used for the meta description tag.
# Can use markdown, but no more than one paragraph (enforced by `>`)
description:           >
  나의 Dev 기억공간 저장소

# A shorter description for the sidebar.
tagline:               나의 Dev 기억공간 저장소

# A list of keywords for your blog
keywords:              [java, react, coding, spring, blog, dev]

# A (square) logo for your site.
# If provided, it will be shown at the top of the sidebar.
# It also used by the `jekyll-seo-tag` plugin.
logo:                  /assets/img/logo.png

# This should be the same author as first entry in `_data/authors.yml`.
author:
  # Used by `jekyll-feed`:
  name:                (username)
  email:               (user.email)
  # # Used by `jekyll-seo-tag`:
  # twitter:             <username>

# Add links to the sidebar.
menu:
  - title:             Dev
    url:               /dev/
    submenu:
    - title:            Spring
      url:              /spring/
    - title:            React
      url:              /react/
  - title:             Study
    url:               /study/
    submenu:
      - title:            Algorithm
        url:              /algorithm/
      - title:            DataStructure
        url:              /ds/
      - title:            ETC
        url:              /etc/  
  - title:             Documentation
    url:               /docs/
  - title:             About
    url:               /about/

# Add links to the footer.
# Typically you'll want to link to your cookie- or privacy policy (if appliable), etc..
legal:
  - title:             LICENSE
    url:               /LICENSE/
  - title:             NOTICE
    url:               /NOTICE/
  - title:             CHANGELOG
    url:               /CHANGELOG/

# This text will appear in a `<small>` tag in the footer of every page.
copyright:             © 2025. All rights reserved.

# Format of the permalinks
permalink:             /:categories/:year-:month-:day-:title/

# Pagination configuration (used by the `blog` layout)
paginate:              10
paginate_path:         /:num/

# Sidebar image and theme color of the site.
accent_image:          /assets/img/sidebar-bg.jpg
accent_color:          rgb(79,177,186)

collections:
  featured_categories:
    permalink:         /:name/
    output:            true

  featured_tags:
    permalink:         /tag-:name/
    output:            true

  projects:
    permalink:         /projects/:path/
    output:            true

  pages:
    permalink:         /:name/
    output:            true

• lang : 언어 선택
• description : meta tag에 사용됨 (SEO용)
• title : 블로그 타이틀 설정
• tagline : sidebar에 간략히 표시됨
• keywords : 검색 엔진 최적화를 위한 키워드 설정
• logo : sidebar 상단에 logo 이미지 경로 설정
• author : 저자 정보를 설정
• menu : sidebar 메뉴 생성을 위해 사용
• legal : 하단 footer 저작권 정보 링크 생성을 위해 사용
• copyright : 하단 footer 저작권 정보 text 수정
• permalink : 영구적인 url format 설정한다.
• pageinate : 페이지 당 보여주는 포스팅 개수를 설정
• accent_image : sidebar backgroud 이미지 경로 설정

주요 설정값을 변경하여 title : 타이틀 menu : 메뉴 accent_image : 백그라운드 이미지 등 변경된 모습을 볼 수 있다.

---

2. _data/authors.yml 기본 정보 설정

---

# file: `_data/authors.yml`
author1:
  name: 홍길동
  email: devstudy@example.com

  about: |
    🙋 I am a BackEnd Engineer from South Korea. <br>
    🔥 I aim to become a BackEnd Engineer

  picture:
    path: /assets/img/mypic.png
    srcset:
      1x: /assets/img/mypic.png
      2x: /assets/img/mypic.png

  social:
    github: yourgithub
    twitter: yourtwitter
    linkedin: yourname-dev

• authors1 : config.yml에서 설정한 프로필 동일하게 설정
• about : 각 페이지 하단이나 about 메뉴에 내용을 보여준다.
• picture : about에 이미지 보여준다. scrset은 device마다 다른 해상도 설정
• social : 각 페이지 하단 sidebar에 소셜 링크 설정

그외에 설정 관련해서 자세한 부분은 공식 가이드 문서를 참조 바랍니다.

---

3. favicon 설정

---

🔗favicon generator 링크로 들어가서 favicon 이미지 생성

docs/config.md 설명이 나와있다.

# file: `docs/config.md`
## Adding custom Favicons and App Icons
### Changing the Favicon
By default, Hydejack will use the Favicon from `/assets/icons/favicon.ico` and Apple Touch Icon from `/assets/icons/icon-192x192.png`.
You can either override these files, or override the path in the config file via `favicon` and `app_touch_icon` keys:

```yml
# file: "_config.yml"
favicon: /favicon.ico
apple_touch_icon: /assets/img/logo.png

/assets/icons/favicon.ico 경로에 넣어주면 된다.



---

📑 Reference

---

• https://github.com/hydecorp/hydejack
• https://hydejack.com/
• https://www.favicon-generator.org/

---