개요 Hugo 블로그 구축기 -1에서 블로그 기본적인 토대를 만들었다면 해당 글에선 본격적으로 블로그를 내 입맛에 맞게 꾸미려고 한다. 그 방법으로 hugo.toml 변경, shell을 이용한 git update 자동화 방법을 소개하려고 한다. Step 1: 구성 파일 변경 hugo에서는 블로그 구성 파일을 hugo.toml로 관리를 하게 된다. 여기서 블로그 구성 파일이란 블로그 웹의 기본 설정(메뉴 설정, 테마, 포스트 및 페이지 등)을 구성할 수 있게 하는 파일이다. 이제 hugo.toml을 Vim 편집기를 사용하여 수정하려고 한다. $ cd my_blog # 생성 폴더로 이동 $ vi hugo.toml # vim 편집기로 구성 파일 편집 자신이 정한 테마의 Github에 config.toml or hugo.toml에 가이드라인을 보고 참고하여 추가하면 된다. 테마의 Github에 내용이 없거나, 좀 어려운 경우는 자신의 테마의 Github이 아니라 자신이 정한 테마를 사용한 블로그를 운영하는 사람의 github.io 레포지토리를 들어가서 파일을 참고하는 방법도 추천한다. Step 2: 배포 파일 설정 Hugo 블로그 구축기 -1 Step 3에서 배포 파일을 담을 레포지토리 하나만 관리하게 구성하였다고 하였다. 레포지토리가 하나라고 해도 블로그의 변경사항을 Github Pages에 적용하려면 은근히 직접 치기 귀찮다. 따라서 수정 사항을 한 번에 Github에 올릴 수 있는 배포 파일을 만들 것 이다. # 기존 배포 시 실행 코드 $ hugo $ cd public $ git add . $ git commit -m "Update: {commit message}" $ git push origin master $ cd .. 리눅스 쉘 스크립트를 활용하여 배포 파일을 만들면 된다. $ cd my_blog # 생성 폴더로 이동 $ touch deploy.sh # 배포 쉘 스크립트 파일 생성 $ chmod 777 deploy.sh # 파일 실행 권한 부여 배포 파일을 만들었으면 스크립트를 작성하면 된다. $ #!/bin/bash $ echo -e "\033[0;32mDeploying updates to GitHub...\033[0m" # Build the project. $ hugo -t loveit # hugo -t <여러분의 테마> # Go To Public folder, sub module commit $ cd public # Add changes to git. $ git add . # Commit changes. $ msg="rebuilding site `date +%y-%m-%d`" $ 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 .. $ echo "Finish blog deploy..." 해당 배포 파일은 돌아다니는 레퍼런스를 참고하여 만들었다. 하지만 우린 하나의 레포지토리만 사용하므로 public 폴더로 이동 후 한 번만 push하도록 수정했다. 마지막으로 배포 파일을 실행 하려면 아래와 같은 코드로 실행 하면 된다. $ ./deploy.sh "{commit msg}" # 메세지가 없어도 된다. Reference https://minyeamer.github.io/blog/hugo-blog-1/

개요 맥북 유저인 내가 공부 자료 정리를 위해 깃헙 블로그를 구축하려고 한다. 깃헙 블로그로 Hugo를 선택한 이유는 큰 이유 없이 다른 static site generator들 보다 가장 빌딩 시간이 빠른 프레임워크이기 때문이다. Step 1: 기본 구축 Hugo 설치를 위하여 brew를 이용하여 설치를 했다. 블로그 파일들을 로컬 컴퓨터에서 관리를 하기 위해 맥북에 Hugo를 설치를 했다. $ brew install hugo $ hugo help # hugo 설치가 잘 되었는지 확인 brew가 없다면 공식 문서를 통해 설치를 한 후 실행 한다. 또한 블로그 구축을 위해 GitHub 레포지토리가 있어야 한다. 다음으로 레포지토리를 만들어보겠다. Github Pages를 사용하기 위해 레포지토리 이름은 username.github.io로 해야한다. 본인의 username을 모르겠다면 본인 깃헙을 들어갔을 때 github.com 뒤에 있는 인자가 본인의 username이라고 생각하면 쉽다. 예를 들어 나의 경우 url이 https://github.com/goodyoung 인데 나의 username은 goodyoung이 되는 것이다. 구축이 어렵다면 공식 문서를 통해 구축하는 것을 추천 한다. Step 2: Hugo Site 구축 Hugo 명령어를 사용해 Site 구축을 한다. $ hugo new site my_blog # my_blog라는 폴더가 생성이 된다. 자신이 원하는 블로그의 테마를 추가한다. $ cd my_blog # 생성 폴더로 이동 $ git init # 깃 초기화 $ git submodule add {theme github link} themes/{theme name} # 테마 가져오기 $ echo "theme = '{theme name}'" >> hugo.toml # config 파일 수정 해당 명령어를 작성하면 themes 폴더 안에 테마 폴더가 생성이 된 것을 확인 할 수 있게 된다. 블로그의 여러 테마는 공식 사이트에서 찾을 수 있다. 임시로 로컬에서 사이트 실행을 해본다. $ hugo server 원하는 테마가 나오면 성공이다. 블로그 글 작성 후 업로드 시켜서 확인해본다. $ hugo new content posts/{post name}.md $ vi posts/{post name}.md Hugo 명렁어로 블로그 포스트를 생성 시킨다. vim 편집기로 해당 블로그 포스트에 대한 내용을 수정한다. +++ title = 'My First Post' date = 2024-01-14T07:07:07+01:00 draft = true +++ 잘 실행했다면 위의 형태로 나온다. draft가 default로 true로 되어있다. 하지만 Hugo는 draft가 true인 게시물을 빌딩 시 제외 시킨다. 따라서 Step 3: 배포 단계를 실행할 때 주의하면 된다. 글을 배포를 하고 싶으면 draft 줄을 삭제하던가 false로 바꾸면 된다. 수정 내용을 확인 하기 위해 서버를 재가동을 한다. (두개 중 하나만 실행해도 된다.) $ hugo server --buildDrafts $ hugo server -D 인자 --buildDrafts나 -D는 초안 상태의 페이지를 보여주는 옵션이다. Step 3: 배포 해당 사이트를 정적 웹페이지로 변환을 하기 위해 다음의 명령을 실행시켜야한다. $ hugo # site 경로로 간 다음 실행 해당 명령을 실행하면 public 폴더에 정적 페이지들이 자동적으로 생성이 된다. 테마 별 실행 하고 싶다면 hugo -t {theme name} 빌딩 파일 업로드를 위한 깃헙 레포지토리랑 연결을 해야한다. 다른 레퍼런스들의 대부분은 레포지토리를(소스파일 | 배포파일) 두개를 만들고 push를 두번하는 방식을 선택하고 있다. 난 그런 것이 복잡하여 배포파일만(public) github에 올리는 방식으로 했다. $ cd public # public 폴더로 이동 $ git init # git 초기화 $ git remote add origin {github repo} # 4번에서 만든 github 레포지토리 $ git remote -v # 연결 확인 연결이 되었다면 깃에 올리고 확인 해보면 된다. $ git add . $ git commit -m "Update: first commit:" $ git push origin master # master 브랜치로 푸시 (변경해도 무관하다.) 푸시를 하면 master 브랜치가 생성이 된다. 사이트 배포를 위한 마지막 단계로 자신의 레포지토리 깃헙 설정만 하면 배포가 완료 된다. 레포지토리 Settings > General > Default branch로 이동을 한다. 깃헙 default branch 변경 main 브랜치를 master 브랜치로 변경 Settings > Pages > Build and deployment로 이동을 한다.