πŸš€ 2. λΉ λ₯΄κ²Œ μ‹œμž‘ν•˜κΈ°

@Hudi Β· April 02, 2021 Β· 2 min read

μ•„λž˜ 단계λ₯Ό λ”°λΌμ„œ μ—¬λŸ¬λΆ„μ˜ λΈ”λ‘œκ·Έλ₯Ό μ‹œμž‘ν•˜μ„Έμš”. ꡉμž₯히 μ‰¬μ›Œμš” πŸ˜‰.

1. Gatsby μ‚¬μ΄νŠΈ 생성

컴퓨터에 node.js 와 gatsby-cli κ°€ μ„€μΉ˜λ˜μ–΄ μžˆμ–΄μ•Όν•©λ‹ˆλ‹€.

$ npx gatsby new my-hoodie-blog https://github.com/devHudi/gatsby-starter-hoodie

2. 개발 μ„œλ²„ μ‹œμž‘

$ cd my-hoodie-blog
$ npm run start

이제 localhost:8000 으둜 μ—¬λŸ¬λΆ„μ˜ λΈ”λ‘œκ·Έλ₯Ό 접속할 수 μžˆμŠ΅λ‹ˆλ‹€.

3. Github λ ˆν¬μ§€ν† λ¦¬ 생성

Utterance λŒ“κΈ€ μœ„μ ―μ€ Github 이슈 μ‹œμŠ€ν…œ κΈ°λ°˜μž…λ‹ˆλ‹€. λ”°λΌμ„œ 각 λΈ”λ‘œκ·Έ 별 Github λ ˆν¬μ§€ν† λ¦¬κ°€ ν•„μš”ν•©λ‹ˆλ‹€. λ˜ν•œ μ—¬λŸ¬λΆ„μ΄ Github Pages ν˜Ήμ€ Netlify 둜 λΈ”λ‘œκ·Έλ₯Ό λ°°ν¬ν•˜κΈΈ μ›ν•œλ‹€λ©΄, Github λ ˆν¬μ§€ν† λ¦¬λŠ” ν•„μˆ˜μž…λ‹ˆλ‹€.

λ§Œμ•½ Github λ ˆν¬μ§€ν† λ¦¬λ₯Ό μƒμ„±ν•˜λŠ” 법을 λͺ¨λ₯Έλ‹€λ©΄, Github 곡식 λ¬Έμ„œ λ₯Ό μ°Έμ‘°ν•˜μ„Έμš”.

원격 λ ˆν¬μ§€ν† λ¦¬ 등둝

git remote add origin https://github.com/{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}

4. blog-config.js μž‘μ„±

module.exports = {
  title: "MY BLOG",
  description: "Hello, This is my blog",
  author: "YOUR NAME",
  siteUrl: "https://myblog.com",
  links: {
    github: "https://github.com",
    facebook: "https://www.facebook.com",
    instagram: "https://www.instagram.com",
    etc: "https://www.google.com/",
  },
  utterances: {
    repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}",
    type: "pathname",
  },
}

gatsby-starter-hoodie λŠ” blog-config.js λΌλŠ” μ„€μ • νŒŒμΌμ„ μ œκ³΅ν•©λ‹ˆλ‹€. 이 νŒŒμΌμ—μ„œ λΈ”λ‘œκ·Έ 정보, μž‘μ„±μž ν”„λ‘œν•„, Utterance μ„€μ • 등을 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ—¬λŸ¬λΆ„ λΈ”λ‘œκ·Έ 섀정에 맞게 blog-config.js λ₯Ό μ„€μ •ν•˜μ„Έμš”. ν•˜μ§€λ§Œ, utterances.type 속성은 μˆ˜μ •ν•˜μ§€ μ•ŠλŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€.

ν”„λ‘œν•„ 이미지 λ³€κ²½

static/profile.png 에 μœ„μΉ˜ν•œ 이미지 νŒŒμΌμ„ μ›ν•˜λŠ” 이미지 파일둜 κ΅μ²΄ν•˜μ„Έμš”. λ§Œμ•½ 파일λͺ…을 λ³€κ²½ν•˜κ³  μ‹Άλ‹€λ©΄, src/components/Bio.jsx 의 μ†ŒμŠ€μ½”λ“œλ₯Ό μˆ˜μ •ν•΄μ•Όν•©λ‹ˆλ‹€.

5. 포슀트 μΆ”κ°€

