younghwanjoe / gatsby-blog

BSD Zero Clause License
0 stars 0 forks source link

Zoomkoding Gatsby Blog

Zoomkoding Gatsby Blog is released under the 0BSD license. PRs welcome! contributions welcome

Demo Websites: English | Korean

English README.md

๐Ÿ‘‹ ์†Œ๊ฐœ

๋ธ”๋กœ๊ทธ๋ฅผ ์ง์ ‘ ์šด์˜ํ•˜๋ฉด์„œ ์กฐ๊ธˆ์”ฉ ๊ทธ๋ ค๋ดค๋˜ ์ด์ƒ์ ์ธ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ํ…Œ๋งˆ๋ฅผ Gatsby๋ฅผ ํ†ตํ•ด ๋งŒ๋“ค์–ด๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
์ด ํ…Œ๋งˆ๊ฐ€ ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•˜๊ณ ์ž ํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ์ž์‹ ์˜ ์ด์•ผ๊ธฐ๋ฅผ ์ž˜ ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์ด ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.๐Ÿ™Œ

๋ธ”๋กœ๊ทธ ํ…Œ๋งˆ๊ฐ€ ๋ง˜์— ๋“œ์…จ๋‹ค๋ฉด ์•„๋ž˜ ๊ณผ์ •์„ ํ†ตํ•ด ์ž์‹ ์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค!

ํ˜น์‹œ ๋งŒ๋“œ์‹œ๋Š” ๊ณผ์ •์—์„œ ๊ถ๊ธˆํ•˜์‹  ์ ์ด๋‚˜ ์–ด๋ ค์›€์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด ์ด์Šˆ๋ฅผ ํ†ตํ•ด ๋ฌธ์˜ ๋‚จ๊ฒจ์ฃผ์„ธ์š”!
โญ๏ธ๋Š” ๋ธ”๋กœ๊ทธ ์šด์˜์— ํฐ ํž˜์ด ๋ฉ๋‹ˆ๋‹ค!๐Ÿ˜Š

โœจ ๊ธฐ๋Šฅ

๐Ÿš€ ์‹œ์ž‘ํ•˜๊ธฐ

Github Page๋‚˜ Netlify ์ค‘ ์›ํ•˜์‹œ๋Š” ๋ฐฐํฌ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋‹ค์Œ ๊ณผ์ •์„ ์ง„ํ–‰ํ•˜์‹œ๋ฉด ๋น ๋ฅด๊ฒŒ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“œ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿฆ– GitHub Page๋กœ ๋งŒ๋“ค๊ธฐ

๊นƒํ—™ ํŽ˜์ด์ง€๋ฅผ ํ†ตํ•ด ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“œ์‹œ๋‹ค๋ฉด ์•„๋ž˜ ๊ธ€์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!
Gatsby ํ…Œ๋งˆ๋กœ GitHub Blog ๋งŒ๋“ค๊ธฐ

๐Ÿ”ง Netlify๋กœ ๋งŒ๋“ค๊ธฐ

์•„๋ž˜ ๋ฒ„ํŠผ์„ ํ™œ์šฉํ•˜๋ฉด ๊ฐœ์ธ ๊ณ„์ •์— zoomkoding-gatsby-blog๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” Repository ์ƒ์„ฑ๊ณผ Netlify์— ๋ฐฐํฌ๋ฅผ ๋™์‹œ์— ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ดํ›„์—, ์ƒ์„ฑ๋œ Repository๋ฅผ cloneํ•ฉ๋‹ˆ๋‹ค.

Deploy to Netlify

๐Ÿƒโ€โ™€๏ธ ์‹คํ–‰ํ•˜๊ธฐ

์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋กœ์ปฌ ํ™˜๊ฒฝ์— ๋ธ”๋กœ๊ทธ๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

# Install dependencies
$ npm install

# Start development server
$ npm start


์œ„ ๋ช…๋ น์–ด๊ฐ€ ๋ฌธ์ œ ์—†์ด ์‹คํ–‰๋๋‹ค๋ฉด http://localhost:8000์—์„œ ๋ธ”๋กœ๊ทธ๋ฅผ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โš™๏ธ ๋ธ”๋กœ๊ทธ ์ •๋ณด ์ž…๋ ฅํ•˜๊ธฐ

