[Hexo와 깃허브로 블로그 만들기] 블로그에 layout 만들어 빠른 포스팅 하기

1. /scaffolds 파일 아래 blog.md 파일을 만든다.

원하는 형식으로 Front-Matter부분을 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12

---
title: {{ title }}

categories:
[tec, blog]
tags:
[blog, tec, hexo, github]

toc: true
date: {{ date }}
---

2. 커멘드 창에서 (프로젝트 위치아래에서) 아래와 같이 명령어를 입력한다.

1
$ hexo new blog -p tec/blog/blog13 "레이아웃 만들기"
  • blog: 아까 scaffolders에서 만든 레이아웃 파일명
  • -p: 경로명
  • “레이아웃만들기”: title안에 들어갈 내용
    명령어 옵션 참고

3. /source/_posts/tec/blog/blog13.md 파일이 생성된 것을 확인 할 수있다.

1
2
3
4
5
6
7
8
9
10

---
title: "레이아웃 만들기"
categories:
[tec, blog]
tags:
[blog, tec, hexo, github, google-analytics]
toc: true
date: 2019/10/18 13:09:23
---

4. 해당 파일에 원하는 글을 써서 배포한다.

[Markdown] Markdown 문법 정리

1. Header

글머리 1 ~ 6

1
2
3
4
5
6
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5
This is a H6

2. 굵게 기울임꼴 텍스트

2.1 굵게 지정하려면 두개의 별표로 묶습니다.

1
This text is **bold**.

This text is bold.

2.2 기울임꼴로 지정하려면 한개의 별표로 묶습니다.

1
This text is *italic*.

This text is italic.

2.3 굵게 기울임꼴로 지정하려면 세개의 별표로 묶습니다.

1
This text is ***bold and italic***.

This text is bold and italic.

3. BlockQuote

1
> This is a BlockQuote

This is a BlockQuote

This is a BlockQuote

This is a BlockQuote

이 안에서도 마크다운 요소를 사용할 수 있습니다.

> - List
> 
1
2
> BlockQuote
>
  • List
    1
    2
    > BlcokQuote
    >

4. List

4.1 순서 있는 목록

어떤 번호를 넣더라도 내림차순으로 숫자가 지정됩니다.

1
2
3
1. 첫번쨰
3. 두번째
2. 세번째

  1. 첫번째
  2. 두번째
  3. 세번째



다른 목록 안에 목록을 중첩하려면 항목을 들여씁니다.

1
2
3
4
1. 첫번쨰
1. 두번째
1. 세번째
1. 네번째
  1. 첫번째
    1. 두번째
    2. 세번째
  2. 네번쨰

4.2 순서 없는 목록

1
2
3
4
5
6
7
8
9
10
11
* 빨강
* 녹색
* 파랑

+ 빨강
+ 녹색
+ 파랑

- 빨강
- 녹색
- 파랑
  • 빨강
    • 녹색
      • 파랑
  • 빨강
    • 녹색
      • 파랑
  • 빨강
    • 녹색
      • 파랑

5. Table

파이프(|) 및 하이픈(-)을 이용하여 테이블을 만들 수 있습니다.
하이픈으로는 헤더를 만들며 파이프로는 각 열을 만듭니다.
하이픈으로 헤더 구분시 좌측에 콜론(:)을 삽입 할 경우 좌측정렬 우측에 삽입 할 경우 우측정렬이 되며 양쪽에 둘 경우 가운데 정렬이 됩니다.

1
2
3
4
5
6
| Fun                  | With                 | Tables          |
| :------------------- | -------------------: |:---------------:|
| left-aligned column | right-aligned column | centered column |
| $100 | $100 | $100 |
| $10 | $10 | $10 |
| $1 | $1 | $1 |
Fun With Tables
left-aligned column right-aligned column centered column
$100 $100 $100
$10 $10 $10
$1 $1 $1

6. 링크

6.1. 참조 링크

syntax:

[id]: Link
[title][id]

1
2
3
4
5
6
[hscodev]: hsco.dev
[github]: https://github.com/hscodev

[블로그][hscodev]

[깃허브][github]

블로그

깃허브

6.2. 인라인 링크

syntax:

[Label](Link)