λ§ˆν¬λ‹€μš΄ ν¬μŠ€νŠΈλŠ” contents/posts κ²½λ‘œμ— μœ„μΉ˜ν•΄μžˆμŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή κ²½λ‘œμ—μ„œ 글을 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ°λ₯Ό ν΄λ¦­ν•˜μ—¬ 더 μžμ„Έν•œ κΈ€ μž‘μ„± 방법을 ν™•μΈν•˜μ„Έμš”.

6. λΈ”λ‘œκ·Έ λ°°ν¬ν•˜κΈ°

6-1 Netlify λ₯Ό 톡해

A Step-by-Step Guide: Gatsby on Netlify λ¬Έμ„œλ₯Ό μ°Έμ‘°ν•˜μ—¬, Netlify λ₯Ό Github λ ˆν¬μ§€ν† λ¦¬μ™€ μ—°κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이 과정은 어렡지 μ•ŠμŠ΅λ‹ˆλ‹€.

Github λ ˆν¬μ§€ν† λ¦¬μ™€ 연결이 λ˜μ—ˆλ‹€λ©΄, Github λ ˆν¬μ§€ν† λ¦¬μ— 변경사항이 λ°œμƒν•  λ•Œ λ§ˆλ‹€ μžλ™μœΌλ‘œ μ—¬λŸ¬λΆ„μ˜ λΈ”λ‘œκ·Έμ— λ°°ν¬λ©λ‹ˆλ‹€.

6-2. Github Pages λ₯Ό 톡해

상황 1

λ ˆν¬μ§€ν† λ¦¬ 이름이 {YOUR_GITHUB_NAME}.github.io ν˜•νƒœμΌ 경우, μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•΄μ£Όμ„Έμš”.

$ npm run deploy-gh

상황 2

λ ˆν¬μ§€ν† λ¦¬ 이름이 {YOUR_GITHUB_NAME}.github.io ν˜•νƒœκ°€ 아닐 경우, μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•΄μ£Όμ„Έμš”.

$ npm run deploy-gh-prefix-paths

λ§Œμ•½ μœ„μ™€ 같은 경우 gatsby-config.js μ—μ„œ pathPrefix λ₯Ό μ—¬λŸ¬λΆ„μ˜ λ ˆν¬μ§€ν† λ¦¬ μ΄λ¦„μœΌλ‘œ λ°”κΏ”μ•Όν•©λ‹ˆλ‹€.

6-3. λ‹€λ₯Έ ν”Œλž«νΌ

$ npm run build

μœ„ λͺ…λ Ήμ–΄λ‘œ Gastby μ›Ήμ‚¬μ΄νŠΈλ₯Ό λΉŒλ“œν•  수 μžˆμŠ΅λ‹ˆλ‹€. λΉŒλ“œ 결과물은 /public 에 μ €μž₯λ©λ‹ˆλ‹€. /public 디렉토리λ₯Ό μ—¬λŸ¬λΆ„μ΄ μ‚¬μš©ν•˜λŠ” ν”Œλž«νΌμ˜ 배포 λͺ…령을 톡해 λ°°ν¬ν•΄μ£Όμ„Έμš”.

7. μ»€μŠ€ν„°λ§ˆμ΄μ§•

ν”„λ‘œμ νŠΈ ꡬ쑰

μ•„λž˜ ν”„λ‘œμ νŠΈ ꡬ쑰λ₯Ό μ°Έκ³ ν•˜μ—¬ μ»€μŠ€ν„°λ§ˆμ΄μ§• ν•  수 μžˆμŠ΅λ‹ˆλ‹€ πŸ™Š.

β”œβ”€β”€ node_modules
β”œβ”€β”€ contents
β”‚   └── posts // your articles are here
β”œβ”€β”€ public // build outputs are here
└── src
    β”œβ”€β”€ assets
    β”‚   └── theme // theme config is here
    β”œβ”€β”€ components
    β”‚   └── Article
    β”‚       └── Body
    β”‚           └── StyledMarkdown
    β”‚               └── index.jsx // markdown styles are here
    β”‚   ...
    β”œβ”€β”€ fonts // webfonts are here
    β”œβ”€β”€ hooks
    β”œβ”€β”€ images
    β”œβ”€β”€ pages // page components are here
    β”œβ”€β”€ reducers
    β”œβ”€β”€ templates // post components are here
    └── utils
@Hudi
Hello :) I'm Hudi who developed gatsby-starter-hoodie theme.