Blog on dirac042

나만의 블로그 만들기 1. HUGO와 친해지기

Wed, 16 Jul 2025 00:00:00 +0900

Preparation

이 블로그 포스트는 다음 패키지를 설치되었다는 가정 하에 작성되었습니다.

Git (2.50.0)
Go (1.24.5)

(MacOS에서는 homebrew를 통해 쉽게 설치가 가능합니다.)

HUGO 소개

HUGO 메인 페이지

.md 파일을 자동으로 .html로 만드는 것은 굉장히 힘든 작업입니다. 이 작업을 쉽게 만들기 위해 우리는 정적 웹사이트 생성기 중 하나인 HUGO를 사용합니다.

HUGO는 .md 포스트들을 .html로 변환하는 일 뿐만 아니라 다양한 블로그 테마를 쉽게 다운로드하여 수정할 수 있게 합니다. 또한 블로그의 Deploy나 기타 작업이 굉장히 빠르고 단순하여 프로그래밍을 모르는 사람들도 나만의 블로그를 쉽게 만들 수 있습니다.

Installation

Hugo를 직접 다운로드 해봅시다.

1. Windows

(Youtube 참고)

2. MacOS

brew install hugo

homebrew 패키지 매니저를 이용해 다운로드 받습니다.

3. Linux

sudo apt install hugo # Debian
sudo pacman install hugo # Arch

사용하는 Distro의 패키지 매니저를 이용해 다운로드 받습니다.

(Linux를 사용하신다면 더 이상의 설명은 필요 없으리라 생각합니다.)

Create Blog Folder

진행하기 전, HUGO가 제대로 설치되었는지 확인해봅시다.

hugo version # 버전명이 나오면 정상적으로 설치됨.

이제 우리가 블로그 포스트 등을 저장할 폴더로 shell을 이동해줍니다.

# 저는 macos를 사용중이며, 저장하기 쉽게 Desktop에 파일을 저장해두었습니다.
cd ~/Desktop

이제 HUGO를 이용해 블로그 웹사이트를 만들어봅시다.

# hugo new site [블로그 이름]
hugo new site dirac042

블로그가 생성되었습니다! 이제 파일이 어떤 구조로 이루어져 있는지 확인해봅시다.

cd dirac042 # 방금 생성한 블로그 이름
ls

Blog Folders

필자의 블로그 폴더

생성된 블로그 폴더의 역할을 간략하게 알아봅시다.

archetypes: 마크다운 타입의 문서에서 읽어오는 기본 틀에 대한 정의파일이 있습니다.
content: 제일 중요한 파일이며, 여러분들이 obsidian으로 만드는 문서들이 이 곳으로 .md 형태로 들어갑니다.
public: 웹사이트의 중요한 파일들이 이곳에 들어갑니다.
static: obsidian에서 첨부된 이미지들이 이곳으로 들어갑니다.
themes: hugo에서 설치한 테마들이 이곳으로 들어갑니다.

Git Init

블로그의 테마를 설치하기 전에, git의 initialization을 해줘야합니다.

git init

(이 블로그 포스트는 여러분들이 이미 git의 설정을 완료했다는 가정하에 서술됩니다. 만약 여러분이 git 사용이 처음이시라면, git 사용법을 읽고 따라해 보시는 것을 권장드립니다.)

!주의: 이 커맨드는 현재 shell이 블로그 폴더 안에 들어가있어야 합니다!

pwd # 현재 shell 위치 확인
# ex. ~/Desktop/dirac042

Installing HUGO Themes

HUGO Themes 웹사이트

HUGO Themes에서는 유저들이 HUGO로 만든 다양한 웹사이트 테마를 제공합니다.
이 곳에서 마음에 드는 테마를 다운로드 받으면 곧바로 내 블로그에서 사용할 수 있습니다.

마음에 드는 테마를 발견했다면 download 아이콘을 눌러봅시다.
대부분의 모드는 github submodule을 이용한 설치를 지원합니다.

# 예시 테마: Papermod
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

이렇게 submodule을 이용하면, 테마 제작자가 업데이트를 진행할 때, 쉽게 커맨드 하나로 업데이트 시켜줄 수 있습니다.

git submodule update --init --recursive

Deploy

HUGO와 테마까지 모두 받았으면, 이제 테스트를 위해 한번 Deploy를 시켜봅시다.
shell이 블로그 폴더에 있는 상태에서 다음의 명령어를 사용하면 됩니다.

hugo server

그러면 굉장히 빠른 속도로 localhost에서 로컬파일을 이용해 블로그가 만들어집니다.
기본적으로 1313포트에서 생성되므로, http://localhost:1313 에 들어가 자신의 블로그를 확인해보도록 합시다.

필자의 블로그 구동 화면 (localhost)

이런 식으로 테마와 블로그가 제대로 나온다면, 축하드립니다!
여러분만의 블로그가 성공적으로 제작되었습니다.

나만의 블로그 만들기 0. 내가 블로그를 만드는 이유

Wed, 16 Jul 2025 00:00:00 +0900

Motivation

Second Brain

혹시 Tiago Forte의 Second Brain이라는 책을 읽어본 적이 있나요?