1
[블로그](https://hsco.dev)

블로그

6.3. 자동연결

syntax:

\

1
<https://hsco.dev>

https://hsco.dev

7. 코드

개발 코드를 코드블록으로 배치 할 수 있습니다.
alias 별칭을 이용하여 구문 강조가 가능합니다.

이름 Alias
java java
json json
javascript javascript
html html
markdown md
SQL sql
1
your code goes in here

8. 이미지

1
2
![Alt text](/assets/images/duck.jpg)
![Alt text](/assets/images/duck.jpg "별그림")

Alt text
Alt text

[Hexo와 깃허브로 블로그 만들기] 블로그에 Google Analytics 설치하기

1. 구글 애널리틱스 사이트에 계정만들기

google analytics 회원가입 하러가기

2. GA홈에서 관리할 사이트 계정을 추가한다.

  1. 관리 클릭

  2. 계정만들기 클릭

  3. 정보 넣고 추적ID가져오기 클릭

  1. 추적 아이디 값 복사하기

3. /blog/themes/icarus/_config.yml 파일 수정

1
2
3
plugins:
google-analytics:
tracking_id: XXXXXX (required)

4. 사용자 분석

구글 애널리틱스 사용자 분석하러 가기

[Hexo와 깃허브로 블로그 만들기] disque로 댓글 기능 활성화 하기

1. disque 회원가입

disque 회원가입 하러가기

2. UserName변경

Account에서 Username을 변경한다.(disque에서 유일해야함.)

3. /blog/themes/icarus/_config.yml 파일 수정

1
2
3
comment:
type: disqus
shortname: xxxxxxxx

4. post.md 파일 Front-Matter부분 수정

1
2
3
4
# (optional) a unique id to identify the post in Disqus system
disqusId: xxxxxxxx
---
Post content...

[Hexo와 깃허브로 블로그 만들기] Hexo 블로그 포스트 쓰기

1. ~/blog/source/_posts/ 아래에 postname.md 파일 만들기.

파일을 만든 후 아래 내용을 입력한다.

1
2
3
4
5
6
7
8
9
10
11

---
title: "[Hexo와 깃허브로 블로그 만들기] Hexo 블로그 포스트 쓰기"
categories:
[test]
tags:
[test]

---

## Hello World!

2. jekyll 포스트 hexo로 옮기기

jekyll migratorn 참고 링크

  1. 지킬 프로젝트에서 _posts/하위 폴더 다 복사 후 hexo 프로젝트 /source/_posts/에다 붙여넣기.
  2. 포스트 제목을 2019-01-01-name.md의 형식을 name.md로 변경.
  3. 포스트 내용의 Front-matter 부분을 알맞게 수정
  4. 포스트안에 이미지나 다른 첨부 내용이 있다면 같이 옮겨줌.
    • 지킬의 /assests/images/ 폴더를 hexo의 blog/source/assets/images 로복사해줌
  5. 이미지 첨부가 맞지 않을 경우 hexo 서버가 에러가 남.

[Hexo와 깃허브로 블로그 만들기] Hexo 테마 적용

1. Hexo 테마 고르기

Hexo 이쁜 테마 고르러 가기

2. icarus 테마 적용하기

블로그 프로젝트 경로($ cd ~/blog/) 아래 blog/themes/icarus 폴더를 만들어 git 테마를 clone한다.

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

3. ~/blog/themes/icarus/_config.yml 파일에서 theme 설정을 icarus로 변경한다.

1
theme: icarus

4. hexo 서버 재시작 한다.

1
$ hexo s

localhost:4000에서 적용된 테마를 확인한다.

5. github에 배포한다.

1
2
$ hexo clean
$ hexo d -g

[Hexo와 깃허브로 블로그 만들기] jykell에서 hexo로 블로그 이전하기

hexo테마가 이쁜게 많아서 바꾸기로 함.

1. Node.js설치

nodejs 설치하러 가기

2. Git 설치

git 설치하러 가기

3. Hexo 설치

hexo 설치하러 가기

1
$ npm install -g hexo-cli

4. 블로그 시작하기

git bash쉘에서 블로그 프로젝트를 구성할 디렉터리 위치에 가서 아래와 같이 실행한다.

1
2
3
$ hexo init blog
$ cd blog
$ hexo server

hexo server가 http://localhost:4000 으로 실행됨.

5. blog/_config.yml 파일 수정하기

1
2
3
4
5
6
7

url: http://yoursite.com

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

deploy 항목을 저렇게 수정하면 hexo가 명령어로 자동 배포 및 생성을 해준다.

6. hexo deployer 설치

1
$ npm install hexo-deployer-git --save

7. hexo 생성 및 git 레포지토리에 배포

1
2
$ hexo clean
$ hexo d -g

이렇게 배포를 해줘야만 https://clro2.github.io 주소로 접속하면 블로그 화면이 보인다.

Your browser is out-of-date!

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

×