How to Build lostineconomics.com

2019-11-14

Jun Sok Huhh | ๐Ÿ lostineconomics.com

tl;dr

๋ญ ๋Œ€๋‹จํ•œ ์‚ฌ์ดํŠธ๋ผ๊ณ โ€ฆ

๊ทธ๋ ‡๋‹ค. ์ „ํ˜€ ๋Œ€๋‹จํ•˜์ง€ ์•Š๋‹ค. ์™œ ์ด๋Ÿฐ ๊ธ€์„ ์“ฐ๋ƒ๊ณ ? ๊ทธ๋ƒฅ ๊ธฐ๋ก์„ ์œ„ํ•ด์„œ๋‹ค. ๋ฏธ๋ž˜์˜ ์–ด๋Š ์‹œ์ ์—์„œ ๋‹ค ๊นŒ๋จน์„ '๋‚˜โ€™๋†ˆ์„ ์œ„ํ•ด์„œ ๊ธฐ๋ก์„ ๋‚จ๊ฒจ ๋†“๋Š” ๊ฒƒ์ด๋‹ค. ์ด ๊ธ€์„ ๋ณผ ์‚ฌ๋žŒ๋„ ์—†๊ฒ ์œผ๋‚˜, ํ˜น์‹œ๋ผ๋„ ๋„์›€์ด ๋œ๋‹ค๋ฉด ๊ณ ๋ง™๊ฒ ๋‹ค.

Contraints

์• ์ดˆ์— ์ด ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ๋ช‡ ๊ฐ€์ง€ ์ œ์•ฝ ์‚ฌํ•ญ์„ ๊ฑธ์—ˆ๋‹ค.

  1. ๋„๋ฉ”์ธ ๊ตฌ์ž… ๋น„์šฉ๋งŒ ์ œ์™ธํ•˜๊ณ  github(๊นƒํ—™)๋งŒ ์“ด๋‹ค.
  2. ๊ณผ๋„ํ•  ์ •๋„๋กœ ๊น”๋”ํ•œ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ ๋‹ค.
  3. ์ฝ”๋”ฉ์ด ํฌํ•จ๋œ ํฌ์ŠคํŒ…์„ ์ œ์™ธํ•˜๊ณ  ์ˆ˜์‹์„ ํฌํ•จํ•ด ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ํฌ์ŠคํŒ…์„ ์ž‘์„ฑํ•œ๋‹ค.

1์ด ๊ฐ€๋Šฅํ•ด์ง„ ๊นŒ๋‹ญ์€ ๊นƒํ—™์—์„œ static web์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊นƒํ—™์„ ์ด์šฉ ํ•˜๋ฉด ์ด์šฉ์ž์˜ ๋ฆฌํฌ์ง€ํ„ฐ๋ฆฌ(๋ฆฌํฌ) ๋ณ„๋กœ ํ”„๋กœ์ ํŠธ ํŽ˜์ด์ง€(Github Pages)๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ์ด ๋…€์„์„ ํ™œ์šฉํ•˜๋ฉด Jekyll, Hugo ๋“ฑ์˜ ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•ด github ์œ„์—์„œ ์ œ๋Œ€๋กœ ๋Œ์•„๊ฐ€๋Š” ๋ธ”๋กœ๊ทธ, ํ™ˆํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ข‹์€ ํŠœํ† ๋ฆฌ์–ผ์€ ์–ธ์ œ๋‚˜์ฒ˜๋Ÿผ ๊ตฌ๊ธ€์‹ ๊ป˜ ๋ฌธ์˜ํ•˜์‹œ๋ผ.1

