2025년 기준 깃 블로그 완벽 정리

최근에 깃 블로그 새로 할 일 있어서,
이왕 하는거 더 정확히 새로 정리해 보았다.
최근에 친해진 분이, 소프트웨어 놈들 지들만 아는 단어 쓰면거 꺼드럭거린다는데,
제발 그러지좀 말자.

1단계: 개발 환경 구축 (Prerequisites)

다음 3가지를 다운받자

1. git bash
   그냥 쭉 누르고 설치하면 된다.
   블로그 페이지를 로컬에서 열어 개발하기 위함이다.

2. RubyInstaller
   윈도우 기준, Ruby+Devkit 3.4.7-1 (x64) 을 다운받으면 된다.
   깃 블로그는 jekyll 기만인데, 이게 있어야 로컬에서 열어볼 수 있다.

3. github desktop 그냥 다운받으면 된다.
   push, pull, comit 하기 위해서 꼭 있으면 좋다.

2단계: 깃허브 + 허깅페이스 회원가입 + 래포지토리 생성

깃허브 링크
허깅페이스 링크

둘 다 회원가입 해야 한다.
허깅페이스는 AI 모델 올릴 떄 쓰는 것 이므로, 선택사항이다.
하지만, 깃허브 블로그에 이거처럼 AI 사용 페이지 만들고 싶으면 허깅페이스도 가입해야 한다.

일단, 깃허브에 로그인을 했으면,

1. 오른쪽 위 프로필 클릭, Repositories 선택
2. 초록색 new 선택
3. 깃허브 레포지토리 제목에, [자신의 깃허브 닉네임.github.io]라 하고, public으로 설정한 후 생성하면 된다.
4. 앞서 설치한 github desktop을 열어서, 방금 만든 레포지토리를 clon한다. 바탕화면에 클론하면 찾기 쉬워서 좋다.

3단계: 테마 선정 및 프로젝트 초기화

이제, 내 깃허브 테마를 골라서 프로젝트를 만들 차례이다.
코딩에 자신 있으면 그냥 jekyll 프로젝트 직접 만들면 된다.
새로운 jekyll 프로젝트 생성해서 처음부터 블로그 만들고 싶으면,

1. 우클릭, git bash
2. jekyll new –skip-bundle
3. jekyll new docs –skip-bundle 을 통해서 텅 빈 jekyll 블로그를 만들 수 있다.

자신없으면, 남이 만들어 논거 가져와서 사용할 수 있는데,

1. Jekyll Themes 등의 사이트에서 테마를 고른 뒤 Download ZIP으로 파일을 받는다. 고를 때, Gemfile 이 있는 걸로 다운받는게 좋다 이거 설정하기 귀찮다.
2. 내 컴퓨터의 원하는 위치(예: C:\git-blog)에 폴더를 만들고, 다운로드한 ZIP 파일의 압축을 푼 내용물을 모두 넣는다.
3. 해당 폴더에 가허 우클릭, git bash를 누른다. 윈도우 11이면, 추가옵션표시를 눌러야 나온다.

   bundle install
   

4. 이어서, 다음 명령어를 입력하면 로컬에서(내 컴퓨터에서만 들어갈 수 있다.) 내 깃 블로그 서벌르 열 수 있다.

   bundle exec jekyll server
   

5. 위 명령어 치고, 크롬 열어서 다음 링크로 가 보자 http://127.0.0.1:4000/ 잘 열리면, 성공한거다.

6. 내 정보를 넣고 싶으면, 블로그의 파일에 _config.yml 파일을 열어서 이메일이나 타이틀 명 등등 설정하면 된다.

4단계: + 필수 설정 파일(Gemfile) 생성 및 수정

테마에 Gemfile이 없거나 설정이 부족할 경우를 대비해, 윈도우 환경에 최적화된 설정을 진행한다. 가장 에러가 많이 발생하는 구간이므로 정확히 따라 해야 한다.

1. 블로그 폴더 최상위 경로에 확장자가 없는 파일 Gemfile을 생성한다. (이미 있다면 내용을 수정한다.)

2. 텍스트 에디터로 Gemfile을 열고 기존 내용을 지운 뒤 아래 코드를 복사하여 붙여넣는다.

   source "https://rubygems.org"
   
   # 깃허브 페이지의 버전과 로컬 환경을 일치시킨다.
   gem "github-pages", group: :jekyll_plugins
   
   # 윈도우 Ruby 3.0 이상에서 서버 구동 에러를 방지한다.
   gem "webrick"
   
   # 윈도우 타임존 호환성을 해결한다.
   gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
   

5단계: github에 올려서, 공개 도메인에 내 블로그 올리기

앞선 단계에서 로컬 테스트 까지 했으니, 이제 push로 깃 블로그에 변경사항을 올려서 업데이트 하면 된다.

github desktop을 켜서 push해 준다.
그리고 한 5분 기다리면, 앞서서 내가 설정한 도메인인 https://자신의 깃허브 닉네임.github.io 에 들어가면 방금 올린 내용이 잘 들어가 있는 것을 알 수 있다.

6단계: md 파일 작성

이제, 깃허브 블로그 내부에 글을 써야 한다.
만드는 글을 _post 파일의 내부에 .md파일로 작성해서 올리면 된다.

먼저, md 파일은 엔터가 스페이스바 두 번 이다.
두번 안하면 엔터 쳐도 줄 바꿈 안된다.

이어서, md 파일 작성 요령이다.

1. 제목

입력 (Input):

