이번에는 블로그관리에서 가장 중요한 부분인 글쓰기와 테마 설정에 대하여 다룰 것이다.

글쓰기


레이아웃

Hexo 글쓰기는 다음과 같은 명령어로 시작한다.

1
$ hexo new [layout] <title>

layout 에는 post,page, draft 3가지가있고, 각각의 역할은 다음과 같다 (기본은 post).

Layout 위치 설명
post source/_posts 기본적인 글쓰기. 일반적으로 글을 쓰고싶을때 사용
page source 해당 경로에 접근해야 볼 수 있는 페이지 작성
draft source/_drafts 초안 작성. 나중에 publish로 배포

Post

홈페이지에 게시되는 가장 기본적인 글쓰기. 기본 레이아웃으로 지정되어있다. 기본 레이아웃은 _config.ymldefault_layout에서 변경 가능하다.

Page

해당 경로에 접근해 불 수 있는 페이지를 작성한다. (ex: About, CV)

Draft

바로 게시하지 않고, 작성 할 수 있는 초안이다. 홈페이지에 올리지 않을 게시글을 미리 작성해 놓고, 나중에 publish 명령어로 게시 할 수 있다.

로컬 서버에서 초안이 포함된 홈페이지는 다음 명령어로 확인 할 수 있다.

1
$ hexo server --draft

파일명

기본적으로, <title>이 마크다운 파일이름과 글의 제목이 된다. 파일이름은 페이지의 url이 되기때문에 내용과 관련이있는 것으로 해놓는것이 좋다. 글의 제목은 나중에 마크다운파일 내에서 수정 할 수 있다. 기본 파일명은 _config.yml파일의 new_post_name설정을 변경하여 바꿀 수 있다. 예를들어, :year-:month-:day-:title.md 는 포스트가 생성된 날짜를 파일의 접두사로 사용하게 합니다. 우리는 아래와 같은 placeholder를 사용 할 수 있습니다.

placeholder 설명
:title Post 제목(소문자, 공백은 ‘-‘하이픈으로 변경된다)
:year 연도를 생성합니다. (예 : 2015)
:month 월을 생성합니다. (예 : 04)
:i_month 월을 생성합니다. (예 : 4)
:day 일을 생성합니다. (예 : 07)
:i_day 일을 생성합니다. (예 : 7)

Scaffolds

포스트 생성 시에는 scaffolds 폴더 내의 적당한 파일을 기반으로 구성한다.

1
$ hexo new photo "My Gallery"

이 명령어가 수행되면 Hexo는 scaffolds 폴더 내에서 photo.md를 찾기 시작하고 이를 기반으로 한 포스트를 구성한다. Scaffolds 내에서는 아래의 placeholder를 사용할 수 있다.

placeholder 설명
layout 레이아웃
title 타이틀
date 파일 생성일

테마설정


테마를 직접 만들수도 있지만, 다른사람이 만든 테마를 수정해서 만드는 것도 가능하다. 다른사람이 만든 테마는 Hexo Themes 에서 찾아 볼 수있다.

이 홈페이지는 Minos를 기반으로 만들어졌으니 이것을 기준으로 설명하겠다.

설치하기

1
$ git clone https://github.com/ppoffice/hexo-theme-minos.git themes/minos

설치할때 몇가지 다른 모듈을 요구할수도있는데, 메세지가 나오는대로 설치하면 잘 될 것이다.

그리고 이 테마를 사용하기위해 블로그의 _config.yml을 수정한다.

1
theme: minos

그리고 테마 폴더 안에있는 _config.yml.example_config.yml로 수정한다. 그리고 _config.yml을 수정해서 블로그를 입맛대로 꾸밀 수 있다.

여기서는 몇가지 필수적인 것만 이야기 하겠다.

메뉴

간단하게 내 소개와 이럭을 쓰는공간 + 자주 쓸것같은 카테고리를 정리해놓았다.

1
2
3
4
5
6
7
8
menu:
About: /about
CV: /cv
Math: /categories/Math
Life: /categories/Life
Categories: /categories
Archives: /archives
Tags: /tags

로고

