Gatsby Starter Zoomkoding
Demo Websites: English | Korean
๐ ์๊ฐ
์์๊ณ ๊น๋ํ๋ฉด์ ๊ฒ์ ์์ง ์นํ์ ์ธ ๊ฐ๋ฐ ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ผ์ ๊ฐ๋ฐ์๋ถ๋ค์ ์ํด ๋ง๋ค๊ฒ ๋ ๋ธ๋ก๊ทธ ํ ๋ง์ ๋๋ค.๐
PR, ์ด์ ๋ชจ๋ ์์ฒญ๋๊ฒ ํ์ํฉ๋๋ค! ๐
โจ ๊ธฐ๋ฅ
- ๐ ๋ฏธ๋ชจ์ง์ ๋ฌธ์ ์ ๋๋ฉ์ด์ ๋ฅผ ํตํ ์๊ธฐ ์๊ฐ
- ๐ ์ฝ๋ ํ์ด๋ผ์ดํ ๊ธฐ๋ฅ
- ๐ ๊ธ ๋ชฉ์ฐจ ์๋ ์์ฑ(ToC)
- ๐ฌ Utterances ๋๊ธ ๊ธฐ๋ฅ ์ง์
- โ๏ธ meta-config๋ฅผ ํตํ ์ธ๋ถ ์ค์ ๊ฐ๋ฅ
- ๐จโ๐ป About Page ๋ด์ฉ ๋ณ๊ฒฝ ๊ฐ๋ฅ
- ๐ Posts Page ์๋ ์์ฑ
- ๐ sitemap.xml, robots.txt ์๋ ์์ฑ
- ๐ Google Analytics ์ง์
- ๐งข Emoji ์ง์
- ๐ Mathjax ์ง์
๐ ์์ํ๊ธฐ
์๋ ๊ณผ์ ์ ์งํํ๋ฉด ํ์ฌ ๋ธ๋ก๊ทธ๋ฅผ ๋ก์ปฌ ํ๊ฒฝ์์ ์คํํ๊ณ ๋ฐฐํฌํ ์ ์์ต๋๋ค.
๐ง ์ค์นํ๊ธฐ
์๋ ๋ฒํผ์ ํ์ฉํ๋ฉด ๊ฐ์ธ ๊ณ์ ์ gatsby-starter-zoomkoding
๋ฅผ ์ฌ์ฉํ๊ณ ์๋ Repository ์์ฑ๊ณผ Netlify์ ๋ฐฐํฌ๋ฅผ ๋์์ ์งํํ ์ ์์ต๋๋ค. ์ดํ์, ์์ฑ๋ Repository๋ฅผ cloneํฉ๋๋ค.
๐โโ๏ธ ์คํํ๊ธฐ
์๋ ๋ช ๋ น์ด๋ฅผ ์คํํ์ฌ ๋ก์ปฌ ํ๊ฒฝ์ ๋ธ๋ก๊ทธ๋ฅผ ์คํํฉ๋๋ค.
# Install dependencies
$ npm install
# Start development server
$ npm start
์ ๋ช ๋ น์ด๊ฐ ๋ฌธ์ ์์ด ์คํ๋๋ค๋ฉด http://localhost:8000์์ ๋ธ๋ก๊ทธ๋ฅผ ํ์ธํ์ค ์ ์์ต๋๋ค.
โ๏ธ ๊ธฐ๋ณธ ์ ๋ณด ์ ๋ ฅํ๊ธฐ
gatsby-meta-config.js๋ผ๋ ํ์ผ์ ๋ด์ฉ์ ์์ ํ๋ฉด ๋ธ๋ก๊ทธ์ ์ฌ๋ฌ ๋ด์ฉ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค!
1. default
๋ธ๋ก๊ทธ์ title, description, author, siteUrl, ogImage, social ์ ๋ณด๋ฅผ ์ ๋ ฅํฉ๋๋ค. (title์ ๋ธ๋ก๊ทธ ์๋จ์ ๋ณด์ด๋ ๋ธ๋ก๊ทธ ์ด๋ฆ์ ๋ํ๋ ๋๋ค.)
module.exports = {
title: '', // zoomkoding.dev
description: '', // 줌코딩의 개발일기
author: '', // zoomkoding
siteUrl: '', // https://gatsby-starter-zoomkoding.netlify.com
ogImage: '', // 공유할 때 보이는 미리보기 이미지
social: {
github: '', // https://github.com/zoomKoding
linkedIn: '', // https://www.linkedin.com/in/jinhyeok-jeong-800871192
email: '', // zoomkoding@gmail.com
},
...
}
2. bio
bio๋ ํํ์ด์ง์ ๊ธ์ด์ด๋ฅผ ์๊ฐํ๋ ์น์
์์ ์ฌ์ฉ๋ฉ๋๋ค. ํ์ฌ ์์ด์ ํ๊ตญ์ด ๋๊ฐ ๋ค ์ง์์ ํฉ๋๋ค.
description์ ์์ ์ ์ค๋ช
ํ๋ ๋ฌธ๊ตฌ๋ฅผ ์ฌ๋ฌ๊ฐ ๋ฃ์ ์ ์์ต๋๋ค. bio์์ ์ฌ์ฉํ๋ ๋ฏธ๋ชจ์ง๋ฅผ ์์ ํ๊ณ ์ถ๋ค๋ฉด src/assets/author.mp4
์ ๋์์์ ์ฝ์
ํ๋ฉด ๋ฉ๋๋ค.
๐ค ์ธ์ด์ ๋ฐ๋ผ description์ ํฌ๋งท์ด ๋ฌ๋ผ์ง๋ ๋ง์์ ๋์๋ ํํ์ ๋ง๊ฒ description์ ์์ฑํด์ฃผ์ธ์.
module.exports = {
...
bio: {
language: 'ko', // ko, en 선택 가능(영어 선택시 어순이 변경됩니다.)
name: '', // 줌코딩
description: ['이로운 것을 만드는', '배움을 좋아하는', '글로 나누길 좋아하는'],
},
...
}
3. comments
comments๋ ํฌ์คํ ์ ๋๊ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ ์๋น์ค์ ์ ๋ณด๋ฅผ ๋ฐ์ต๋๋ค. ํ์ฌ๋ github ๊ณ์ ์ผ๋ก ๋๊ธ์ ์์ฑํ ์ ์๋ utterances๋ง ์ง์ํฉ๋๋ค.
๐ฆ utterances ์ฌ์ฉ๋ฐฉ๋ฒ์ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์!
module.exports = {
...
comments: {
utterances: {
repo: '' // zoomkoding/gatsby-starter-zoomkoding
},
},
...
}
๐ค about page ๋ง๋ค๊ธฐ
about ํ์ด์ง ๋ํ gatsby-meta-config.js๋ฅผ ํตํด ์์ฑ๋ฉ๋๋ค. about ํ์์ ์๋ timestamps์ projects์ ๊ฐ๊ฐ ์ ๋ณด๋ฅผ ์ ๋ ฅํ์๋ฉด about ํ์ด์ง๊ฐ ์๋ ์์ฑ๋ฉ๋๋ค.
1. timestamps
์๋์ ๊ฐ์ด ๊ฐ timestamp ์ ๋ณด๋ฅผ ๋ฐฐ์ด๋ก ์ ๊ณตํด์ฃผ์๋ฉด ์ ๋ ฅํ์ ์์์ ๋ง์ถฐ์ timestamps section์ ๋ณด์ฌ์ง๊ฒ ๋ฉ๋๋ค.
links์ ํด๋น ์ ๋ณด๊ฐ ์๋ค๋ฉด ์๋ตํด๋ ๋ฉ๋๋ค.
module.exports = {
...
about: {
timestamps: [
{
date: '', // 기간
activity: '', // 활동
links: { // 링크가 없다면 지우셔도 됩니다.
post: '', // 블로그 포스팅 링크
googlePlay: '', // 구글플레이 링크
appStore: '' // 앱스토어 링크
github: '' // 깃헙링크
},
}
...
],
...
},
...
}
2. projects
๋ง์ฐฌ๊ฐ์ง๋ก ๊ฐ project ์ ๋ณด๋ฅผ ๋ฐฐ์ด๋ก ์ ๊ณตํด์ฃผ์๋ฉด ์ ๋ ฅํ์ ์์์ ๋ง์ถฐ์ projects section์ ๋ณด์ฌ์ง๊ฒ ๋ฉ๋๋ค.
module.exports = {
...
about: {
...
projects: [
{
title: '', // 프로젝트 제목,
description: '', // 설명,
techStack: ['flutter', 'nodejs'], // 기술 스택
thumbnailUrl: '', // 썸네일 이미지 주소
links: { // 링크가 없다면 지우셔도 됩니다.
post: '', // 블로그 포스팅 링크
googlePlay: '', // 구글플레이 링크
appStore: '' // 앱스토어 링크
github: '' // 깃헙링크
},
},
...
],
...
},
...
}
๊ทธ๋ ๊ฒ ๋ด์ฉ์ ๋ฌธ์ ์์ด ์ ๋ ฅํ์ จ๋ค๋ฉด ๋๋ง์ ๋ธ๋ก๊ทธ๊ฐ ํ์ํ ๊ฒ์ ํ์ธํ์ค ์ ์์ต๋๋ค.๐
๋ณ๋์ฌํญ์ ์คํ ์ค์ธ ๋ธ๋ก๊ทธ์์ ํ์ธํ์๋ ค๋ฉด
npm start
๋ฅผ ํตํด ์ฌ์คํํด์ฃผ์ธ์!
โ๏ธ ๊ธ ์ฐ๊ธฐ
๋ณธ๊ฒฉ์ ์ผ๋ก ๋ธ๋ก๊ทธ์ ๊ธ์ ์ฐ๋ ค๋ฉด /content
์๋์ ๋๋ ํ ๋ฆฌ๋ฅผ ์์ฑํ๊ณ index.md
์ markdown์ผ๋ก ์์ฑํ์๋ฉด ๋ฉ๋๋ค.
์ด ๋, ํด๋์ ์ด๋ฆ์ ๊ฒฝ๋ก๋ฅผ ์์ฑํ๋๋ฐ ๋ฉ๋๋ค.
โน๏ธ ๋ฉํ ์ ๋ณด
index.md ํ์ผ์ ์๋จ์๋ ์๋์ ๊ฐ์ด emoji, title, date, author, tags, categories ์ ๋ณด๋ฅผ ์ ๊ณตํด์ผ ํฉ๋๋ค.
emoji๋ ๊ธ๋จธ๋ฆฌ์ ๋ณด์ฌ์ง๊ฒ ๋๋ฉฐ, categories๋ ๋์ด์ฐ๊ธฐ๋ก ๋๋์ด ์ฌ๋ฌ๊ฐ๋ฅผ ์ ๋ ฅํ ์ ์์ต๋๋ค.
---
emoji: 🧢
title: Getting Started
date: '2021-03-22 23:00:00'
author: 줌코딩
tags: tutorial
categories: tutorial
---
๐ผ ์ด๋ฏธ์ง ๊ฒฝ๋ก
๊ธ์ ์ด๋ฏธ์ง๋ฅผ ์ฒจ๋ถํ๊ณ ์ถ์ผ์๋ค๋ฉด ๊ฐ์ ๋๋ ํ ๋ฆฌ์ ์ด๋ฏธ์ง ํ์ผ์ ์ถ๊ฐํ์ ์ ์๋์ ๊ฐ์ด ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค.

๐ ๋ชฉ์ฐจ ์์ฑ
๊ธ์ ์ฐ์ธก์ ๋ชฉ์ฐจ๊ฐ ๋ณด์ด๊ธฐ๋ฅผ ์ํ์ ๋ค๋ฉด index.md
ํ์ผ ๋งจ ์๋์ ๋ค์ ๋ด์ฉ์ ์ถ๊ฐํ์๋ฉด ์๋์ผ๋ก ๋ชฉ์ฐจ๊ฐ ์์ฑ๋ฉ๋๋ค.
```toc
```