# 가장 큰 제목 (h1)
## 두 번째로 큰 제목 (h2)
### 세 번째로 큰 제목 (h3)
#### 네 번째로 큰 제목 (h4)

출력 (Output):

가장 큰 제목 (h1)

두 번째로 큰 제목 (h2)

세 번째로 큰 제목 (h3)

네 번째로 큰 제목 (h4)

2. 강조

입력 (Input):

이것은 **굵은 글씨(Bold)** 입니다.  
이것은 *기울임 꼴(Italic)* 입니다.  
이것은 \~\~취소선(Strikethrough)\~\~ 입니다.  
이것은 ***굵고 기울인 글씨*** 입니다.  

출력 (Output):
이것은 굵은 글씨(Bold) 입니다.
이것은 기울임 꼴(Italic) 입니다.
이것은 취소선(Strikethrough) 입니다.
이것은 굵고 기울인 글씨 입니다.

3. 목록

3-1. 순서가 없는 목록 (Unordered List)

-, *, + 중 아무거나 사용해도 된다.

입력 (Input):

- 사과
- 배
  - 하위 항목 (스페이스바 2번 들여쓰기)
    - 더 하위 항목

출력 (Output):

• 사과
• 배
  • 하위 항목 (스페이스바 2번 들여쓰기)
    • 더 하위 항목

3-2. 순서가 있는 목록 (Ordered List)

숫자와 점(1.)을 사용한다.
숫자를 무조건 1.로만 써도 알아서 증가한다.

입력 (Input):

1. 첫 번째
1. 두 번째 (자동으로 2가 된다)
1. 세 번째

출력 (Output):

1. 첫 번째
2. 두 번째 (자동으로 2가 된다)
3. 세 번째

4. 인용구

다른 글을 인용하거나 강조된 박스를 만들 때 사용한다.
> 기호를 중첩하여 단계를 표현할 수 있다.

입력 (Input):

> 이것은 인용구입니다.
> > 이것은 중첩된 인용구입니다.
>
> 빈 줄을 넣으면 분리됩니다.

출력 (Output):

이것은 인용구입니다.

이것은 중첩된 인용구입니다.

빈 줄을 넣으면 분리됩니다.

5. 코드작성

개발 블로그에서 가장 중요한 기능이다.
인라인 코드와 코드 블록으로 나뉜다.

5-1. 인라인 코드 (Inline Code)

문장 중간에 짧은 코드를 넣을 때 백틱(`) 하나로 감싼다.

입력 (Input):

파이썬에서 `print("Hello")` 함수를 사용한다.

출력 (Output):
파이썬에서 print("Hello") 함수를 사용한다.

5-2. 코드 블록 (Code Block)

백틱 3개( `` `)로 감싸며, 시작 부분에 언어 이름(python, javascript 등)을 명시하면 문법 강조(Syntax Highlighting)가 적용된다.

입력 (Input):

```python
def hello():
    print("Hello World")
    return True
```

출력 (Output):

def hello():
    print("Hello World")
    return True

6. 링크와 이미지

링크와 이미지는 문법이 비슷하나, 이미지 앞에는 느낌표(!)가 붙는다는 점이 다르다.

6-1. 링크 (Link)

[표시할 텍스트](URL 주소) 형식을 사용한다.

입력 (Input):

[구글로 이동하기](https://google.com)  

출력 (Output):
구글로 이동하기

6-2. 이미지 (Image)

![대체 텍스트](이미지 경로 또는 URL) 형식을 사용한다.

입력 (Input):

![지킬 로고](https://jekyllrb.com/img/logo-2x.png)

출력 (Output):

7. 수평선

문단을 나눌 때 사용한다.
---, ***, ___ 등을 사용한다.

입력 (Input):

위 문단
---
아래 문단

출력 (Output):
위 문단

아래 문단

8. 표

| (파이프)와 - (대시)를 사용하여 표를 그린다.
콜론(:)의 위치로 정렬을 지정할 수 있다.

입력 (Input):

| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
| :--- | :---: | ---: |
| 내용 1 | 내용 2 | 내용 3 |
| Left | Center | Right |

출력 (Output):

9. 체크박스

할 일 목록을 만들 때 사용한다. 대괄호 안에 공백은 미완료, x는 완료이다.

입력 (Input):

- [ ] 아직 안 한 일
- [x] 이미 완료한 일

출력 (Output):

• 아직 안 한 일
• 이미 완료한 일

10. 수식

공학이나 수학 관련 블로그를 운영할 때 필수적이다. 보통 $(달러 기호)를 사용한다.
(참고: Jekyll 테마에 따라 MathJax 플러그인 설정이 필요할 수 있다.)

10-1. 인라인 수식 (Inline Math)

문장 중간에 수식을 넣을 때 $ 하나로 감싼다.

입력 (Input):

피타고라스의 정리는 $a^2 + b^2 = c^2$ 이다.

출력 (Output):
피타고라스의 정리는 $a^2 + b^2 = c^2$ 이다.

10-2. 블록 수식 (Display Math)

수식을 별도의 줄에 크게 표시할 때 $$ 두 개로 감싼다.

입력 (Input):

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

출력 (Output):

\(\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\)(주요 LaTeX 기호 팁)

• 분수: \frac{분자}{분모}
• 아랫첨자/윗첨자: _ / ^ (예: x_i^2)
• 시그마: \sum
• 적분: \int

결론

캬 정리 좋았죠.
이젠 SL 인증서 안박아도 알아서 https 로 되더라.
너무 편해서 좋아진 것 같다.
암튼 다들 행복한 하루 되길 바란다.