티아고 포르테의 <세컨드 브레인>

한국에서는 <세컨드 브레인>이라는 제목으로 번역되었습니다. 사실 한국보다는 미국권에서 굉장히 유명한 책입니다. 지식, 공부 관련 유튜버가 소개하는 내용들이 거의 모두 이 책에서 왔다고 해도 과언이 아닐 것입니다. 그 정도로 정보 정리에 있어서는 거의 ‘바이블’이라고 불릴 정도로 유명하고 유용한 책입니다.

이 책에서 나오는 ‘제 2의 뇌’를 만드는 방법으로 저자는 4단계의 방식을 소개합니다.

Capture: 내가 중요하다고 생각되는 것을 적기
Organize: 적은 메모들을 정리하기
Distill: 메모들에서 중요한 정보(Essence)를 찾기
Express: 이해한 정보들을 설명하며 창조하기

이 4가지 단계 중에서 1단계 ~ 3단계는 책을 읽기 전에도 실천하고 있었습니다. 특히 저는 Obsidian(옵시디언)이라는 앱에 흥미를 느끼게 되었고, 내가 생각하고 느낀 모든 것들은 이 프로그램을 통해 관리되고 있습니다. (추후에 옵시디언 사용법과 관련해 블로그 포스트를 적어볼 예정입니다.)

Capture: 살면서 갑자기 떠오르는 아이디어나, 대화를 통해 얻은 지식들은 노트와 연필로 직접 적는다.
Organize: 노트에 적은 것들을 Obsidian으로 옮긴다. 만들어진 문서는 카테고리화 되어 정리된다.
Distill: 옵시디언에 정리된 것들을 읽어보며 위에 Summary 칸을 만들어 미래의 내가 한눈에 볼 수 있도록 요약한다.

필자의 Obsidian 작업 환경. 포스트를 적을 때에는 왼쪽과 오른쪽 툴바를 넣고 쓴다.

Express

그러나 4가지 단계 중 네번째 단계가 빠져있습니다.

실제로 블로그 포스트를 이용해 공부나 내가 생각했던 것을 적어보자고 학창시절 수차례 생각해보았지만, 시도들은 전부 귀찮아서 그만두게 되었습니다.

그러한 이유를 생각해보자면 이 정도가 있겠습니다.

블로그 포스트를 적는 것은 생각보다 시간이 오래 걸린다.
블로그 사이트를 만드는 것은 어렵고 상당히 귀찮다.

그러다가 지금(2025년 7월 16일)에서야 블로그를 만들어야겠다는 생각이 들었고, 블로그를 적으면서 내가 더 성장할 수 있을 것 같다는 확신이 들었습니다. 블로그를 만들기 위해 많은 조사를 했고 그 과정에서 수많은 에러들을 만나며 고군분투한 결과, 만족할만한 웹사이트를 직접 제작할 수 있었습니다.

여러분들은 조금 더 쉽게, 버그가 적은 환경에서 블로그를 만들 수 있도록 이 포스트를 적어봅니다.

Blog Pipeline

이 포스트를 시작으로 이어지는 ‘나만의 블로그 만들기’ 시리즈는 저처럼 Obsidian을 주로 사용하는 사람들이 간단하게 블로그를 관리할 수 있는 시스템을 만드는 것을 목표로 합니다.

코딩을 한번도 배워보지 않은 사람도 따라할 수 있도록 최대한 쉽게 포스트를 적어보려고 노력해보겠습니다.

블로그 시스템 개요도

우리가 구현할 시스템의 개요도는 이러합니다.

Obsidian에 노트 형식으로 저장.

모든 Obsidian 노트는 마크다운(.md) 형식으로 저장됩니다. 그러나 우리가 이 마크다운을 곧바로 블로그에 사용할 수는 없습니다. 마크다운을 마크업(.html) 언어로 바꿔야하기 때문입니다.

블로그에 .html 형식으로 포스트 작성

그러므로 우리는 HUGO라는 프로그램을 사용해 블로그의 토대를 만들고 마크다운 파일을 쉽게 변환해볼 것입니다. 설치 과정도 다소 단순하고 굉장히 미학적인 블로그를 만들 수 있을 것입니다.

Github Pages를 이용해 블로그에 실시간 업로드

믈론 각자만의 도메인을 구매하여 사용하고 있는 사람들은 이 단계가 필요하지 않습니다. 그러나 도메인이 없는 우리도 Github 계정을 이용해 자신만의 블로그 도메인을 만들 수 있습니다. HUGO로 만들어진 블로그를 어떻게 Github Pages와 연동시켜 모든 사람이 볼 수 있도록 할 수 있을지 알아봅시다.

Disclaimer

‘나만의 블로그 만들기’ 포스트는 대부분 NetworkChunk의 ‘I started a blog…..in 2024 (why you should do)’에서 만들어진 것임을 밝힙니다.

그러나 코드를 그대로 사용하지는 않았으며, branch 구현 등 코드의 일부분을 수정하여 소개하려고 합니다.

이 블로그의 포스트보다 더 자세한 설명을 원한다면 꼭 이 유튜브 링크를 통해 더 알아보기를 권합니다.