깃허브 블로그 만들고 hugo 테마 적용하기 (github.io / PaperMod 테마)

블로그 만드는데 너무나 오랜 시간이 걸린 나머지 혹시 나같은 사람이 있을까봐 정리하기로 했다..

 

사용한 테마는 PaperMod 테마

https://github.com/adityatelange/hugo-PaperMod

GitHub - adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.

 

일단 git이 깔려있어야된다!

근데 생각해보니 github 블로그 만드시는 분들인데 git이 없을리가 없군..

 

Hugo 설치

https://github.com/gohugoio/hugo/releases

Releases · gohugoio/hugo

여기서 다운받아준다. 운영체제에 맞게 다운받아주면 되는데 나는 윈도우 64비트기 땜시

hugo_0.115.1_windows-amd64.zip 요걸 다운 받았다!

 

압축을 풀고 적당한 위치에 놓아준다

환경변수로 등록할 것이라서 난 C드라이브에 Hugo 폴더 생성하고 그 안에 bin 폴더를 생성한 뒤 넣어줬다

 

시스템 환경 변수 설정에 들어가서 Path에 아까 받은 Hugo 파일들이 있는 폴더 주소를 넣어준다

윈도우 창에 환경 변수 검색 > 시스템 환경 변수 편집 > 환경 변수 > 시스템 변수 > Path > 새로만들기 후 주소 붙여넣기

그런 다음 cmd창을 켜서 hugo version 을 입력해서 설치 확인을 해준다.

이렇게 뜨면 된거다!

 

폴더 준비

블로그를 생성할 폴더에 들어간다. 나는 git이란 폴더를 생성하고 그 안에다가 블로그를 만들 것이다.

gitbash를 켜주고 아래 명령어를 입력해준다..

hugo new site <생성할 블로그 이름>
# hugo new site zziuningblog

그냥 생성되는 폴더명이라서 아무거나 써도 된다. 난 시험용깃허브아이디+blog (zziuningblog)로 했다.

데스크탑이 언니꺼라서 사용자 이름이 언니라 ㅎ 가렸습니다

그럼 이렇게 폴더 안에 <블로그 이름>이라는 폴더가 생겼다.

대충 이런 파일들이 들어있다.. content에는 블로그 글이 들어가고 themes에 테마가 들어간다..!

hugo.toml이라는 파일이 블로그 설정 파일(?)인데, 얘를 수정해줘야한다.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

처음엔 이거밖에 없다!

 

https://github.com/adityatelange/hugo-PaperMod/wiki/Installation#sample-configyml

Installation

내가 쓰는 테마엔 엄청 많은 옵션들이 있는데.. yml로 되어있어서 yml to toml로 바꿔서 적어줘야한다.

테마가 다르면 다를 수 있으니 테마의 설치 페이지를 잘 확인해주시길!!!!!

 

https://transform.tools/yaml-to-toml

YAML to TOML

여기서 변환한 다음다음 hugo.toml에 복붙하면 된다.

이렇게!!

 

꼭!!! 수정해야 되는거 두가지가 있는데

baseURL = "https://깃허브아이디.github.io"

이렇게 꼭 주소를 수정해줘야한다.

 

그리고 이대로 하면 CSS가 깨진다.

params.assets.disableFingerprinting=true로 설정해주어야한다. toml 파일에 추가해준다.

그러면 꼭 해야되는 것은 수정 끝!!!! 나머지 설정은 나중에ㅎㅎ.

 

이제 블로그 설정도 끝났으니 테마적용시간!

cd <생성된 블로그 폴더>
# cd zziuningblog

생성된 블로그 폴더로 이동해준다. 

이제 사용할 테마를 다운받아줄 것이다,, 

git clone <적용할 블로그 테마 git 주소> themes/<테마 이름> --depth=1
# git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

 

블로그 폴더 안에 있는 themes 폴더에 테마명으로 폴더를 생성하고 거기에 테마를 clone 해온다는 뜻이다

depth는 뭔지 잘모르겠는데 검색해보니까 히스토리를 안가져온다는 거 같다,, 아마도,,?

테마를 받다...

테마가 잘 받아졌다!

hugo server -D

를 하면 블로그를 로컬에서 띄워볼 수 있다. localhost:1313 주소로 접속하면 테마가 적용된 블로그를 볼 수 있다!

아무것도 설정안해서,, ㅎ 예시 그대로이다 하하

이제 깃허브랑 연결해줄것이다..

 

깃허브 저장소 생성 (2개)

깃허브 저장소를 두 개 생성해야된다.

하나는 아까 생성한 블로그 폴더가 올라갈 저장소 (아무 이름이나 지어도 된다. 난 blog란 이름으로 지을 것이다!)

하나는 github.io 블로그를 위한 저장소이다. (깃허브아이디.github.io)

blog 레포 -> zziuningblog 폴더와 연결
zziuning.github.io 레포 -> zziuningblog안 public 폴더와 연결

될 예정이다!!!

이제 깃허브가서 저장소를 만들어준다!

blog 저장소 생성 완료

zziuning.github.io 블로그 생성 완료! 

README 파일을 생성해주었다.

(안해도 되는지 모르겠다.. 그냥 내가 블로그 만들때 생성했길래 생성했다...ㅠ)

 

zziuningblog에 들어가서 gitbash를 켜주고 (아니면 cd ~위치/zziuningblog해서 들어간다)

git remote add origin <블로그 저장소 주소>
# git remote add origin https://github.com/zziuning/blog.git

를 해준다.

ㅎㅎ,, git init을 먼저 해주었다..

연결 잘되었다..!

git submodule add -b master <github.io 저장소 주소> public
# git submodule add -b master https://github.com/zziuning/zziuning.github.io.git public

흠,,,,,,, 잘된지 모르겠지만... ㅎ (fatal.. unable..어쩌고..)

아무튼.. public 폴더에 연결이 되었다..

(근데 지금 다시보니 존재하는 브랜치가 main이어서 그런거지 않을까..? 근데 저래도 잘되긴했다)

 

만약 public 폴더로 이동했었다면 cd .. 해서 zziuningblog 폴더로 돌아와준다.

hugo -t <테마 이름>
# hugo -t PaperMod

블로그를 빌드해준다.

이제 public 폴더로 가서 push 해줄 것이다..

cd public
git add .
git commit -m"블로그 생성"
git push origin main

이제 zziuningblog 폴더를 push 해줄 것이다.

cd ..
git add .
git commit -m"블로그 생성"
git push origin master

자 이제 블로그에 들어가보자..

테마 적용에 시간이 좀 걸릴 수도 있다..!

적용됐는지 보고 싶으면 github.io 저장소에서 Setting -> Pages 에 들어가서 Last deployed 시간을 보면 된다.

Good.. 들어가본다..

블로그도 잘 생성됐고 테마도 잘 적용됐다!!

근데 title 같은거 하나도 안바꿨더니 ExampleSite가 되었다..

나중에 수정하지뭐 ㅇ.<

근데 글이 하나도 없다! 하나 써보자

 

글 작성

어쩌다가 실패하는 과정까지 담게 되었으니 밑에 쭉 내려서 보시고 따라해주세요...!

 

블로그 폴더 (zziuningblog)에 들어간다.

hugo new <글 이름>

그럼 content 폴더에 hello.md라는 마크다운 파일이 생성되어있다. 

생성된 파일에 글을 써주면 된다.

여기서 draft : true는 지워준다!

검색했던 기억에,, 있으면 글이 안올라간다고 했던 거 같다

이제 블로그 글을 작성했다.

블로그 폴더에서 gitbash를 킨다ㅎㅎ

hugo -t <테마 이름>
# hugo -t PaperMod

cd public
git add .
git commit -m"첫번째 글 업로드"
git push origin main

cd ..
git add .
git commit -m"첫번째 글 업로드"
git push origin master

근데 왜 안뜨지...?

직접 주소로 들어가면 보이는데..

다시 해보니...

md 파일이 폴더 안에 들어가있어야 메인화면에 뜬다..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

다시 올려보자 ㅎㅎ

hugo new <폴더명>/<파일명>.md

다시 글을 작성해주고 똑같은 과정으로 올린다.

hugo -t <테마 이름>
# hugo -t PaperMod
cd public
git add .
git commit -m"블로그 글작성"
git push origin main
cd ..
git add .
git commit -m"블로그 글작성"
git push origin master

 

잘 등록되었다~!!!

글 올릴땐 이 순서로 올리면 된다!

 

글 작성 방법 정리

hugo new <폴더명>/<파일명>.md

# 생성된 md 파일에 게시글 작성

hugo -t <테마 이름>
# hugo -t PaperMod

cd public
git add .
git commit -m"블로그 글작성"
git push origin main

cd ..
git add .
git commit -m"블로그 글작성"
git push origin master

과정이 매우 귀찮아서 스크립트 써서 반자동화하시는 분들도 많으신듯 하다

난 아직 안했다.. 블로그 글 적는데만 지금 한시간을 써서 너무 힘들어서 여기까지만....

 

그리고.. ㅠ_ㅠ git config 정보가 원래 깃허브 아이디로 되어있어서 부계인데 본계아이디로 커밋내역남음

ㅋㅋㅋㅋㅋ이런.... 어쩐지 왜 프사가 없는 계정인데 원래 깃허브 프사가 보이나 했다..

여튼... 깃허브 블로그 생성 방법 정리 끝..~!!!!!!! 

이거 정리할라고 안쓰던 깃허브 아이디까지 썼다 ㅎㅁㅎ

누군가에게 도움이 되길...