README
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
```