이 Gatsby Starter에는...
- 💄 gatsby-remark-highlight-code를 통한 커스텀한 코드 하이라이팅 기능
- 💬 utterances 댓글 기능 지원
- ☕ 'Buy me a coffee' 라는 후원 기능
- 🤖 Google Analytics 지원
- ⚙ 별도 설정 파일을 통한 블로그 세부 사항 설정 지원
- TypeScript를 사용
- 디자인은 Velog와 한재엽님의 gatsby-starter-bee에서 영감을 받아 제작하였습니다.
이 템플릿을 사용하여 블로그를 만들었다면 위 '사용한 블로그' 리스트에 추가해주세요! PR을 통해 등록해주시면 됩니다!
# 이 블로그 스타터를 사용하여 gatsby 프로젝트를 시작할 수 있습니다.
npx gatsby new my-blog-starter https://github.com/2-one-week/gatsby-starter-oneweek.git
만약
npx
를 사용하고 있지 않는다면, Gatsby Getting Started 글을 참고하거나 아래 커맨드를 실행해주세요.
npm install -g gatsby-cli
gatsby new my-blog-starter https://github.com/2-one-week/gatsby-starter-oneweek.git
cd my-blog-starter/
npm start
# 브라우저에서 localhost:8000로 접근 가능
다음 두 곳에서 포스팅을 추가할 수 있습니다.
- 블로그 포스팅은
content/blog
디렉토리에 추가해주세요.- 폴더를 구분하면, 해당 폴더로 routing 됩니다.
- 웹에 올려둘 이력서는
content/__about
디렉토리에 추가해주세요.
몇 가지의 메타데이터와 마크다운 문법으로 포스팅을 작성할 수 있습니다.
/gatsby-user-config.js
파일에서 사용자에 따른 블로그를 설정하는 여러 요소를 수정할 수 있습니다.
5. Netlify로 배포
💡 github pages를 통해 배포하고 싶다면 아래 npm script를 package.json
에 추가해주세요.
"scripts": {
"deploy": "gatsby build && gh-pages -d public -b master -r 'git@github.com:${your github id}/${github page name}.github.io.git'"
}
gh-pages
모듈이 필요할 경우 설치가 필요합니다.
/root
├── gatsby-config.js // Gatsby config
├── gatsby-user-config.js // Template config by user
└── gatsby-node.js // Gatsby Node config
src
├── components // 여러곳에서 사용하는 공통 컴포넌트들
├── pages // 기본 페이지 routing post: /(home), /about, /category
├── styles
│ ├── global-style.ts // styled compoenents에서 사용할 global style
│ └── theme.ts // styled compoenents theme
└── containers
├── post.tsx
│ ├── components // post 페이지만을 위한 component들
│ └── index.tsx //
└── layout.tsx // home, post, resume layout
gatsby-user-config
수정을 통해 main color를 바꿀 수 있습니다.
{
...
mainColor: `color what you want`
...
}
- 프로필 사진! (replace file in
/contents/assets/profile.png
) - 파비콘 이미지! (replace file in
/contents/assets/favicon.png
) - 블로그 사이트 Default Meta 이미지! (replace file in
/contents/assets/default.png
) - Utterances를 위한 repository를 설정해주세요! (
/gatsby-user-config.js
의 repository 주소를 교체해주세요.)⚠️ 이 가이드를 꼭 확인해주세요.
Project by
@2-one-week