Gatsby로 기술 블로그 만들기

#소개

이 블로그는 Gatsby v5 와 MDX 를 기반으로 제작되었습니다. 오픈소스 공식문서에서 볼 수 있는 UI 요소들을 참고하여 깔끔하고 읽기 좋은 블로그를 목표로 합니다.

#기술 스택

블로그를 구축하는 데 사용한 주요 기술 스택은 다음과 같습니다:

• Gatsby v5 — React 기반 정적 사이트 생성기
• MDX v2 — Markdown 안에서 React 컴포넌트 사용 가능
• styled-components — CSS-in-JS 스타일링
• prism-react-renderer — 코드 구문 강조
• flexsearch — 클라이언트 사이드 전문 검색

#코드 블록

코드 블록에는 구문 강조, 라인 번호, 파일명 표시, 라인 하이라이팅, 복사 버튼이 지원됩니다.

const config = {
  siteMetadata: {
    title: "raw",
    description: "기술 블로그",
    siteUrl: "https://ho8ae.github.io/blog",
  },
  plugins: [
    "gatsby-plugin-mdx",
    "gatsby-plugin-styled-components",
  ],
};

export default config;

인라인 코드도 지원됩니다: gatsby develop 명령어로 개발 서버를 실행할 수 있습니다.

#Callout 컴포넌트

다양한 타입의 Callout을 사용할 수 있습니다:

#마크다운 기능

#리스트

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

#테이블

#인용문

좋은 코드는 그 자체로 최고의 문서다. 주석을 달기 전에, 먼저 코드를 개선하라. — Steve McConnell

#다음 단계

블로그에 추가로 구현할 수 있는 기능들:

• 다크 모드 토글
• RSS 피드
• 댓글 시스템 (utterances)
• 시리즈 기능
• 조회수 카운터

이상으로 첫 번째 포스트를 마칩니다.