ANNOUNCEMENT

Gatsby is joining Netlify: Read the announcement post

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Gatsby Starter Zoomkoding

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

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ํ•ฉ๋‹ˆ๋‹ค.

Deploy to Netlify

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

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

# 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
```
ยฉ 2023 Gatsby, Inc.