์–ด๋Š๋‚  ๋งˆ์Œ์— ๋“œ๋Š” Hugo skin์„ ๊ณ ๋ฅด๊ณ  ์žˆ๋‹ค๊ฐ€ ์ด๋Ÿฐ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. '๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ฑด ์ด๋Ÿฐ๊ฒŒ ์•„๋‹ˆ๋ผ, ๊ทธ๋ƒฅ ๋ธ”๋žญํฌ ํŽ˜์ด์ง€์— LaTeX\LaTeX ์ด ํœผ๋ฅญํ•˜๊ฒŒ ๋ Œ๋”๋ง๋˜๋Š” ์ •๋„์ธ๋ฐโ€ฆ" ๊ทธ๋Ÿฐ๋ฐ ์ด๋Ÿฐ ํ—ˆ๋ฆ„ํ•œ ๋ฏธ๋‹ˆ๋ฉ€๋ฆฌ์ฆ˜ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒŒ ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ์ง€ ์•Š์•˜๋‹ค. Jekyll์ด๋“  Hugo๋“  ๋ชจ๋‘ ๋ธ”๋กœ๊ทธ๋ฅผ ํ†ต์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ฒŒ ๋งŒ๋“  ํˆด์ด๋‹ค. md(markdown)๋กœ ๊ธ€์„ ์“ฐ๋ฉด ์—ฌ๊ธฐ์— ์—ฌ๋Ÿฌ ์˜ท์„ ์ž…ํžˆ๋Š” ํ˜•ํƒœ์ธ๋ฐ ์ด ์˜ท์„ ๋‚ด ๋งˆ์Œ๋Œ€๋กœ ์ œ์–ดํ•˜๋Š”๊ฒŒ ์‰ฝ์ง€ ์•Š์•˜๋‹ค. ๋ฌผ๋ก  ์ด๋Š” ๋‚ด๊ฐ€ html์ด๋‚˜ javascript์— ๋ฌด์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ฅผ ์ž˜ ์•Œ์•˜๋‹ค๋ฉด ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ํ˜•ํƒœ๋Œ€๋กœ ์ด๋ฆฌ์ €๋ฆฌ ๋œฏ์–ด๊ณ ์น  ์ˆ˜ ์žˆ์—ˆ๊ฒ ์ง€โ€ฆ

stackedit.io, the king

md๋ฅผ ๋น ๋ฅด๊ฒŒ ๋กœ์ปฌ์— ์†๋ฐ•๋˜์ง€ ์•Š๊ณ  ์“ฐ๊ฒŒ ํ•ด์ฃผ๋Š” ํˆด๋“ค์ด ๋งŽ์ด ์žˆ๋‹ค. ๊ทธ ์ค‘์—์„œ ๋‚˜๋Š” stackedit๊ฐ€ ํ‚น์™•์งฑ์ด๋ผ๊ณ  ๋งํ•˜๊ณ  ์‹ถ๋‹ค. ์ด์œ ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  1. stackedit.io๋Š” github์—์„œ ์†Œ์Šค๋ฅผ ๋ฐ›์•„์™€ ์›น ๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ ๊ฐ€๋ณ๊ฒŒ ๊ตฌํ˜„๋œ๋‹ค. ๊ฐœ์ธ๋ณ„ ์„ค์ •์€ ๊ตฌ๊ธ€ ๋“œ๋ผ์ด๋ธŒ ํ˜น์€ ๊นƒํ—™์— ์ €์žฅํ•œ๋‹ค. ์–ด๋””์„œ ์“ฐ๋“  ์ ์ ˆํ•œ ๊ณ„์ •์œผ๋กœ ๋กœ๊ธด๋งŒ ํ•˜๋ฉด ์ž‘์„ฑํ•˜๋˜ ๊ธ€์„ ํฌํ•จํ•ด์„œ ๋™์ผํ•œ ํ™˜๊ฒฝ์ด ๋ณด์žฅ๋œ๋‹ค.
  2. ์œ„ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ ํด๋” ๋ฒ„ํŠผ์„ ๋ˆ„๋ฉด ์™ผ์ชฝ์œผ๋กœ ์–ด๋–ค ๊ฒƒ์„ ์ผ๋Š”์ง€ ๋ณผ ์ˆ˜ ์žˆ๊ณ  ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋กœ ์ •๋ฆฌ๋„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ค๋ฅธ์ชฝ์˜ ์ƒต ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์„ค์ • ๊ด€๋ จ ๋ฉ”๋‰ด๊ฐ€ ๋œฌ๋‹ค.
  3. md ๋ฌธ์„œ๋ฅผ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋กœ ์ €์žฅํ•˜๊ณ , ๋ณ€ํ˜•ํ•˜๊ณ , publishํ•  ์ˆ˜ ์žˆ๋‹ค.
  4. LaTeX\LaTeX ์ˆ˜์‹์ด ํ•„์š”ํ•œ ์‚ฌ๋žŒ์—๊ฒŒ๋Š” ๋”ฑ์ด๋‹ค. LaTeX\LaTeX๊ณผ ๊ฐ™์ด ๋ณธ๊ฒฉ์ ์ธ ์กฐํŒ ์ž‘์—…์—๋Š” ์—ฌ๋Ÿฌ๋ชจ๋กœ ์•„์‰ฌ์›€์ด ์žˆ์ง€๋งŒ KaTeX์„ ํ†ตํ•ด ์ง€์›๋˜๋Š” ์ •๋„๋กœ๋„ ์™ ๋งŒํ•œ ์šฉ๋„๋Š” ๊ฐ๋‹นํ•˜๊ณ  ๋‚จ๋Š”๋‹ค.

