Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



๋ธ”๋กœ๊ทธ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€๋„ ์ง€์›ํ•˜๋Š” 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.