Github 블로그 만들기 (with Hexo)

# 프로젝트 생성

1. 다운로드 및 설치

• git : https://git-scm.com/downloads
• nodejs : https://nodejs.org/ko/

2. 프로젝트 생성

# hexo-cli 설치
$ npm install hexo-cli -g 

# hexo 프로젝트 생성
$ hexo init <프로젝트폴더>
$ cd <프로젝트폴더>
$ npm install

3. 확인

# 구동
$ cd <프로젝트폴더>
$ hexo server 

# 접속
https://localhost:4000

---

# tranquilpeak 테마적용

1. 테마 다운로드

• hexo-theme-tranquilpeak
• 해당 파일이 들어있는 폴더명을 tranquilpeak으로 변경하여 <프로젝트폴더>/themes/ 디렉토리로 이동
• hexo 프로젝트의 <프로젝트폴더>/_config.yml 파일을 열어 themes: tranquilpeak 변경 후 저장
• hexo 서버 구동하여 변경된 테마 확인

2. category, tags 활성화

• hexo new page 를 통해 디렉토리를 생성하고 하위에 생성된 index.md 페이지의 내용을 아래와 같이 수정

# 프로젝트 디렉토리 이동 
cd <프로젝트폴더> 
$ hexo new page "all-categories" 
$ hexo new page "all-tags" 

# cd <프로젝트폴더>/source/all-categories/index.md 
title: "all-categories" 
layout: "all-categories" 
comments: false 

# cd <프로젝트폴더>/source/all-tags/index.md 
title: "all-tags" 
layout: "all-tags" 
comments: false

3. 테마수정

@사이드바 (sidebar)

• 원하는 형태의 사이드바에 해당하는 번호로 변경 후 저장 (주석 설명 참고)

# <프로젝트폴더>/themes/tranquilpeak/_config.yml 
sidebar_behavior: 1

 

@사이드바 (sidebar) 메뉴

• 불필요한 메뉴를 주석처리하여 비활성화

# <프로젝트폴더>/themes/tranquilpeak/_config.yml 
sidebar: 
    menu: 
        home: 
            title: home 
            url: / 
            icon: fa fa-home 
    # ...필요하지 않은 메뉴는 주석 처리하여 비활성화 
    author_links: 
        twitter: 
            title: global.twitter 
            url: https://twitter.com/ 
            icon: fab fa-twitter 
    # ...필요하지 않은 링크는 주석 처리하여 비활성화

 

@프로필(author)

• <프로젝트폴더>/themes/tranquilpeak/source/_images 에 원하는 프로필 이미지 저장

# <프로젝트폴더>/themes/tranquilpeak/_config.yml 
author: 
    email: about.moonyz@gmail.com 
    location: Asia/Seoul 
    picture: profile.png

 

@커버(cover)

• <프로젝트폴더>/themes/tranquilpeak/source/_images 에 원하는 커버 이미지 저장
• 참고 : 기본 커버 이미지 사이즈 1920X1080

# <프로젝트폴더>/themes/tranquilpeak/_config.yml 
cover_image: <파일명>

 

@폰트(font)

• 파일 하단에 아래 내용 추가 (cdn 폰트 import)

#<프로젝트폴더>/themes/tranquilpeak/source/_css/tranquilpeak.scss 
@import url(https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css);

 

# <프로젝트폴더>/themes/tranquilpeak/source/_css/utils/_variables.scss

// Font families
$merriweather-serif:   'Merriweather', serif; 
$nanum-sans-kr:          'NanumSquareRound', "Helvetica Neue", sans-serif; 
$nanum-coding:   'Source Code Pro', "NanumSquareRound", Consolas; 

$font-family-base: $nanum-sans-kr; 

$font-families: (
  // base
  'headings': $nanum-sans-kr,
  // components
  'code': $nanum-coding,
  'caption': $nanum-sans-kr,
  'image-gallery': $nanum-sans-kr,
  'post-header-cover': $nanum-sans-kr,
  'post-meta': $nanum-sans-kr,
  'post-content': $nanum-sans-kr,
  'post-excerpt-link': $nanum-sans-kr,
  'highlight': $nanum-coding,
  // layout
  'sidebar': $nanum-sans-kr,
);

4. 수정된 테마 빌드하기

• grunt를 통해 간단히 빌드
• 테마 내부의 css, js 등을 변경 후 grunt를 통해 빌드 해주어야 수정 내용이 적용된다.

# 설치 
$ npm install -g grunt-cli 

# 초기설정 
$ cd <프로젝트폴더>/themes/tranquilpeak/ 
$ npm install grunt --save-dev 

# 빌드, 테마 내부의 파일을 수정할 때마다 해당 명령을 통해 적용 
$ grunt build 

# hexo 구동, 테마 디렉토리에서 구동되지 않으므로 프로젝트 루트 폴더에서 구동 
$ cd <프로젝트폴더> 
$ hexo server

---

# Github 배포

1. Github Repository 생성

• Repository Name은 <Github Name>.github.io 형식으로 입력해야 github.io 도메인을 사용할 수 있다.
• Github.com > New repository > Repository Name > Public > Create repository

2. Github 배포 설정

• <프로젝트폴더>/_config.yml 수정
• 배포할 Repository의 주소를 입력 후 저장

deploy:
  type: git
  repo: https://github.com/moonyz/moonyz.github.io.git
  branch: master

3. Github 배포

$ cd <프로젝트폴더>
$ npm install hexo-deployer-git --save
$ hexo generate
$ hexo deploy 
# hexo d -g 명령으로 동시에 수행 가능

4. 확인

• <GithubName>.github.io 주소로 접속하여 배포가 잘 되었는지 확인.
• [참고] 위 Repository는 배포를 위한 저장소로 프로젝트 소스를 관리할 저장소가 필요하다면 추가로 생성하여 remote한다.

# 1. 신규 Repository 생성 

# 2. git 연동
$ cd <프로젝트폴더>
$ git init 
$ git remote origin master https://github.com/moonyz/<NewRepoName>.git
$ git push -u origin master

# 3. 소스 업로드
$ cd <프로젝트폴더>
$ git add * 
$ git commit 
$ git push 

# 4. .gitignore 파일의 내용은 업로드 되지 않습니다.  전부 업로드 하고 싶다면 
$ git add -f *
$ git commit
$ git push