3๋ฒˆ์ด ์ด์ฑ„๋กœ์šด ๋Œ€๋ชฉ์ด๋‹ค. ์™ผ์ชฝ ๋์˜ ๋„ค๋ชจ ์•ˆ์— ๋“ค์–ด์žˆ๋Š” #์„ ๋ˆ„๋ฅด๋ฉด ๊ทธ๋ฆผ์ฒ˜๋Ÿผ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ฉ”๋‰ด๊ฐ€ ๋“ฑ์žฅํ•œ๋‹ค.

Landing index.html

์ผ๋‹จ ๊นƒํ—™์•„์ด๋””.github.io๋กœ ๋ฆฌํฌ๋ฅผ ๋”ด๋‹ค. ์ฆ‰, lostineconomics.com์˜ ๊ฒฝ์šฐ์—๋Š” anarinsk.github.io๊ฐ€ ๋œ๋‹ค. ์ด๋Š” ๊นƒํ—™ ๋ฆฌํฌ์ด๊ธฐ๋„ ํ•˜์ง€๋งŒ, ํ•ด๋‹น ๊นƒํ—™ ์•„์ด๋””์˜ ๋Œ€ํ‘œ ์ฃผ์†Œ๋„ ๋œ๋‹ค. ์ด ๋ฆฌํฌ/ํŽ˜์ด์ง€๋ฅผ ์ผ์ข…์˜ ๋žœ๋”ฉ ํŽ˜์ด์ง€, ์ฆ‰ ๋Œ€๋ฌธ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋Œ€๋ฌธ์—๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์Šคํƒ€์ผ์„ ์ž…ํž ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ๋‚˜๋Š” ์•ˆํ–ˆ๋‹ค. ๋Œ€๋ฌธ ํŽ˜์ด์ง€์˜ ๊ฒฝ์šฐ ๊นƒํ—™์—์„œ ์ œ๊ณตํ•˜๋Š” Jekyll์˜ ๋ช‡ ๊ฐ€์ง€ ์Šคํ‚จ์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. lostineconomics.com์˜ ๊ฒฝ์šฐ minimal ์–‘์‹์„ ๋” ์ค„์—ฌ ํ™œ์šฉํ–ˆ๋‹ค.

Write Hard Way

์ด๋Ÿฌํ•œ ์šด์˜ ๋ฐฉ์‹์˜ ๋‹จ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

Write Easy Way

๊ณฐ๊ณฐํžˆ ์ƒ๊ฐํ•ด๋ณด๋‹ˆ ๋” ์‰ฌ์šด ๋ฐฉ๋ฒ•์ด ์žˆ์—ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

์•ž์„œ ๊ฐ ๋ฆฌํฌ์˜ ์Šคํƒœํ‹ฑ์›น์€ ๋ธŒ๋žœ์น˜(์ผ๋ฐ˜์ ์œผ๋กœ๋Š” ๋งˆ์Šคํ„ฐ ๋ธŒ๋žœ์น˜)์— index.html โ†’ index.md โ†’ README.md ์ˆœ์œผ๋กœ ๋ฌธ์„œ๋ฅผ ์ฝ์–ด ์ด ๋…€์„์„ ์ฃผ์†Œ๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ๋ณด์—ฌ์ค€๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  ๋ฌธ์„œ๋ฅผ html๋กœ ๋ฐ”๊พธ๊ณ  ์ด๋ฅผ index.html ํ•ด๋‹น ๋ฆฌํฌ์— ๋„ฃ์–ด์ฃผ๋ฉด ์ด ๋…€์„์„ ์ € ์ฃผ์†Œ์—์„œ ์›น์— ๋…ธ์ถœ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. stackedit.io์˜ publish ๊ธฐ๋Šฅ์ด ๋ฐ”๋กœ ์ด๊ฒƒ์„ ์‹คํ˜„ํ•ด์ค€๋‹ค.

