Gatsby로 기술 블로그 만들기

2024.01.15·3분

#Gatsby #React #MDX #Blog

소개

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

📝Note

이 글은 블로그의 첫 번째 포스트입니다. 블로그의 기능들을 시연하기 위한 샘플 글입니다.

기술 스택

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

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

코드 블록

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

javascript

1const config = {
2  siteMetadata: {
3    title: "raw",
4    description: "기술 블로그",
5    siteUrl: "https://ho8ae.github.io/blog",
6  },
7  plugins: [
8    "gatsby-plugin-mdx",
9    "gatsby-plugin-styled-components",
10  ],
11};
12
13export default config;