CG.Lee Blog

블로그 만들기 GitHub 심화 4편 - Jekyll 템플릿

Chulgil.Lee -

목차

지난번 글에서는 기본제공되는 심플한 블로그 위주로 구성했었기 때문에 맘에드는 테마가 없어 실망했을수 있다. 하지만 이번 글에서는 설치할 수 있는 무료 테마를 알아보고 테마를 설치하는 법을 공유한다.

이번 글에서는 아래와 같은 목차로 블로그만드는 방법을 설명한다.

  1. 로컬환경에서 테마를 설치
  2. 테마 수정
  3. GitHub로 배포

기본적으로 https://jekyllthemes.io 에 접속하면 유료 및 무료 테마를 다운받을 수 있다.
나는 그중에서 Mediumish가 맘에들어 이 테마로 설치하려 한다.
먼저 완성된 블로그의 모습을 확인하자.

1. 로컬에서 테마를 설치

터미널에서 아래 url로 테마를 클론한다.

$ git clone https://github.com/wowthemesnet/mediumish-theme-jekyll.git
$ cd mediumish-theme-jekyll
$ bundle
$ jekyll serve

여기까지 진행하였다면 localhost:4000로 접속해보자.
블로그가 완성되어있는 것을 확인 할 수 있다.

2. 테마 수정

완성된 블로그에 내가 쓴글이 아닌 포스트와 메뉴들을 삭제하고 본격적으로 나의 사이트로 바꿔보자.
일단 _config.yml 파일을 열어보면 메인 사이트 정보가 있는데 이것을 수정하자.

사이트 기본설정

# Site
name: '블로그 제목'
description: '블로그 설명'
meta_description: '블로그 메타테그'
logo: 'assets/images/logo.png'
favicon: 'assets/images/logo.png'
baseurl: '/저장소이름/'
google_analytics: ''
disqus: '' #댓글 api 이용시 disqus-id 입력
mailchimp-list: ''

사이트 운영자 설정

# Authors
authors:
  sal:
    name: 사용자 이름
    display_name: 표시될 이름
    gravatar: 
    email: email@gmail.com
    web: https://username.github.io
    twitter: https://twitter.com/username
    description: "사용자 설명"

첫 포스트 작성하기

먼저 작성되어있는 불필요한 파일들을 삭제한다.
커맨드라인을 통해서 삭제해도 되고 탐색기나 에디터로 삭제 해도된다.

$ rm -fr .git
$ rm README.md
$ rm LICENSE.txt
$ rm -fr _posts/*

_posts/폴더에 custom_file.md 파일을 생성하고 아래 내용을 넣으면 포스팅이 완료된다.

---
layout: post
title:  "첫포스트"
author: 사용자명
categories: [ Jekyll ]
image: assets/images/11.jpg
featured: true
hidden: false
---

## 첫 블로그 포스트 입니다.

지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.
지킬은 심플한 정적 사이트 생성기 입니다.

메뉴 수정하기

_layout/default.html 파일에 메뉴정보가 있다.

아래 li a 태그를 만들고자하는 메뉴로 수정하면된다.

<!-- Begin Menu -->
  <ul class="navbar-nav ml-auto">
                
    <li class="nav-item">
      <a class="nav-link" href="{{ site.baseurl }}/index.html">Blog</a>
    </li>
  </ul>
<!-- End Menu -->

이제 다시 테스트서버를 띄워보면 정보가 변경된것을 확인 할 수 있다.

$ jekyll serve

3. GitHub로 배포

그전에 많은 사람들이 _config.yml baseurl의 모호한 설명으로 많은 문제를 겪고있다.
나처럼 프로젝트단위로 url을 구성한경우 baseurl뒤에 '/'이 있는지 꼭 확인하자

baseurl: '/저장소이름/'

이제 웹에서 블로그를 확인할 수 있게 본인의 GitHub에서 저장소를 추가한후 위에 만들어놓은
파일들을 추가하고 push하자.

$ git clone git@github.com:username/jekyll-mediumish.git
$ cd jekyll-mediumish
$ mv ../mediumish-theme-jekyll/* ./
$ git add .
$ git commit -m 'init jekyll theme'
$ git push

이제 이전 포스트에서 설명했듯 GitHub Pages > Source > master branch 로가서 Save를 클릭하면 웹사이트가 완성된다.