이미지를 쓸 수도 있지만, 나는 간단하게 내 이름을 로고로 해두었다.

1
2
3
4
5
6
7
8
9
# Website's logo shown on the left of the navigation bar.
# It can either be an url to an image or a string if the following option is set.
logo:
text: Seyeon Lee
article:
# Show word count and estimated reading time.
readtime: true
# Code highlight theme, please see https://highlightjs.org/static/demo/
highlight: atom-one-light

파비콘

source폴더안에있는 images에 원하는 파비콘을 넣어주면 된다.

1
2
# Website's icon url.
favicon: /images/favicon.ico

댓글기능

본 블로그에서는 disqus를 사용하였다.

내용
bb
aa

$ \int_0^1 $

최근에 개인 홈페이지 개설에 대한 관심이 생겨서 여러가지를 알아보고있었다. 처음에는 구글 사이트도구를 이용해서 개설했는데, 생각보다 자유도가 굉장히 부족해서 마음에 들지않았다. 그래서 웹서핑하다가 지나가면서 봤던 hexo를 이용해서 블로그를 개설해 보기로 하였다.

Hexo

Hexo란 블로그 프레임워크의 일종인 쉽고 빠르게 블로그를 만들 수 있다. 여러가지 특징이있지만 개인적으로 가장 맘에드는 것을 글을 쓸 때 마크다운(Markdown) 을 지원 한다는 것이었다. 마크다운은 주피터 노트북에 내용을 정리 할 때 즐겨쓰던것인데 생각보다 편리해서 홈페이지에서 글을 쓸 때 쓰고싶었던 툴이었다.

설치

Hexo를 사용하기 위해서는 당연히 설치를 해야한다. 먼저 다음 두가지가 필요하다.

위의 두가지 툴을 설치햇다면, 커멘드라인에서 npm을 이용해서 간단하게 설치 할 수 있습니다.

1
npm install -g hexo-cli

시작

먼저 기본 블로그를 만들어야한다.

1
2
3
$ hexo init 블로그이름
$ cd 블로그이름
$ npm install

그러면, 기본테마가 적용된 블로그가 생성된다. 폴더는 다음과같이 구성되어있다.

1
2
3
4
5
6
7
8
. # 블로그 루트 폴더
├─ _config.yml # 설정 파일
├─ package.json
├─ scaffolds # 스캐폴드(양식)
├─ source # 소스 폴더
| ├─ _drafts # 초안
| └─ _posts # 포스트
└─ themes # 테마 폴더

블로그는 로컬서버에서 직접 확인 할 수 있다.

1
$ hexo server

이제 블로그를 http://localhost:4000/ 에서 확인 할 수 있다.

블로그 배포하기

로컬서버에서 블로그를 볼 수 있지만, 온라인에서 이용하기 위해서는 배포를 해야한다. 배포할 블로그를 만드는것을 빌드(Build)라고 한다.

블로그 폴더에서 아래 명령어를 실행하면 빌드가 되고 public폴더가 만들어진다.

1
hexo generate

이제 public폴더가 있으면, 원하는 서비스를 이용하여 배포할 수 있다. 여기에서는 Github Pages를 이용 할 것이다. github계정만 있으면 쉽게 배포 할 수있다. 배포하기위해서는 먼저 필요한 플러그인을 설치해야한다.

1
npm install hexo-deployer-git --save

그리고 깃허브 프로젝트를 만드는데, 깃허브 페이지를 이용하기 위해서 프로젝트 이름은 반드시 계정이름.github.io 로 만들어야한다. 포를 하기 위해서는 _config.yml파일을 수정해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Site
title: Seyeon's Home
subtitle: Life with Mathematics
description: Seyeon's homepage
#keywords:
author: Seyeon Lee
language: en # 다중언어지원, 테마에따라 다름
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://계정이름.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/계정이름/계정이름.github.io

이제 github 도메인으로 접속하기위해 배포를한다.

1
hexo deploy

다음과같이 줄여서 빌드와 배포를 한번에 할 수도 있다.

1
hexo g -d

이제 계정이름.github.io 에 접속하여 확인한다. 글쓰기 테마 설정등은 다음에 올리는것으로..

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×