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