ํ•ด๋‹น ๋ฒ„ํŠผ ์˜†์— ๊นƒํ—™ ์•„์ด์ฝ˜์€ ๋™๊ธฐํ™”๋œ ํŒŒ์ผ๋กœ ์ด๋™์„ ๋ฐ”๋กœ ๊ตฌํ˜„ํ•ด์ค€๋‹ค. ์ด๊ฒƒ๋„ ๊ฝค ํŽธ๋ฆฌํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ตฌํ˜„ ๋ฐฉ์‹์„ ์ •๋ฆฌํ•ด๋ณด์ž.

  1. stackedit.io์—์„œ md๋ฅผ ์ ์„ฑํ•œ๋‹ค.
  2. ์ ์ ˆํ•œ ๊นƒํ—™ ๋ฆฌํฌ๋ฅผ ๋งŒ๋“ ๋‹ค. https://github.com/๊ณ„์ •/๋ฆฌํฌ์ด๋ฆ„
  3. ํ•ด๋‹น ๋ฆฌํฌ์— mdํŒŒ์ผ์„ ์ €์žฅํ•œ๋‹ค. (์‚ฌ์‹ค md ํŒŒ์ผ์€ ๋‹ค๋ฅธ ๊ณณ์— ์ €์žฅ๋˜์–ด ์žˆ์–ด๋„ ๊ด€๊ณ„ ์—†๋‹ค)
  4. ํ•ด๋‹น md ํŒŒ์ผ์„ https://github.com/๊นƒํ—™์•„์ด๋””/๋ฆฌํฌ์ด๋ฆ„์— index.html์˜ ์ด๋ฆ„์œผ๋กœ ํผ๋ธŒ๋ฆฌ์‹œ ํ•œ๋‹ค.
  5. ๊นƒํ—™ ์„ค์ •์—์„œ ํ™ˆํŽ˜์ด์ง€์—์„œ ๊นƒํ—™ ํŽ˜์ด์ง€๋ฅผ ํ™œ์„ฑํ™”ํ•˜์ž.
  6. ์ˆ˜์ • ์‚ฌํ•ญ์ด ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ stackedit.io์—์„œ md ํŒŒ์ผ์„ ์ˆ˜์ •ํ•œ ๋’ค ์‹ฑํฌ์™€ ํผ๋ธ”๋ฆฌ์‹œ๋ฅผ ํ•˜๋ฉด ๋œ๋‹ค.

ํ™ˆํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ํŽธ์˜์ƒ lostineconomics.com์„ ์˜ˆ๋กœ ๋“ค๊ฒ ๋‹ค.

๋ณ„๋„์˜ ๋ฆฌํฌ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ๋ฒˆ๊ฑฐ๋กœ์›Œ๋ณด์ผ ์ˆ˜ ์žˆ๊ฒ ๋‹ค. ์ด๋Ÿฐ ๊ด€๋ฆฌ ๋ฐฉ์‹์—๋Š” ๊ท€์ฐจ๋‹ˆ์ฆ˜ ๋น„์šฉ๋ณด๋‹ค ํฐ ์žฅ์ ์ด ์žˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ! file path์—์„œ ๋””ํดํŠธ๋กœ ์ฃผ์–ด์ง„ .md๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์–ด๋–ค ์ผ์ด ์ƒ๊ธธ๊นŒ? ์›๋ž˜ .md ํŒŒ์ผ์ด html๋กœ ๊ต์ฒด๋˜๋Š” ๋Œ€์ฐธ์‚ฌ(!)๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‹นํ™ฉํ•˜์ง€ ๋งˆ์‹œ๋ผ. ์šฐ๋ฆฌ๋Š” github์— ํŒŒ์ผ์„ ์ €์žฅํ•˜๊ณ  ์žˆ๋‹ค. ๊ณผ๊ฑฐ์˜ ์–ด๋Š ์ˆœ๊ฐ„์œผ๋กœ๋„ ๋Œ์•„๊ฐˆ ์ˆ˜ ์žˆ๋‹ค! ๊ทธ๋ž˜๋„ ๊ท€์ฐฎ์€ ์ผ์ด ์ƒ๊ธฐ๊ธฐ ์ „์— publish์— ์ฃผ์˜ํ•˜๋ฉด ์ข‹๊ฒ ๋‹ค.

