Tistory에서 GitHub 블로그로
블로그 이전
앞으로는 이곳에 글을 작성하려 한다.
내가 생각하는 블로그 플랫폼의 가장 큰 장점은 검색 엔진 노출과 자체 생태계를 통한 방문자 유입이다.
티스토리에서 2023년부터 약 160개의 글을 작성해 왔는데, 내 글의 성격이 플랫폼 효과를 보는 편은 아닌 듯하다.
그래서 유입보단 데이터를 활용에 쉬운 형태를 선택하기로 했다.
레포지토리 기반으로 글을 관리하면 모든 콘텐츠가 마크다운 파일로 남는다. 백업하기도 쉽고, 다양한 방식으로 활용하거나 가공하기에도 유리하다.
예를 들어 AI에 티스토리 링크를 주고 “나를 정의해 봐”라고 하는 것보다, 내가 작성한 마크다운 파일들을 그대로 전달하고 “나를 정의해 봐”라고 하는 편이 활용하기도 쉽고 결과도 더 안정적이다.
추가로 LaTeX 수식 작성이 편하고, 마크다운 초안을 거의 수정 없이 사용할 수 있다는 점도 있다.
Github 블로그
GitHub Pages는 GitHub에서 제공하는 정적 사이트 호스팅 서비스이다.
최종 빌드 결과가 정적 파일이라면 어떤 기술 스택이든 사용할 수 있다. 따라서 Jekyll, React, Next.js 등 정적 사이트를 생성할 수 있는 프레임워크라면 모두 GitHub Pages에 배포할 수 있다.
일반적으로는 GitHub Actions을 이용해 빌드와 배포를 자동화한다. 코드를 GitHub에 푸시하면 Actions가 프로젝트를 빌드해 정적 파일을 생성하고, 이를 GitHub Pages에 자동으로 배포하는 방식이다.
Jekyll
Jekyll은 Markdown 파일을 HTML로 변환하여 정적 사이트를 생성하는 정적 사이트 생성기이다. GitHub Pages에서 공식적으로 지원하는 생성기이기도 하며, 별도의 서버 없이 정적 파일만으로 블로그를 운영할 수 있다.
소설『지킬 박사와 하이드 씨』의 주인공인 Dr. Jekyll에서 유래했다. Markdown 원본이 빌드 과정을 거쳐 HTML이라는 다른 형태로 변환되는 모습이, 지킬이 하이드로 변신하는 설정을 떠올리게 한다는 의미를 담고 있다.
Jekyll은 kramdown을 Markdown 변환 엔진으로 사용한다. 따라서 표준 Markdown뿐만 아니라 IAL과 같은 kramdown의 확장 문법도 사용할 수 있다.
Chirpy
Chirpy는 Jekyll 기반의 대표적인 블로그 테마 중 하나이다.
기술 블로그에 필요한 기능들이 대부분 기본 제공되며, 다크 모드, 카테고리·태그, 목차, 코드 블록, 수식(LaTeX), Mermaid 다이어그램, 검색, SEO, PWA 등을 별도의 구현 없이 사용할 수 있다.
kramdown 확장 문법
IAL (Inline Attribute List)
IAL은 마크다운으로 만든 요소에 클래스/id/속성을 덧붙이는 기능이다.
원래 마크다운으로 문단을 쓰면 이렇게 변환된다.
1
2
3
안녕하세요
↓
<p>안녕하세요</p>
여기에 속성을 추가하고 싶을 때 {: ... }를 쓴다.
1
2
3
4
5
6
7
8
9
10
11
안녕하세요
{: .abc } → <p class="abc">안녕하세요</p>
안녕하세요
{: #abc } → <p id="abc">안녕하세요</p>
{: width="200" } → <img src="/img.png" width="200">
{: loading="lazy" } → <img src="/img.png" loading="lazy">
정의 목록
용어와 정의를 : 로 연결한다.
1
2
kramdown
: 마크다운을 HTML로 변환하는 Jekyll 기본 엔진.
- kramdown
- 마크다운을 HTML로 변환하는 Jekyll 기본 엔진.
약어
문서 아무 곳에 정의해 두면 본문의 해당 단어에 툴팁이 붙는다.
1
2
## 정의
*[HTML]: HyperText Markup Language
HTML은 마크업 언어다.
각주
문서 아무 곳에 정의해 두면 본문에서 참조할 수 있다.
1
2
3
4
5
## 정의
[^kramdown]: Jekyll의 기본 마크다운 처리 엔진. 이 각주는 페이지 맨 아래에 표시된다.
## 본문에선 식별자로 참조
kramdown은 markdown 확장 엔진이다. [^kramdown]각주 번호를 누르면 하단으로 이동한다.
kramdown은 markdown 확장 엔진이다. 1각주 번호를 누르면 하단으로 이동한다.
Chirpy 전용 클래스
콜아웃
인용구 바로 다음 줄에 {: .prompt-* }를 붙인다.
팁 박스
정보 박스
경고 박스
위험 박스
이미지 캡션
이미지 바로 아래 이탤릭 한 줄은 캡션이 된다.
이미지 아래 캡션입니다.
코드 블록에 파일명 표시
코드 블록 다음 줄에 {: file="..." }를 붙이면 상단에 파일 경로가 표시된다.
1
print("hello")
Jekyll의 기본 마크다운 처리 엔진. 이 각주는 페이지 맨 아래에 표시된다. ↩︎