μλ λ¨κ³λ₯Ό λ°λΌμ μ¬λ¬λΆμ λΈλ‘κ·Έλ₯Ό μμνμΈμ. κ΅μ₯ν μ¬μμ π.
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