[GitHub] 깃허브 블로그 만들기(1)

현재 운영하고 있는 블로그는 총 두 가지(?)이다.

메인 블로그이자 기술 블로그인 티스토리 블로그와 아직 포스팅은 하지 않았지만 여유가 생겼을 때 일상 또는 취미 목적으로 생성한 네이버 블로그가 있다.

 

욕심일 수는 있겠지만 블로그를 처음 시작할 때부터 깃허브 블로그를 만들고 운영해보고 싶다는 생각을 하고 있었다.

하지만 진입 장벽이 높고 어느 정도 개발 지식이 있어야 가능하다 해서.. 나중을 기약하고 있었는데 충동적으로 만들고 싶어 져서 도전하게 되었다.

(어느 정도 개발 지식을 쌓고 도전할걸..)

 

깃허브 블로그는 주로 TIL이나 개인 또는 사이드 프로젝트 정리용으로 사용할 생각이다.

결정 장애가 심한 나에게 첫 번째 고비는 Jekyll, Hexo, Hugo 이 3가지 중 어떤 것을 사용할지 정하는 것이었다.

 

위 3가지는 Static Site Generator로써 직역하면 정적 페이지 생성기이다.

Jekyll
- 루비 기반
- 현재 가장 인기 있음(깃허브 별 수 제일 많음)
- 한글 레퍼런스도 제일 많음
- 느리다는 제보가 많음(몇십 개의 포스팅뿐인데도 빌드하는데 5분씩 걸린다고)
- 윈도우 공식 지원 안됨

Hexo
- 자바스크립트(Node.js) 기반
- 한글 레퍼런스 꽤 많음
- 메인 개발자가 손을 놓은 듯
- 개발자가 중국인? 이라 구글링 하면 중국어 글이 많이 나옴

Hugo
- Golang 기반
- 빌드 빠름
- 문서화 잘돼 있음
- 깃허브 별 수가 Hexo보다 많음
- 한글 레퍼런스가 거의 없음

 

나는 Hugo를 사용할 생각이다.

처음에는 사람들이 Jekyll을 많이 쓰고 테마도 다양하다고 해서 많이 찾아봤지만 원하는 테마가 없었다.

(굉장히 심플한 디자인을 선호하는 편..)

 

그러다가 Hugo 테마를 찾아봤는데 Paper 라는 테마가 제일 마음에 들어서 Hugo를 사용하게 되었다.

요즘 핫한 Golang 기반이기도 해서 좋은 경험이지 않을까 싶다.

다만.. 테마에 대한 정보가 너무 없어서 매우 힘들다.

 

사용한 Theme

https://github.com/nanxiaobei/hugo-paper

 

---

Hugo 설치

나는 Mac을 사용하기 때문에 HomeBrew를 사용하여 Hugo를 설치했다.

 

터미널에 다음을 입력하고,

# hugo 설치
$ brew install hugo

 

설치가 완료되면, 다음을 터미널에 입력한다.

# hugo 버전 확인
$ hugo version
# 다음이 출력되면 정상적으로 설치된 것이다.
hugo v0.107.0+extended darwin/arm64 BuildDate=unknown

 

---

Github 레포지토리 2개 만들기

깃허브 레포지토리를 2개 생성해야 하는데, 둘 다 아무렇게 지어도 상관은 없다.

 

나는 먼저 Hugo의 컨텐츠와 소스파일들을 포함할 <YOUR-PROJECT> 저장소 생성했다. (나의 경우 blog라는 이름으로 생성)

다른 하나는 렌더링 된 버전의 Hugo 웹사이트를 포함할 <USERNAME>.github.io 저장소를 생성했다. (kmseunh.github.io)

 

 

계속 수정하고 커밋하느라.. HTML과 Shell은 못 본 척해주세요ㅜ

 

---

Hugo로 프로젝트 만들기

프로젝트를 만들어야 하기 때문에 적당한 위치에서 다음을 입력한다.

# 현재 위치 확인
$ pwd
# 현재 경로
/Users/kmseunh/Hugo

# hugo 프로젝트 생성
$ hugo new site blog
# 생성 완료되면 출력 문구
Congratulations! Your new Hugo site is created in /Users/gurumee/Workspaces/blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

 

만들어진 프로젝트 구조

├── archetypes
│          └── default.md
├── assets
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

 

나는 왜인지 모르게 계속 public 폴더가 생성되었다. 

뒤에서 나오겠지만 이 public 폴더 때문에 4-5일을 삽질했다...

 

테마를 설정해야 하는데 테마는 자신이 만들 수도 있고, 남이 만든 것을 이용할 수 있다.

이곳에서 공개된 테마들을 선택하고 설치할 수 있다.

 

보통 Downloads를 눌러보면 해당 Github 페이지로 이동되는데, 설치할 수 있는 방법이 적혀 있다.

프로젝트 루트에서 터미널을 열고 다음을 입력한다.

$ pwd
# 프로젝트 루트 경로
/Users/kmseunh/Hugo/blog

# git submodule add https://github.com/<theme 경로>.git themes/<theme 이름>
$ git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper

 

설치한 후에 blog/themes/hugo-tranquilpeak-theme/exampleSite/config.toml을 복사해서 blog/config.toml에 옮겨 놓는다.

그 후 해당 GitHub에 있는 내용을 따라 하거나 자신에게 맞게 커스텀하면 된다.

 

제일 중요한 것은 다음을 바꿔줘야 한다.

# ...
# 여기가 바뀌어야 합니다.
# https://<username>.github.io/
baseURL = "https://kmseunh.github.io/"

# ...
theme = "paper"
title = "kmseunh's TIL"
disqusShortname = 'paper'   # add disqus comments

 

이제 터미널에 다음을 입력한다.

# 로컬 서버 실행
$ hugo server -D
                   | EN-US  
-------------------+--------
  Pages            |     9  
  Paginator pages  |     0  
  Non-page files   |     0  
  Static files     |     4  
  Processed images |     0  
  Aliases          |     1  
  Sitemaps         |     1  
  Cleaned          |     0  

Built in 14 ms
Watching for changes in /Users/kmseunh/Hugo/blog/{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in /Users/kmseunh/Hugo/blog/config.toml
Environment: "development"
Serving pages from memory
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"에 들어가면 다음과 같은 화면이 뜬다.

 

 

---

Git 레포지토리 연결 및 쉘 스크립트 작성

내가 제일 에러 때문에 고생하고 시간을 날려 보낸 부분이다..

터미널에 다음을 입력한다. 

blog에 Github Repository blog, blog/public에 Github Repositroy <username>.github.io를 연결한다.

(Github Repositroy .github.io를 blog/public에 연결하라는 글도 있고 그냥 blog에 연결하라는 글도 있는데 나는 둘 다 에러가 났다.)

# 현재 위치 확인
$ pwd
/Users/kmseunh/Hugo/blog

# blog -> blog 레포지토리 연결
# git remote add origin http://github.com/<username>/blog.git
$ git remote add origin http://github.com/kmseunh/blog.git

# blog/public -> <username>.github.io 연결
# git submodule add -b master http://github.com/<username>/<username>.github.io.git public
$ git submodule add -b master http://github.com/kmseunh/kmseunh.github.io.git public

 

HTTP 주소를 직접 입력하기보다는 각 레포지토리에 들어가면 쉽게 복사할 수 있다.

 

 

배포를 보다 쉽게 하기 위해서 쉘 스크립트를 작성한다. 

blog 프로젝트 루트 디렉터리에,deploy.sh를 만들고 다음을 입력한다.

 

deploy.sh 파일 만들기

$ pwd
# 현재 경로
/Users/kmseunh/Hugo/blog
vi deploy.sh

 

blog/deploy.sh

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
# hugo -t <여러분의 테마>
hugo -t hugo-tranquilpeak-theme

# Go To Public folder, sub module commit
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..


# blog 저장소 Commit & Push
git add .

msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

git push origin master

 

그 후, 터미널에 다음을 입력한다.

# deploy.sh 실행 파일 권한 부여
$ chmod 777 deploy.sh

# 배포 실행
$ ./deploy.sh

 

조금 있다가 https://<username>.github.io를 접속하면, 블로그가 뜬 것을 확인할 수 있다.

 

---

포스트 작성하기

포스팅을 하기 위해 터미널에 다음을 입력한다.

# hugo new post/<원하는 path>/파일 이름.md
$ hugo new post/test.md                 
/Users/gurumee/Workspaces/blog/content/post/test.md created

 

그러면, blog/content/post/ 경로에 test.md가 생성된다.

그리고 간단하게 다음을 적어본다.

 

blog/content/post/test.md

---
title: "Test"
date: 2020-08-28T21:48:13+09:00
categories:
- category
- subcategory
tags:
- tag1
- tag2
---

<!--more-->
테스트입니다.​

 

블로그에 태그나 카테고리 등 다양한 taxomonmy를 추가할 수 있다.

 

이제 터미널에 다음을 입력하여 로컬 서버를 켠다.

# 로컬 서버 실행
$ hugo server -D

 

http://localhost:1313 에 접속하면 다음 화면이 출력된다.

 

 

콘텐츠 작성이 완료되면, 다시 터미널에 다음을 입력해서 배포하면 된다.

$ ./deploy.sh

 

---

마무리

git submodule add -b master http://github.com//.github.io.git public 를 입력하여 연결하려고 할 때에 여러 가지의 반복된 오류에 스트레스를 받았다.

 

HTTP 주소를 SSH 주소로 바꿔서 입력하여 연결하면 해결되는 경우가 많다고 한다.

하지만 나는 아니었다.

public 폴더를 삭제한 후에 시도하고, public 폴더 내에 .git 파일을 삭제하고 다시 시도하고, .gitignore 파일의 경로를 수정하고 다시 시도해봤지만 계속해서 에러가 발생했다.

(4-5일째 반복되는 정신이 아찔해져 버린..)

 

그냥 에러를 무시하고 그다음 절차를 진행해봤다.

deploy.sh 파일을 생성한 후 코드를 입력, 실행 파일 권한을 부여하고 배포 실행을 했는데 연결이 됐다..

(왜 실행 되는지도 모르고 제대로 삽질해버린...)

그 이후에 원하는 기능을 추가하거나 UI를 꾸미려고 하는데 예시가 없고 테마별로 구조가 다 다르다보니 많은 시행착오를 겪고 있다. 

성공하면 해당 내용을 포스팅할 생각인데 할 수 있을까..?? 

 

---