Skip to content
πŸ‡This is a jekyll Grape-Theme. It is good for a portfolio as well as a blog!
CSS HTML Ruby JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



λΈ”λ‘œκ·ΈλΏλ§Œ μ•„λ‹ˆλΌ 포트폴리였 νŽ˜μ΄μ§€λ„ μ§€μ›ν•˜λŠ” Grape-Themeλ₯Ό 자유둭게 μ‚¬μš©ν•˜μ„Έμš”.

Welcome to Grape Theme! It is good for a portfolio as well as a blog.
Customize Grape-Theme and use it for free.



  1. Fork and clone the Grape Theme repo

    git clone
  2. Install Jekyll

    gem install jekyll
  3. Install the theme's dependencies

    bundle install
  4. Update _config.yml and projects.yml with your own settings.

  5. Run the Jekyll server

    bundle exec jekyll serve


Grape-Themeμ—μ„œλŠ” μžλž‘ν•  λ§Œν•œ 두 가지 κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€. ν™ˆ ν™”λ©΄μ˜ ν”„λ‘œν•„ μ„Ήμ…˜κ³Ό 포트폴리였 νŽ˜μ΄μ§€μ˜ ν”„λ‘œμ νŠΈ, 상세 ν”„λ‘œν•„ κΈ°λŠ₯이 그것 μž…λ‹ˆλ‹€. 이 λͺ¨λ“  κΈ°λŠ₯듀은 _config.yml 와 projects.yml νŒŒμΌμ„ μˆ˜μ •ν•˜λŠ” κ²ƒλ§ŒμœΌλ‘œλ„ μΆ©λΆ„ν•©λ‹ˆλ‹€.

Grape-Theme has two great features: the profile section and the project section of the portfolio page. Just by changing _config.yml and projects.yml , you can use all of these features.

Blog Settings

기본적인 λΈ”λ‘œκ·Έ 섀정은 config.yml μ—μ„œ κ°€λŠ₯ν•©λ‹ˆλ‹€.

The blog configuration is available in config.yml.

Site configuration

baseurl: "{subpath}"
url : "https://{username}"

theme_settings :
  title : {blog title}

Profile Settings

κ°„λ‹¨ν•œ ν”„λ‘œν•„ μ •λ³΄λŠ” ν™ˆ ν™”λ©΄μ—μ„œ 좜λ ₯되며, experience 및 skills 뢀뢄은 포트폴리였 νŽ˜μ΄μ§€μ—μ„œ ν•¨κ»˜ λ³΄μ—¬μ§‘λ‹ˆλ‹€.

Profile is displayed on the index page, and also experience and skills are displayed on the portfolio page.

profile :
  image : assets/img/{prorile image}
    username : {username}
    description : 
    experience :
      - start :
        end : 
        experience : {company name}, {title}
     skills : 
      - skill : 
        value : 85  # Percent value


ν•œ νŽ˜μ΄μ§€μ—μ„œ λ³΄μ—¬μ§ˆ ν¬μŠ€νŒ… 개수λ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.

Defines the number of posts to be shown on one page.

paginate: 5


Disqus shortname을 μ„€μ •ν•˜κ³ , ν¬μŠ€νŒ… 속성에 comments : True λ₯Ό μΆ”κ°€ν•˜λ©΄ λΈ”λ‘œκ·Έ κΈ€μ—μ„œ λŒ“κΈ€μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

you can use the comments by following document and adding a comments : True

disqus_shortname :

Portfolio Settings


ν”„λ‘œμ νŠΈ μ„ΈνŒ…μ€ _data/projects.ymlμ—μ„œ κ°€λŠ₯ν•©λ‹ˆλ‹€.

The Project configuration is available in _data/projects.yml.

포트폴리였 νŽ˜μ΄μ§€μ—μ„œλŠ” ν”„λ‘œμ νŠΈ λͺ©λ‘κ³Ό 상세보기λ₯Ό λͺ¨λ‹¬λ‘œ μ§€μ›ν•©λ‹ˆλ‹€. λ¬Όλ‘  μƒμ„Έλ³΄κΈ°λŠ” 선택적이며, 상세값이 modal : False인 경우 λͺ¨λ‹¬ λ²„νŠΌμ€ μƒμ„±λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

The portfolio page provides projects and detailed views by modal. If modal : False is selected, modal will not be displayed on site.

  • print :

    • print : True λ₯Ό μ„ νƒν•œλ‹€λ©΄, λΈ”λ‘œκ·Έμ˜ ν™ˆ ν™”λ©΄μ—μ„œλ„ ν”„λ‘œμ νŠΈμ˜ 정보가 좜λ ₯λ©λ‹ˆλ‹€.
    • If print : True is selected, it will be displayed on landing page

    print project

  • modal

    • modal : True λ₯Ό μ„ νƒν•œλ‹€λ©΄ λͺ¨λ‹¬ λ²„νŠΌμ΄ ν™œμ„±μ™€ λ©λ‹ˆλ‹€.

    • If modal : True is selected, modal will be displayed on the Portfolio page


print : True
modal : True  

λ‹Ήμ‹ μ˜ ν”„λ‘œμ νŠΈμ— λŒ€ν•œ 링크와 상세 μ„€λͺ…을 μ•„λž˜μ™€ 같이 μΆ”κ°€ν•˜μ„Έμš”.

Add details(link, description) about your projects

url : # Full URL
image : "portfolio.png" # path: assets/project/
date : 2019.06.09 - 2019.07.11
title : 
summary : 
description :  
# modal contents
contents :
  - title :
    image :      	    
    description : 


λΈ”λ‘œκ·Έμ˜ μ»¬λŸ¬λ“€μ€ _sass/base/_variable.scss μ—μ„œ ν•œλ²ˆμ— 변경이 κ°€λŠ₯ν•©λ‹ˆλ‹€.

You can change colors at once. colors are in _sass/base/_variable.scss

Posts in Grape theme

이 λΈ”λ‘œκ·Έμ˜ λͺ¨λ“  ν¬μŠ€νŒ… μŠ€νƒ€μΌμ€ _sass/base/_utility.scss 에 μ •μ˜λ˜μ–΄ 있으며 Demo page와 Demo pageμ—μ„œ μ—¬λŸ¬ νƒœκ·Έλ“€μ˜ 좜λ ₯을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

You can confirm how to draw tags at here and here

Create a new post

  1. Create a .md inside _posts folder

    ν•œκΈ€λ‘œ 파일 이름을 λ§Œλ“œλŠ” 경우, ꡬ글 검색을 λΆ™μ˜€μ„λ•Œ λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€. 되둜둝 μ˜μ–΄λ₯Ό μ‚¬μš©ν•΄μ£Όμ„Έμš”:D

  2. Write the Front Matter and content in the file.

    layout: post
    title: title
    subtitle : subtitle
    tags: [tag1, tag2]
    comments : 


The theme is available as open source under the terms of the MIT License.

You can’t perform that action at this time.