์œ„์˜ ๊ณผ์ •์„ ๋‹ค ์ง„ํ–‰ํ•˜์…จ๋‹ค๋ฉด ๋ฐฐํฌ์™€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด ์„ธํŒ…์ด ๋๋‚ฌ์Šต๋‹ˆ๋‹ค! ๐Ÿ™Œ
์ด์ œ ๋ธ”๋กœ๊ทธ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ฒŒ ๋˜๋ฉด ๋‚˜๋งŒ์˜ ๋ธ”๋กœ๊ทธ๊ฐ€ ๋งŒ๋“ค์–ด์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด gatsby-meta-config.js์— ์žˆ๋Š” ์—ฌ๋Ÿฌ๊ฐ’๋“ค์„ ๋ณ€๊ฒฝํ•ด์ค๋‹ˆ๋‹ค.

1. ๋ธ”๋กœ๊ทธ ๊ธฐ๋ณธ ์ •๋ณด

title: '' // zoomkoding.com
description: '' // ์คŒ์ฝ”๋”ฉ์˜ ๊ฐœ๋ฐœ์ผ๊ธฐ
language: 'ko', // 'ko', 'en' (์˜์–ด ๋ฒ„์ „๋„ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.)
siteUrl: '' // https://www.zoomkoding.com
ogImage: '/og-image.png', // ๊ณต์œ ํ•  ๋•Œ ๋ณด์ด๋Š” ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง€๋กœ '/static' ํ•˜์œ„์— ๋„ฃ๊ณ  ์‹ถ์€ ์ด๋ฏธ์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

2. ๋Œ“๊ธ€ ์„ค์ •

๋ธ”๋กœ๊ทธ ๊ธ€๋“ค์— ๋Œ“๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ๊ธธ ์›ํ•˜์‹ ๋‹ค๋ฉด utterances๋ฅผ ํ†ตํ•ด์„œ ์ด๋ฅผ ์„ค์ •ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿฆ„ utterances ์‚ฌ์šฉ๋ฐฉ๋ฒ•์€ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!

comments: {
    utterances: {
        repo: '' // zoomkoding/zoomkoding-gatsby-blog
    },
}

3. ๊ธ€์“ด์ด ์ •๋ณด

๊ธ€์“ด์ด(author)์— ์ž…๋ ฅํ•˜์‹  ์ •๋ณด๋Š” ํ™ˆํŽ˜์ด์ง€์™€ about ํŽ˜์ด์ง€ ์ƒ๋‹จ์— ์žˆ๋Š” ๊ธ€์“ด์ด๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ์„น์…˜์ธ bio์—์„œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. description์— ์ž์‹ ์„ ์„ค๋ช…ํ•˜๋Š” ๋ฌธ๊ตฌ๋“ค์„ ๋„ฃ์œผ๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์œผ๋กœ ๋ณด์—ฌ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. bio์— ๋“ค์–ด๊ฐ€๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋ฐ”๊พธ์‹œ๋ ค๋ฉด assets์— ์›ํ•˜์‹œ๋Š” ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•˜์‹œ๊ณ  ํŒŒ์ผ์˜ ์ด๋ฆ„์„ thumbnail์— ๋„ฃ์–ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.(gif๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค!)

์•„์ดํฐ ๋ฏธ๋ชจํ‹ฐ์ฝ˜์œผ๋กœ thumbnail์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ด ๊ถ๊ธˆํ•˜์‹œ๋ฉด ์ด ๊ธ€์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!

๐Ÿค– ์œ„์—์„œ ์„ค์ •ํ•œ ์–ธ์–ด์— ๋”ฐ๋ผ description์˜ ํฌ๋งท์ด ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

author: {
    name: '์ •์ง„ํ˜',
    bio: {
      role: '๊ฐœ๋ฐœ์ž',
      description: ['์‚ฌ๋žŒ์— ๊ฐ€์น˜๋ฅผ ๋‘๋Š”', '๋Šฅ๋™์ ์œผ๋กœ ์ผํ•˜๋Š”', '์ด๋กœ์šด ๊ฒƒ์„ ๋งŒ๋“œ๋Š”'],
      thumbnail: `zoomkoding.gif`,
    },
    social: {
      github: 'https://github.com/zoomKoding',
      linkedIn: 'https://www.linkedin.com/in/jinhyeok-jeong-800871192',
      email: 'zoomkoding@gmail.com',
    },
},

๐Ÿ™‹โ€โ™€๏ธ about page ๋งŒ๋“ค๊ธฐ

about ํŽ˜์ด์ง€ ๋˜ํ•œ gatsby-meta-config.js๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. about ํ•˜์œ„์— ์žˆ๋Š” timestamps์™€ projects์— ๊ฐ๊ฐ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜์‹œ๋ฉด about ํŽ˜์ด์ง€๊ฐ€ ์ž๋™ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

