hexo와 github로 블로그 구축하기

블로그 시작 전부터 하는 갈등

이전부터 개발자스럽게 직접 구축해서 블로그를 운영해보고 싶었습니다.

정적페이지를 운영해보고 싶어서 찾아본 결과

일반 블로그

1. 네이버

2. 티스토리

플랫폼 제공형 일반 블로그는 두 가지가 우리나라에서는 대표적이었습니다.

카페24 같은 호스팅 업체에서는 블로그 보다 쇼핑몰 정적페이지 제공을 합니다.

구축형 블로그

1. 워드프레스

2. git hub

3. git lab

4. 손수 개발

이런 저런 고민 끝에 티스토리로 정했습니다.

장점

1. HTML 작성이라는 일말의 자유

2. 초대장 형태(지금은 없어짐)

3. 플러그인 지원

4. 깔끔한 스킨

5. 파일 데이터의 여유와 안전성

아쉬운 김에 github에 jekill, hugo, hexo로 구축이라도 해보고 싶었습니다.

언젠가는 이 경험이 도움이 되리라는 생각으로.

---

git hub

 

1. git hub에서 아이디를 생성합니다.

2. USERNAME.github.io 라는 repository를 만들면서 README.md를 생성합니다.

    ex) otrodevym.github.io

3. otrodevym.github.io를 url에 검색하면 접속 할 수 있습니다.

# 한가지 팁 : 프로젝트 이름으로 github page 만들기

USERNAME.github.io 로 repository를 생성하지 않아도 괜찮습니다.

예를 들어 TIL이라는 repository를 만들고 나서 설정을 하면 github page로 만들 수 있습니다.

repository에서 Settings로 들어갑니다.

Settings에서 내리면 GitHub Pages 항목이 있습니다.

None을 클릭하고 master branch로 변경합니다.

변경이 완료 되면 URL이 나타납니다.

git hub 설명은 끝!

---

hexo 

튜토리얼이 한글로 번역이 되어 있습니다.

참고하시면 금방 하실수 있습니다.

hexo

1. node.js를 다운로드 합니다.

2. git을 다운로드 합니다.

3. hexo를 설치 합니다.

    > npm install -g hexo-cli 

4. hexo 명령어로 초기화를 실행 합니다.

    > hexo init <디렉토리명>

    > cd <디렉토리명>

    > npm install

    ex) > hexo init blog

    ex) > cd blog

    ex) > npm install

    블로그 퍼블리셔 끝.

    테마가 마음에 들지 않으면 

    hexo/themes에서 선택 할 수 있습니다.

5. hexo 명령어로 포스팅 할 글감을 생성 합니다.

    > hexo new post "test"

6. md 파일로 생성 된 test 파일을 확인할 수 있습니다.

7. test 파일에서 원하는 글감을 작성합니다.

8. 이제 git hub에 만들어 두었던 블로그에 hexo를 (연결)동기화를 위해 설정을 합니다.

    _config.yml 파일을 열고 아래와 같이 작성합니다.

    여기서 otrodevym으로 되어 있는 username 부분은 github 본인의 아이디를 입력합니다.

deploy:

type : git

repo:https ://github.com/otrodevym/otrodevym.github.io.git

branch : master

9.  hexo 명령어로 작성 된 글감을 public 파일을 변환합니다.

    이 과정은 실제로 보여질 파일을 만드는 과정입니다.

    > hexo generate 

    or

    > hexo g 

    둘 다 같은 기능합니다.

10. 새로 생성 된 public 폴더를 전부 열어보면 test 파일을 확인 할 수 있습니다.

11. github에 디플로이(배치)하기 위해서는 플러그인 설치 해야 합니다.

    > npm install hexo-deployer-git --save

12. 설치가 완료 되면 git hub에 올려보도록 합니다.

    > hexo deploy

    or<br>

    > hexo d 

13. USERNAME.github.io로 접속하면 적용 된 사이트를 확인 할 수 있습니다.

hexo 명령어 설명

1. hexo init <디렉토리명> : 블로그를 초기화 생성

2. hexo new [post, draft, page] <파일명> : 작성 할 게시글 생성

    post : 일반 게시글

    draft : 초안 게시글

    page : 메인 화면상에 탭 생성

3. hexo server : 로컬 서버 동작 -> localhost:4000 접속

4. hexo generate or g : public 배포 파일 생성

5. hexo clean : public 배포 파일 삭제 및 초기화

6. hexo deploy or d : github에 배치

7. hexo publish : draft 파일 post 이동

기본 설정

설정은 _config.yml에서 할 수 있습니다.

아래를 참고 합니다.

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site

title: 개발 블로그

subtitle:

description:

keywords:

author: otrodevym

language: ko

timezone: Asia/Seoul

# URL

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child'

and root as '/child/'

url: http://otrodevym.github.io

root: /

permalink: :year/:month/:day/:title/

permalink_defaults:

# Directory

source_dir: source

public_dir: public

tag_dir: tags

archive_dir: archives

category_dir: categories

code_dir: downloads/code

i18n_dir: :lang

skip_render:

# Writing

new_post_name: :year:month:day-:title.md # File name of new posts

default_layout: post

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

filename_case: 0

render_drafts: false

post_asset_folder: true

relative_link: false

future: true

highlight:

enable: true

line_number: true

auto_detect: false

tab_replace:

# Home page setting

# path: Root path for your blogs index page. (default = '')

# per_page: Posts displayed per page. (0 = disable pagination)

# order_by: Posts order. (Order by date descending by default)

index_generator:

path: ''

per_page: 10

order_by: -date

# Category & Tag

default_category: TIL

category_map:

- TIL

tag_map:

- TIL

# Date / Time format

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

## http://momentjs.com/docs/#/displaying/format/

date_format: YYYY-MM-DD

time_format: HH:mm:ss

# Pagination

## Set per_page to 0 to disable pagination

per_page: 10

pagination_dir: page

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: landscape

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repo: https://github.com/otrodevym/otrodevym.github.io.git

branch: master

느낀 점

 hexo는 구축이 쉽고 마크 다운 사용하는 재미가 있습니다.

블로그로 하나 더 쓸까 했지만 github호스팅은 나중에 다른 용도로 사용 할 예정입니다.

티스토리로 만족하기로 했습니다. "하나라도 잘해야지!"

티스토리에서 마크다운을 쓸수 있는지 찾아보았습니다.

다양한 방법이 있었지만 역시 제공해주는걸 쓰는게 우선 안전합니다.

- css 추가 방법

- 컨버팅 방법

- 편집기 복붙 방법

- API 방법 : 이건 좀 재밌을 듯.