Github Blog 만들기 #1 - Hydejack 테마로 기본 구조 만들기

in Development Log / Blog Log on Blog
Github Blog 만들기 #1 - Hydejack 테마로 기본 구조 만들기

왜 Hydejack을 고르셨나요?

일단 표지가 있는 스타일이 좋았고, 화면 전환시에 부드러워 좋았다.
나는 ruby, jekyll에 대한 기초지식도 없는 상황이라 최대한 커스터마이징 하지 않아도 아름다운 테마를 고르고 싶었다.
기존에 쓰시던 무료버전 한국 유저분들도 많아서 좋았다.
그런데 역시 하다보니 하나씩 욕심이 나는건 어쩔 수 없었다.
그래서 여기저기 정보를 동냥하며 무료버전 커스터마이징의 여정을 떠나게 되는데..

1. 기본 틀 만들기

테마를 고르면 휙 생성되어서 글만 쓰게되면 얼마나 좋을까
Hydejack은 개인적으로 입문용으로 어렵다고 생각된다..
그냥 무작정 따라하기 쿡북스타일로 저장해두려고 한다(나도 까먹을까봐)
편하게 github 블로그를 Hydejack으로 생성하고 싶은 분들에게 한줄기 빛이 되길..

공식사이트에서 다운받아 기초 Directory 구축

  • Hydejack의 공식 사이트에서 Download로 파일을 받아 압축해제한다.

https://hydejack.com/download/

1_download_dir_list.png

  • local에서 bundle install을 수행한다.

나는 IntelliJ 내부 터미널에서 실시했다.
처음부터 Github 파일을 받으면 Gemfile이 없어서 bundle install이 안된다는 에러가 났다.

공식사이트 Github에서 다운받아 기초 Directory에 부족한점 추가

  • Hydejack의 공식 GitHub 사이트에 가서 받아 압축을 해제한다.

2_hydejack_dir.png


기존 Download받아 구축한 우리의 본진 Directory와 비교해서 부족한 점을 추가해준다.

이부분을 나는 download받아 구축하는 블로그와 GitHub를 fork하여 구축하란 블로그 글 사이에서 혼란스러워하다 찾았다.
그러다 낸 결론은 두 가지를 병합하는 것이다. 나는 빨리 글을 쓰고 싶었다…

download dir <- hydejack

  • .scripts
  • _includes
  • _js
  • _layouts
  • _sass
  • assets

위에 선언된 hydejack에 있는 folder 내용을 붙여넣으면 된다.
겹치는게 있다면 Overwrite 했다. (초기 구축이므로)

  • _config.yml을 열어서 sidebar를 수정해준다.

3_config_sidebar_menu.png

# file: '_config.yml'

# title명명은 자유, 
# url은 추후에 추가할 폴더명과 slug와 동일하게 할 예정이다.

menu:
  - title:             DevLog   # 여기에는 개발 글용. 시간순 정렬 X
    url:               /devlog/ 
  - title:             Study    # 여긴 공부용이라 시간순 정렬
    url:               /study/
  - title:             Documentation
    url:               /docs/
  - title:             About
    url:               /about/

5_sidebar.png

여기까지 하면 나오는 결과물이다.
sidebar를 종류별로 만들거라 보시고 참고하셔서 응용하면 될 것 같다.

  • _featured_categories에 md파일을 만들어준다.

4_devlog.png

---
layout: list    # list 고정이다. _layout 폴더의 list.html을 쓴다는 말인듯?
title: Development Log # 들어가면 나오는 게시판 제목이다.
slug: devlog 
# slug는  공식 홈페이지에서는 식별값이라고 한다. 중요.
# 나는 그냥 (게시판 글 dir 이름, _featured_categories에 md파일명 다 맞췄다. 

description: >
  개발하며 생긴일
sitemap: false
---

6_sidebar,page연동.png 내가 원하는건 그저 SideBar를 누를 때 해당 게시판에 원하는 글들이 나오는 기능이다.
이게 게시판에 나오는 글 List와 게시판 헤더 설명부분은 별개인가보다.
이제 게시판에 나오는 글 List가 내가 원하는 글들이 나오게끔 해야한다.

게시판 글 List 설정

  • root에 위에 설정한 slug와 같은 dir를 만들어준다.
  • 하위에 _posts 폴더를 만들어준다.
  • _posts에 넣고 싶은 글을 쓴다.

7_boardEx.png

md의 글 제목은 yyyy-mm-dd-제목.md로 해준다.
제목은 상관없는데 연도는 잘 맞춰주면 좋다. (글쓴 날짜와 연동된다.)

Q: 다른 폴더에 만들어도 되나요?

그냥 맞추는게 좋다. 게시판과 글의 url이 연동이 된다.

7_boardDepth.png

devlog2로 폴더명만 바꾸면 이런식으로 바뀐다.

문제는 devlog2경로가 홈페이지상에 없어서 devlog2를 누르면 이상한곳으로 간다.
보여지는 Path도 _featured_categories에 맞춘 slug에 연동된 title로 자동전환해준다.

8_testPath.png 8_2.png

Path가 계속해서 / 경로로 추가된다.

게시판 글 Tag 설정

글 말고 Tag에 대한 설정도 있다.

  • _featured_tags에 md파일을 만들어준다.

9.png

post에 설정해줄 tag 설정값과 slug 가 연동되는듯 하다.

  • 이 태그를 post에 달아준다.

테스트로 앞에 만든 devlog/testPath 카테고리에 있던 post인
2017-11-23-개발하며_생긴일.md 글에 tag를 붙이겠다.

---
layout: post
title: DevLog 예제 개발하며 생긴일
description: >
  A page showing how regular markdown content is styled in Hydejack.
image: /assets/img/blog/example-content-ii.jpg
sitemap: false

categories: [devlog, testPath, testPath2] 
#  -> 카테고리를 굳이 folder로 만들지 않아도 이렇게 되지만 개인적으로 폴더로 만드는게 좋다.
# 글 관리가 편해지지 않을까 싶다.
tags: [java]
# 이부분을 추가해주면 된다. 앞서 _featured_tags에 만든 java tag를 붙여줬다.
---

10.png Java,Log로 태그가 잘 붙은 모습

11.png Java 태그를 클릭시, 태그끼리 글을 모아주는 모습

카테고리는 /로 Post의 Depth를 표기해주고 Tag는 on 으로 뒤에 붙는다는걸 확인할 수 있다.
필요하다면 Java를 누르면 자동으로 Java Tag을 달고 있는 문서만 모아서 보여주는 기능도 제공된다.

  • 정리하자면 Post 내부에 categories는 Depth를 /로 표기해주는데 이는 실제 Directory로 구분해 관리할 예정이다.
  • Tag는 붙여서 관리해도 좋을 것 같다.
  • Tag덕에 Categories 내부/외부에서 효율적인 분류가 가능하다.

SourceCode

깃허브 소스코드는 아래 Repository에서 확인할 수 있다.

sourceCode on GitHub