1. timestamps

์•„๋ž˜์™€ ๊ฐ™์ด ๊ฐ timestamp ์ •๋ณด๋ฅผ ๋ฐฐ์—ด๋กœ ์ œ๊ณตํ•ด์ฃผ์‹œ๋ฉด ์ž…๋ ฅํ•˜์‹  ์ˆœ์„œ์— ๋งž์ถฐ์„œ timestamps section์— ๋ณด์—ฌ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

links์— ํ•ด๋‹น ์ •๋ณด๊ฐ€ ์—†๋‹ค๋ฉด ์ƒ๋žตํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

{
  date: '2021.02 ~',
  activity: '๊ฐœ์ธ ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœ ๋ฐ ์šด์˜',
  links: {
    post: '/gatsby-starter-zoomkoding-introduction',
    github: 'https://github.com/zoomkoding/zoomkoding-gatsby-blog',
    demo: 'https://www.zoomkoding.com',
  },
},

2. projects

๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ฐ project ์ •๋ณด๋ฅผ ๋ฐฐ์—ด๋กœ ์ œ๊ณตํ•ด์ฃผ์‹œ๋ฉด ์ž…๋ ฅํ•˜์‹  ์ˆœ์„œ์— ๋งž์ถฐ์„œ projects section์— ๋ณด์—ฌ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

{
  title: '๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ํ…Œ๋งˆ ๊ฐœ๋ฐœ',
  description:
    '๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•˜๋Š” ๊ธฐ๊ฐ„์ด ์กฐ๊ธˆ์”ฉ ๋Š˜์–ด๋‚˜๊ณ  ์ ์  ๋งŽ์€ ์ƒ๊ฐ๊ณผ ๊ฒฝํ—˜์ด ๋ธ”๋กœ๊ทธ์— ์Œ“์•„๊ฐ€๋ฉด์„œ ์ œ ์ด์•ผ๊ธฐ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๋ธ”๋กœ๊ทธ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ ์—ฌ๋Ÿฌ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋ฅผ ๋ณด๋ฉด์„œ ์ข‹์•˜๋˜ ๋ถ€๋ถ„๊ณผ ๋ถˆํŽธํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค์„ ๋ฐ”ํƒ•์œผ๋กœ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ง์ ‘ ๋ธ”๋กœ๊ทธ ํ…Œ๋งˆ๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.',
  techStack: ['gatsby', 'react'],
  thumbnailUrl: 'blog.png',
  links: {
    post: '/gatsby-starter-zoomkoding-introduction',
    github: 'https://github.com/zoomkoding/zoomkoding-gatsby-blog',
    demo: 'https://www.zoomkoding.com',
  }
}


๊ทธ๋ ‡๊ฒŒ ๋‚ด์šฉ์„ ๋ฌธ์ œ ์—†์ด ์ž…๋ ฅํ•˜์…จ๋‹ค๋ฉด ๋‚˜๋งŒ์˜ ๋ธ”๋กœ๊ทธ๊ฐ€ ํƒ„์ƒํ•œ ๊ฒƒ์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.๐ŸŽ‰

๋ณ€๋™์‚ฌํ•ญ์„ ์‹คํ–‰ ์ค‘์ธ ๋ธ”๋กœ๊ทธ์—์„œ ํ™•์ธํ•˜์‹œ๋ ค๋ฉด 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
```

๐Ÿ’ก ๋ฒ„๊ทธ ๋ฆฌํฌํŠธ & ๋ฌธ์˜

๊ถ๊ธˆํ•˜์‹  ์ ์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด ์ด์Šˆ๋กœ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด ์ตœ๋Œ€ํ•œ ๋น ๋ฅด๊ฒŒ ๋‹ต๋ณ€ ๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!๐Ÿ™‹โ€โ™‚๏ธ

๐Ÿค” ํ˜น์‹œ ํŠน์ • ๊ธฐ๋Šฅ์ด ์—†์–ด์„œ ํ…Œ๋งˆ ์‚ฌ์šฉ์„ ๋ง์„ค์ด์‹œ๊ฑฐ๋‚˜ ์ œ์•ˆํ•˜๊ณ  ์‹ถ์œผ์‹  ๊ธฐ๋Šฅ์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด,
๐Ÿ‘‰ ์—ฌ๊ธฐ์— ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์„ธ์š”! ์ ๊ทน์ ์œผ๋กœ ๋ฐ˜์˜ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค :)