[Ubuntu] ✒️Hugo블로그 설치와 게시까지(배포X)

개요

---

 

들어가며

---

옛날부터 직접 호스팅하는 블로그를 한번쯤 해보고싶었습니다
양식화된 블로그들은 뭔가 맘에 안드는점이 꼭 한두개씩 있고,
예쁘게 테마도 꾸미고싶은데 자유도가 부족하더라고요

 

그래서 이참에 도전해보겠습니다

 

환경

---

Ubuntu Desktop 22.04 LTS

 

Hugo를 선택한 이유

---

ChatGPT에게 개인 블로그 호스팅 서비스의 장단점을 비교해달라고 부탁했습니다.
GPT선생님의 답변

개인 블로그 호스팅 서비스들은 다양한 장단점을 갖고 있습니다. 여기에는 가장 인기 있는 몇 가지 서비스들의 장단점을 설명해 드리겠습니다:

1. WordPress:
   • 장점:
     • 유연성과 확장성: 다양한 테마와 플러그인을 통해 웹사이트를 맞춤화하고 기능을 추가할 수 있습니다.
     • 대규모 커뮤니티 및 지원: 많은 사용자들이 WordPress를 사용하고 있어서 문제가 발생했을 때 해결하기 쉬운 경우가 많습니다.
   • 단점:
     • 보안: 플러그인과 테마의 보안 취약점으로 인해 공격의 대상이 될 수 있습니다.
     • 복잡성: WordPress는 사용자 경험이 상대적으로 복잡할 수 있으며, 초기 설정이나 테마/플러그인 관리 등에서 시간이 소요될 수 있습니다.
2. Ghost:
   • 장점:
     • 초점된 기능: 블로그 작성에 초점을 맞춘 사용자 경험을 제공합니다.
     • 빠른 성능: 빠른 페이지 로드 속도를 제공하여 사용자 경험을 향상시킵니다.
   • 단점:
     • 제한된 확장성: WordPress에 비해 테마와 플러그인의 선택이 제한적일 수 있습니다.
     • 작은 커뮤니티: WordPress보다는 작은 커뮤니티가 형성되어 있어서 지원이나 피드백을 얻기 어려울 수 있습니다.
3. Hugo:
   • 장점:
     • 정적 사이트 생성기: 정적 파일로 웹사이트를 생성하므로 빠른 페이지 로드 속도와 보안성을 제공합니다.
     • 단순성: Hugo는 간단한 마크다운 문법을 사용하여 웹사이트를 작성할 수 있도록 해줍니다.
   • 단점:
     • 유연성 부족: WordPress나 Ghost와는 달리 동적 기능을 제공하지 않으므로 블로그 외의 기능을 추가하기 어려울 수 있습니다.
     • 학습 곡선: Hugo는 처음 사용하는 사용자에게는 다소 학습 곡선이 높을 수 있습니다.

이러한 서비스들은 각각의 장단점을 가지고 있으며, 사용자의 개인적인 선호나 요구 사항에 따라 선택할 수 있습니다.

 

고민 포인트

• 옵시디언에 주로 메모하다보니 마크다운이 편한데 Hugo는 마크다운 문법을 사용한다
• 🔗Hugo는 다채로운 테마를 제공한다

그래서 Hugo로 결정!

 

본문

---

🔗공식 Installation문서를 봐봅니다.

크게 4가지 설치법이 있어보이네요.

1. 사전 빌드된 릴리즈 파일을 받아서 압축을 풀고 설치
2. 패키지 관리자(snap, brew)
3. 저장소 패키지(apt)
4. 직접 빌드(Go, C컴파일러 필요)

복잡한건 싫어서 1,4번은 탈락
apt버전은 최신버전이 아닐 수 있다고 합니다. → 탈락
snap패키지는 권한 설정이 너무 힘들더라고요 → 탈락
brew버전으로 결정!

 

Homebrew설치

---

• Homebrew홈페이지에 들어가면 눈에 잘띄게 설치법이 있네요
• 심지어 홈페이지가 한국어까지 지원하니 이렇게 고마울수가 당장 설치합니다.
  
  

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• 중간에 엔터키 한번만 쳐주면 설치는 금방 끝납니다.
  
  

 

• 설치 완료 후 뜨는 메세지를 보니 다음 스템들이 있다고 하네요.
• 환경변수 추가 와 build-essential패키지 설치
• 그리고 gcc컴파일러 설치도 추천한한다고 합니다 일단 시키는대로 해보겠습니다.

 

