๐ŸŒต

Gatsby๋กœ ๊ฐœ์ธ ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ -ํด๋ก ๋ถ€ํ„ฐ ๋ฐฐํฌ๊นŒ์ง€-

Gatsby๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€

React์™€ Graphql์„ ์‚ฌ์šฉํ•˜๋Š” ์ •์ ํŽ˜์ด์ง€ ์ƒ์„ฑ๊ธฐ. Gatsby JS ๋Š” ๊ฐ€๊ณตํ•  ์ •๋ณด๋ฅผ GraphQL ์—์„œ ๊ฐ€์ ธ์™€์„œ ๋นŒ๋“œ ์‹œ์ ์— ์ •์  ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด ๋‚ด๋Š” ๋ฐฉ์‹์„ ์ทจํ•˜๊ณ  ์žˆ๋‹ค. ์ด๋ฏธ ๋ฐฐํฌํ• ๋•Œ ๊ฐ ํŽ˜์ด์ง€ ์ •๋ณด๋“ค์ด ๋ชจ๋‘ ๋ฐฐํฌ์‹œ์ ์— ๋งŒ๋“ค์–ด์ง€๋ฏ€๋กœ, ๋”ฐ๋กœ ์•ฑ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

  • ๊ทธ๋ž˜ํ”„ ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
  • ๋ฐ์ดํ„ฐ ๋…ธ๋“œ๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค. ํ”„๋ฆฌ์…‹์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ํ™•์žฅํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
  • ๊ตฌ์„ฑํ•œ ๋ฐ์ดํ„ฐ๋ฅผ GraphQL๋กœ ์ฟผ๋ฆฌํ•ด์„œ ํŽ˜์ด์ง€ ์ฝ”๋“œ์—์„œ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์‚ฌ์ดํŠธ์˜ ๋ชจ๋“  ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์ „์— ๋ Œ๋”๋งํ•˜์—ฌ ๊ฒฝ๋กœ์—ย index.html์„ ์ƒ์„ฑํ•œ๋‹ค.

๋‹ค๋ฅธ ์ •์ ํŽ˜์ด์ง€ ์ƒ์„ฑ๊ธฐ๊ฐ€ ์•„๋‹Œ Gatsby๋ฅผ ์„ ํƒํ•œ ์ด์œ 

Jekyll์€ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ์ƒ์„ฑ๊ธฐ์ง€๋งŒ ruby๋กœ ์ž‘์„ฑ๋˜์–ด์žˆ์–ด์„œ customํ•˜๋Š”๋ฐ ์‰ฝ์ง€์•Š์€ ๋…ธ๋ ฅ์ด ๋“ฆ. hexo๋Š” node๊ธฐ๋ฐ˜์˜ ์ƒ์„ฑ๊ธฐ์ง€๋งŒ ejs๋“ฑ์˜ ํ…œํ”Œ๋ฆฟ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•ด์„œ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ๊ฐ€ react์— ๋น„ํ•ด ๋ถˆํŽธํ•˜๋‹ค๊ณ  ๋Š๋‚Œ.

ํ…œํ”Œ๋ฆฟ ํด๋ก 

ํ•ด๋‹น ํ™ˆํŽ˜์ด์ง€์— ๋งŽ์€ ํ…œํ”Œ๋ฆฟ๋“ค์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
https://www.gatsbyjs.org/showcase/?filters[0]=Featured

์ด๋ฒˆ ํด๋ก ์šฉ ์˜ˆ์ œ๋Š” ๋‹ค์Œ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ํด๋ก ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•œ๋‹ค. https://github.com/gatsbyjs/Gatsby-starter-blog

npm install -g Gatsby-cli

git clone https://github.com/gatsbyjs/Gatsby-starter-blog.git my-blog
cd my-blog
npm i

rm -rf .git
git init
git add .
git commit -m "Init project"
git remote add origin git@github.com:suites/my-blog.git
git push -u origin master

npm run start

http://localhost:8000/
http://localhost:8000/___graphql

