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๋ฅผ ์ฐ๊ฒฐํด์ค๋ค.





๐ฃ ์์ฑ ๐ฃ
์ ์ฌ๊ธฐ๊น์ง ์ ๋ฐ๋ผ์๋ค๋ฉด ๋ฉ์ง ๋ธ๋ก๊ทธ๊ฐ ์์ฑ๋์์ ๊ฒ์ด๋ค. ์ถ๊ฐ์ ์ธ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ์ด๋ ์์ ๋ฅผ ๋ณด๊ณ ์ถ๋ค๋ฉด ์ ์์ ๋ธ๋ก๊ทธ repo๋ฅผ ์ฐธ๊ณ ํ๋ฉด ๋์์ด ๋ ์ ์์ ๊ฒ ๊ฐ๋ค. ๐ค https://github.com/suites/suitelab/
์ถ๊ฐ๋ก ํ ์ ์๋ ์์ ๋ค
- typescript๋ก ์ ํ
- Gatsby-plugin ์ค์น(google-ad, webmaster, disqus โฆ) https://www.gatsbyjs.org/plugins/
- react ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น