지금 당장만 해도 이 글을 마크다운으로 작성하고 있는 나는 HTML를 접해보긴 했지만 자유자재로 쓸 수 있는정도는 아니였기에 깃허브 블로그를 시작하면서 마크다운의 문법에 대해 알아야 할 필요가 생겼다.

다른 포스트들도 마찬가지지만 더욱 이 포스트는 자주 찾아 봐야 할 것 같기에 문법만을 기록하며, 접기를 최대한 지양한다.

각 챕터의 위쪽은 코드 그 아래는 출력이다.

마크다운 문법

제목 작성

1
2
3
4

# 이러면 큰제목 <h1>태그
## 이러면 중간제목 <h2>태그
### 이러면 작은제목 <h3>태그
#### 이것도 되긴 하지만 굵게한 글자와 차이가 없음. <h4>태그로 사용된다

이러면 큰제목 <h1>태그

이러면 중간제목 <h2>태그

이러면 작은제목 <h3>태그

이것도 되긴 하지만 굵게한 글자와 차이가 없는 <h4>태그로 사용된다

줄바꿈

1
2

줄바꿈은 행의 끝에서 공백 두칸을 주고  
다음행에 작성하면 된다.

줄바꿈은 행의 끝에서 공백 두칸을 주고
다음행에 작성하면 된다.

코드블럭

1
2
3

```과 ~~~는 마크다운의 내용을 코드블럭을 씌운다.
```(언어명) 내용 ``` 의 형태로 작성하며
이것도 코드블럭으로 씌워진 것이다.

인라인코드

1

이것은 `인라인코드`이다.

이것은 인라인코드이다.

링크 걸기

www.naver.com
그냥 주소를 써도 링크로 클릭이 되지만 ,

1

[WJ 블로그](cincu4221.github.io)

WJ 블로그
위처럼 작성하면 주소를 숨기고 텍스트에 링크를 걸 수 있다.

텍스트

1

**강조된 텍스트**

강조된 텍스트

1
2

*기울인텍스트*
***기울임,강조를적용한텍스트***

기울인텍스트
기울임,강조를적용한텍스트

1

~~취소선입니다~~

취소선입니다

글자색

1
2
3
4
5
6
7
8

<span style="color:orange">주황색 글씨</span>  
<span style="color:yellow">노란색 글씨</span>  
<span style="color:#FF0000">빨간색 글씨</span>  
<span style="color:blue">파란색 글씨</span>  
<span style="color:green">초록색 글씨</span>  
<span style="color:pink">분홍색 글씨</span> 

<span style="color:#00FFFF">헥스코드 적용 글씨</span>

주황색 글씨
노란색 글씨
빨간색 글씨
파란색 글씨
초록색 글씨
분홍색 글씨

헥스코드 적용 글씨

검색하기 애매한 색도 여기 에서 찾을 수 있다.

구분선

1
2
3

***
-- --
---

표만들기

1
2
3
4

|제목|제목|
|:---:|:---:|
|내용|내용|
|||

리스트

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

1. 순서 있는 리스트
2. 순서 있는 리스트
345. 순서 있는 리스트 (순서가 틀려도 상관 없다)

* 순서 없는 리스트
* 순서 없는 리스트

+ 순서 없는 리스트
+ 순서 없는 리스트

- 순서 없는 리스트
- 순서 없는 리스트

1. 순서 있는 리스트
2. 순서 있는 리스트
3. 순서 있는 리스트 (순서가 틀려도 상관 없다)

• 순서 없는 리스트
• 순서 없는 리스트

• 순서 없는 리스트
• 순서 없는 리스트

• 순서 없는 리스트
• 순서 없는 리스트

앞으로 계속 추가할것

Hexo란?

Hexo는 Node.js기반의 정적 블로그 프레임워크 입니다.   

Markdown으로 문서를 작성하고 빌드시 정적 HTML이 생기고
이것을 GitHub pages에 배포 하여 블로그를 관리 합니다.

설치환경

• Git
• Node.js
• 파이참(PyCharm)
• GitHub 계정

설치환경 확인

1. 아래 코드로 Node.js 설치를 확인해봅니다.

   1

   $ node -v

2. 아래 코드로 Git 설치를 확인합니다.

   1	$ git --version

3. npm을 통해 hexo를 전역으로 설치합니다.

   1	$ npm install -g hexo-cli

   GitHub 블로그 만들기

   먼저 원하는 디렉토리로 이동하여 헥소 블로그 디렉토리를 만들어줍니다.(이 포스팅에서는 myblog)

   1	$ hexo init myblog

   생성된 디렉토리를 우클릭 한 뒤
   ‘Open Folder as PyCharm Community Edition Project‘를 클릭해 파이참으로 열어줍니다.
   

실행된 파이참의 좌측 아래에서 터미널 메뉴를 선택하고 사진과같이 Git Bash를 클릭해주면
파이참에서 Git을 사용할 수 있게 됩니다.

이후 Git에서 다음 명령어들을 입력해줍니다

1
2
3

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

이제 GitHub 접속하고 우측 상단의 아이콘 클릭 후 ‘Your repositories‘에 들어갑니다.

Repository name 란에 만들었던 디렉토리와 같은 이름인 ‘myblog’를 넣은 후 아무것도 건드리지 않고 아래의 ‘Create repository’ 버튼을 눌러줍니다.

다시 파이참으로 돌아와서 아래의 Git 명령어들을 입력해줍니다.

1
2
3
4
5
6
7

echo "# myblog" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/cincu4221/myblog.git
git push -u origin main

GitHub에서 ‘myblog‘ 리포지토리를 만들때와 이름만 다르게 ‘사용자계정명.github.it‘ 으로 바꾸어서 리포지토리를 하나 더 생성해 줍니다.

파이참의 작업영역에서 _config.yml 파일을 열어서 수정해줍니다.

블로그 정보 설정

1
2
3
4

title: blog title
subtitle: 부제목을 지어주세요
description: description을 지어주세요
author: YourName

블로그의 URL정보 설정

1
2
3
4

url: https://Username.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

깃허브 연동 설정

1
2
3
4
5

# Deployment
deploy:
  type: git
  repo: https://github.com/Username/Username.github.io.git
  branch: main

• 위의 코드에서 Username으로 되어있는것은 꼭 사용자의 GitHub계정명으로 바꿔주셔야 합니다.

파이참의 Git Bash(Terminal)에 다음 코드들을 입력합니다.

1
2

$ hexo generate
$ hexo server

이후 나오는 localhost:4000에서 화면이 뜨는지 확인합니다.

다음 코드를 입력해 최종적으로 배포를 진행합니다.

1

$ hexo deploy

배포가 완료되면 브라우저에서 [USERNAME.github.io]로 접속해 정상적으로 배포되었는지 확인합니다.

* 참고 : https://dschloe.github.io/settings/hexo_blog/