stackedit.io ์ฐจ์›์—์„œ ์ œ๊ณต๋˜๋Š” ์•ˆ์ „์žฅ์น˜๋„ ์žˆ๋‹ค. ์•„๋ž˜ history ๋ฉ”๋‰ด๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ž์‹ ์ด ์„ธ์ด๋ธŒํ•œ ์–ด๋Š ์ˆœ๊ฐ„์œผ๋กœ๋„ ๋Œ์•„๊ฐˆ ์ˆ˜ ์žˆ๋‹ค. stackedit.io ์ž์ฒด์ ์œผ๋กœ ๋Œ์•„๊ฐ€๋Š” git ์‹œ์Šคํ…œ์ด๋‹ค. ํ›Œ๋ฅญํ•˜์ง€ ์•„๋‹ˆํ•œ๊ฐ€!

Customization?

์•„๋ฌด๋ฆฌ ํ—ˆ๋ฆ„ํ•˜๋‹ค๊ณ  ํ•ด๋„ ํŠนํ™”๋Š” ํ•„์š”ํ•˜๋‹ค! ์˜ˆ๋ฅผ ๋“ค์–ด Google Analytics๋ฅผ ์‹ฌ๊ณ  ์‹ถ๋‹ค๋ฉด ์–ด์ฐŒํ•ด์•ผ ํ•˜๋Š”๊ฐ€? stackedit.io๋Š” ๊ฐœ๋ณ„์ ์ธ ํŠนํ™” ๊ธฐ๋Šฅ๋„ ์ œ๊ณตํ•œ๋‹ค. โ€œTemplatesโ€ ๋ฉ”๋‰ด์—์„œ ํŠนํ™”๋œ html ๋ฐ ์Šคํฌ๋ฆฝํŠธ์˜ ์ฝ”๋“œ๋ฅผ ์„ค์ •ํ•˜๊ณ  ์ด๋ฅผ ํŽ˜์ด์ง€์— ์ž…ํž ์ˆ˜ ์žˆ๋‹ค.

์•ž์„œ Publish ๋ฉ”๋‰ด์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋“ฏ์ด ์ž์‹ ์ด ํ•„์š”ํ•œ ์ฝ”๋“œ๋‚˜ ์Šคํƒ€์ผ(css)์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด ์ œ๊ณต๋œ๋‹ค. ๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š” ๋„ค ๊ฐœ์˜ ์Šคํƒ€์ผ์€ ์‚ญ์ œ๋‚˜ ์ˆ˜์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ณ , ์ด๋ฅผ ๋ณต์‚ฌํ•ด์„œ ๋‚˜๋ฆ„์˜ ์ฝ”๋“œ์™€ ์Šคํƒ€์ผ์„ ์ˆ˜์ •ํ•œ ๋’ค ์ด๋ฅผ publish ๋‹จ๊ณ„์—์„œ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜ ๊ทธ๋ฆผ ์ค‘ ๋ฐ•์Šค์นœ ๊ฒƒ๋“ค์€ ์ปค์Šคํ„ฐ๋งˆ์ฆˆํ•œ ํ•ญ๋ชฉ์˜ ์˜ˆ์‹œ๋‹ค.




๐Ÿ lostineconomics.com | Jun Sok Huhh


  1. ๋งํฌ ํ•˜๋‚˜ ์ ์–ด๋‘”๋‹ค. https://blog.chulgil.me/how-to-make-blog-using-github-1 โ†ฉ๏ธŽ