gatsby-starter-hoodie가 2023-06-30 부터 Gatsby 5로 마이그레이션 되었습니다. 이제 node.js 20 버전에서도 gatsby-starter-hoodie를 사용하실 수 있습니다.
gatsby-starter-hoodie 는 기술 블로그를 작성하기 위해 개발된 Gatsby 테마입니다. 마크다운과 많은 프로그래밍 언어의 코드 하이라이팅, 그리고 Katex 문법을 지원합니다. 또한 태그와 시리즈를 통하여 쉽게 게시물을 분류할 수 있습니다.
다크모드를 지원하는 깔끔한 디자인의 gatsby-starter-hoodie 로 여러분의 블로그를 시작하세요.
이 프로젝트는 벨로그에서 영감을 얻었습니다.
- 마크다운
- 코드 하이라이팅
- Katex 문법
- 다크모드 (OS 환경설정과 연동)
- 태그 분류
- 시리즈 분류
- 반응형 웹
- SEO
- Giscus
아래 단계를 따라서 여러분의 블로그를 시작하세요. 굉장히 쉬워요 😉.
컴퓨터에 node.js 와 gatsby-cli 가 설치되어 있어야합니다.
$ npx gatsby new my-hoodie-blog https://github.com/devHudi/gatsby-starter-hoodie
$ cd my-hoodie-blog
$ npm run start
이제 localhost:8000 으로 여러분의 블로그를 접속할 수 있습니다.
Giscus 댓글 위젯은 Github Discuss 시스템 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다.
만약 Github 레포지토리를 생성하는 법을 모른다면, Github 공식 문서 를 참조하세요.
git remote add origin https://github.com/{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}
module.exports = {
title: "MY BLOG",
description: "Hello, This is my blog",
author: "YOUR NAME",
siteUrl: "https://myblog.com",
links: {
github: "https://github.com",
facebook: "https://www.facebook.com",
instagram: "https://www.instagram.com",
etc: "https://www.google.com/",
},
giscus: {
repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}",
repoId: "{YOUR_GITHUB_REPOSITORY_ID}",
category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}",
categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}",
mapping: "pathname",
strict: "0",
reactionsEnabled: "1",
inputPosition: "bottom",
lang: "en",
},
}
gatsby-starter-hoodie 는 blog-config.js
라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Giscus 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 blog-config.js
를 설정하세요.
마크다운 포스트는 contents/posts
경로에 위치해있습니다. 해당 경로에서 글을 작성할 수 있습니다. 여기를 클릭하여 더 자세한 글 작성 방법을 확인하세요.
A Step-by-Step Guide: Gatsby on Netlify 문서를 참조하여, Netlify 를 Github 레포지토리와 연결할 수 있습니다. 이 과정은 어렵지 않습니다.
Github 레포지토리와 연결이 되었다면, Github 레포지토리에 변경사항이 발생할 때 마다 자동으로 여러분의 블로그에 배포됩니다.
레포지토리 이름이 {YOUR_GITHUB_NAME}.github.io
형태일 경우, 아래 명령어를 실행해주세요.
$ npm run deploy-gh
레포지토리 이름이 {YOUR_GITHUB_NAME}.github.io
형태가 아닐 경우, 아래 명령어를 실행해주세요.
$ npm run deploy-gh-prefix-paths
만약 위와 같은 경우 gatsby-config.js
에서 pathPrefix
를 여러분의 레포지토리 이름으로 바꿔야합니다.
$ npm run build
위 명령어로 Gastby 웹사이트를 빌드할 수 있습니다. 빌드 결과물은 /public
에 저장됩니다. /public
디렉토리를 여러분이 사용하는 플랫폼의 배포 명령을 통해 배포해주세요.
아래 프로젝트 구조를 참고하여 커스터마이징 할 수 있습니다 🙊.
├── node_modules
├── contents
│ └── posts // your articles are here
├── public // build outputs are here
└── src
├── assets
│ └── theme // theme config is here
├── components
│ └── Article
│ └── Body
│ └── StyledMarkdown
│ └── index.jsx // markdown styles are here
│ ...
├── fonts // webfonts are here
├── hooks
├── images
├── pages // page components are here
├── reducers
├── templates // post components are here
└── utils