(echo; echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"') >> /home/oniboogie/.bashrc

eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"

sudo apt-get install build-essential

brew install gcc

 

 

귀여운 맥주 이모지

 

Hugo 설치

---

• brew설치는 끝났으니 hugo를 설치해봅니다.

brew install hugo

• 설치가 잘 됐는지 확인해봅시다

hugo version

#출력
hugo v0.124.1-db083b05f16c945fec04f745f0ca8640560cf1ec+extended linux/amd64 BuildDate=2024-03-20T11:40:10Z VendorInfo=brew

 

 

- 그리고 나중에 테마를 설치하기 위해서 go도 설치해야한다고 하네요
- 쉬운방법으로 설치해보겠습니다.

sudo apt install golang-go

 

블로그 구축 및 가동

---

• 퀵 스타트 문서를 기준으로 조금 변형하면서 따라해보겠습니다.
• 일단 블로그의 부모 폴더로 쓸 폴더를 만들고 그 폴더로 이동해 둡니다.
• 다음 프로젝트 디렉토리 구조를 만듭니다.

hugo new site [블로그폴더이름]

• tree [블로그폴더이름]으로 생성된 디렉토리 구조를 구경해봅시다
• 제 폴더 이름은 oniboogie-devlog입니다

oniboogie-devlog/
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

• 블로그 폴더로 이동 해줍니다

cd [블로그폴더이름]

• 테마를 깃 서브모듈로 추가할건데 그를위해서 git 저장소 초기화를 진행해줍니다.

git init

• 테마를 서브모듈로 추가합니다.
• 저는 blowfish테마를 써보겠습니다.

git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

• huto.toml파일에 사용할 테마를 적어줍니다
• 그리고 잘 입력됐는지 확인도 해줍니다.

echo "theme = 'blowfish'" >> hugo.toml 
 cat hugo.toml

 

출력
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'blowfish'

 

• hugo서버를 가동해봅니다

hugo server

출력
...
BuildDate=2024-03-20T11:40:10Z VendorInfo=brew


                   | EN  
-------------------+-----
  Pages            |  8  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  8  
  Processed images |  0  
  Aliases          |  0  
  Cleaned          |  0  

Built in 42 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

 

• 주소는 localhost:1313이군요 접속해봅니다.

• 이렇게 생겼네요 hugo.toml파일에 title속성이 저기 대문에 들어가겠다는걸 알았습니다.

 

콘텐츠 추가

---

• 그럼 이제 계속해서 콘텐츠를 터미널로 추가해봅시다.
• 마크다운 파일을 생성해줍니다.

hugo new content posts/Hello-World.md

 

• 그리고 원하는 편집기로 파일을 확인해봅니다
• 저는 지금은 vim을 쓰겠습니다

sudo vim content/posts/Hello-World.md

 

• front matter만 들어가있는 마크다운 형식이 보입니다
• 눈여겨볼건 draft 속성인데 초안이라는 뜻입니다
• 사이트를 빌드할 때 디폴트로 draft가 true인 콘텐츠는 publish하지 않는다고 하네요
• 일단 그대로 두고 내용만 작성해 보겠습니다.
  
  

```md
++
title = 'Hello World'
date = 2024-04-09T02:07:00+09:00
draft = true
++

# Hello
## World !!
This is **bold** text, and this is *emphasized* text.
```

 

• 저장하고 나왔으면 hugo서버를 다시 가동해봅니다.
• 이번에는 플래그를 붙여서 `draft`가 true인 속성들도 포함시켜 보겠습니다

hugo server --buildDrafts
# 혹은
hugo server -D

 

• 일단 지금은 테마가 사이드 바 같은 메뉴 레이아웃이 없습니다
• 오른쪽 위의 돋보기를 눌러서 작성한 게시글을 검색해봅니다
  
  

 

• 작성한 게시글을 확인할 수 있습니다
  
  

 

마치며

---

• 스킨의 설정, 배포 부분은 기회가되고 반응도 있으면 시리즈로 다뤄보겠습니다
  • 근데 사실 국내 블로그들에 github pages로 배포하는 설명이 꽤 많이 나오긴 하네요
• 버전이 빠르게 업데이트되고 있는건지 스킨의 설정관련해서 문서랑 다른점이 꽤있네요 이부분은 좀 찾아봐야겠습니다.