๊ฐ„๋‹จํ•œ ์ˆ˜์ •์„ ํ†ตํ•ด ๋‚ด ๋ธ”๋กœ๊ทธ๋กœ ํƒˆ๋ฐ”๊ฟˆ

gatby-config.js

siteMetadata: {
    title: `์šฐ์‹์˜ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.`,
    author: `์œค์šฐ์‹`,
...

src/components/bio.js

<p>
  Written by <strong>{author}</strong> who lives and works in San
  Francisco building useful things.
  {` `}
  <a href={`https://twitter.com/${social.twitter}`}>
    You should follow him on Twitter
  </a>
</p>

<p>
  ์„œ์šธ์— ์‚ฌ๋Š” <strong>์œค์šฐ์‹</strong>์ž…๋‹ˆ๋‹ค.
  {` `}
  <a href={`https://twitter.com/${social.twitter}`}>
    You should follow him on Twitter
  </a>
</p>

์ฒซ ๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑ

content/blog/make-a-blog/index.md

---
title: ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•
date: "2019-08-01T23:46:37.121Z"
---

### ์š”๋กœ์ฝ”๋กฌ
๋งŒ๋“ค๋ฉด ๋ฉ๋‹ˆ๋‹ค.

- ๋…ธ์…˜ ๊ฒŒ์‹œ๊ธ€
- ์ž‘์„ฑํ•˜๋“ฏ์ด
- ์ž‘์„ฑํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

netlify์— ๋ธ”๋กœ๊ทธ ๋ฐฐํฌ

์ด์ œ ๋“œ๋””์–ด ๋Œ€๋ง์˜ ๋ฐฐํฌ๋ฅผ ์ง„ํ–‰ํ•ด๋ณผ ์ฐจ๋ก€๋‹ค. ์•„๋ž˜์˜ ์ฃผ์†Œ๋กœ ๊ฐ€์„œ ๊ฐ€์ž…์„ ์ง„ํ–‰ํ•œ๋‹ค. https://www.netlify.com/

๊ฐ€์ž…์ด ์™„๋ฃŒ ๋˜์—ˆ์œผ๋ฉด github repo์™€ netlify site๋ฅผ ์—ฐ๊ฒฐํ•ด์ค€๋‹ค.

Untitled a4df56b4 5d94 48e7 81c8 2a77364f8d02 Untitled cb9a6755 a6f5 46eb b039 174d881d1710 Untitled d171c36f 59ec 42e0 aa43 1d98a06ffb40 Untitled 0d8fdbf5 8f50 426e a1ef b6ce28507276 Untitled d8226f51 eaab 4cd0 ace1 fae9709ee3ed

๐Ÿฃ ์™„์„ฑ ๐Ÿฃ

์ž ์—ฌ๊ธฐ๊นŒ์ง€ ์ž˜ ๋”ฐ๋ผ์™”๋‹ค๋ฉด ๋ฉ‹์ง„ ๋ธ”๋กœ๊ทธ๊ฐ€ ์™„์„ฑ๋˜์—ˆ์„ ๊ฒƒ์ด๋‹ค. ์ถ”๊ฐ€์ ์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ ์‚ฌ์šฉ์ด๋‚˜ ์˜ˆ์ œ๋ฅผ ๋ณด๊ณ ์‹ถ๋‹ค๋ฉด ์ €์ž์˜ ๋ธ”๋กœ๊ทธ repo๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿค  https://github.com/suites/suitelab/

์ถ”๊ฐ€๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” ์ž‘์—…๋“ค

  • typescript๋กœ ์ „ํ™˜
  • Gatsby-plugin ์„ค์น˜(google-ad, webmaster, disqus โ€ฆ) https://www.gatsbyjs.org/plugins/
  • react ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜
yoon.homme
yoon.homme

๊ธฐ์ˆ ๊ณผ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์˜ ํž˜์ด ์„ธ์ƒ์„ ๋ฐ”๊พผ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค.

ํŽธ๋ฆฌํ•œ ์„ธ์ƒ์œผ๋กœ ๋‚˜์•„๊ฐ€๊ธฐ ์œ„ํ•ด ๊ณ ๋ฏผํ•˜๊ณ  ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.