Frontend #

2024-12-31 ⋯ Hugo #1 사이트 생성, 깃허브 배포

1. Hugo 설치 Hugo v0.112.0 이상인지 확인하면 된다. 2. Hugo 사이트 생성 작업하고 싶은 위치에 Hugo 디렉토리를 만들어준다. Hugo로 들어가서 hugo 사이트 틀을 생성해준다. 나는 blog라는 이름으로 생성하였다. blog 디렉토리에 빈 Git 저장소를 초기화한다. 위에서 Using 'master' as the name for the initial branch. 언급이 나온다. 여기서 확인해줘야 할 부분이 있다. 레포지토리 생성 페이지에서 Add a README file.을 체크하면 This will set main as the default branch.라는 안내가 뜬다. 이를 통해 default가 main임을 확인할수있다. 따라서 위의 경우에는 master가 아닌 main으로 바꿔줘야 한다. 다음으로 선택한 테마를 Git 서브모듈로 프로젝트에 추가한다. 나는 hugo-book이라는 테마를 사용했다. 다음으로, 블로그의 기본 설정들을 세팅해준다. blog 디렉토리 내 파일들은 대략적으로 아래와 같이 구성되어 있다. 이 중에서 content와 hugo.toml만 수정할것이다. content에는 작성한 게시물이 들어가고, hugo.toml에는 기본 세팅을 위한 config 변수들이 들어간다. hugo-book 테마의 경우에는 content에 대해 이와 같이 언급하고 있다. 해당 테마는 국가별로 여러 content 디렉토리가 존재해서, 그 중 main이 되는 content.en의 내용만을 시키는대로 복사해준다. 다음으로 hugo.toml에 선택한 테마를 설정해주고 열어서 확인해본다. 여기서 base가 되는 내용만 수정해줬다. 기본적인 설정이 끝났으므로 로컬에서 실행시켜보자! http://localhost:1313에 접속하면 local 환경에서 어떻게 실행 중인지 확인할수있다. 이쁘게 잘 나온다 ㅎㅎ 변경 사항을 픽스하려면 `hugo`를 수행해서 `public` 디렉토리에 static site 코드를 생성해준다. 3. Hugo 사이트 배포 hugo로 만든 static site를 github page를 활용해서 배포할것이다. 이를 위해서 `.github.io` 리포지토리를 생성해준다. 이때 Add a README file 을 선택할 경우 push 할때 오류가 날 수 있으므로 체크 해제해서 생성해주는게 좋다. 다음으로, .github/workflows 경로에 gh-pages.yml 파일을 만들어준다. gh-pages.yml은 GitHub Actions 워크플로우를 정의하여 코드가 커밋되거나 푸시될 때 자동으로 Hugo 사이트를 빌드하고 GitHub Pages에 배포할 수 있도록 하는 파일이다. 아래 내용은 HUGO 공식 문서에서 제공한 워크플로우인데, 나의 경우에는 오류가 났다. 위의 워크플로우를 사용한다면 line 8의 main를 확인해주자면 default가 master라면 master로 바꿔줘야 한다. 나의 경우는 위 워크플로우로는 오류가 났어서 아래의 수정된 내용을 넣어줬다. 이어서 GH_TOKEN를 정의해줘야 하는데 리포지토리의 Settings -> Secretes and Variables -> Actions 에서 Repository secretes와 Repository variables를 생성해준다. Secret 자리에 토큰을 입력해주면 된다. 작성이 완료되었다면, 생성한 `.github.io` 리포지토리에 연결한 후 커밋, 푸시해준다. 4. 마무리 이로써 블로그 생성과 배포는 끝이지만!! 추가로 확인하면 좋은 부분이 있다. 1. Actions Actions에서 초록색 체크박스가 뜨는지 확인하기. 오류가 난다면 해당 오류의 로그를 읽어보고 그에 맞게 수정해주면 된다. 2. Sources, Branch 공식 문서에서는 Deploy from a branch에서 Github Actions로 바꿔주라고 나온다. 바꿔도 상관없으나 나는 그냥 뒀다. 브랜치는 보통은 gh-pages 브랜치가 기본 Github Pages 브랜치로 설정되어 있지만 혹시 안되어 있다면 gh-pages로 바꿔주면 된다. 3. 구조 blog 디렉토리가 이와 같은 구조를 띤다면 제대로 작성된 것이다. 5. 참고한 블로그 및 문서 1. HUGO 공식 문서 - https://gohugo.io/getting-started/quick-start/ 2. HUGO 공식 문서2 - https://gohugo.io/hosting-and-deployment/hosting-on-github/ 3. hugo-book github - https://github.com/alex-shpak/hugo-book.git 4. https://c11oud.tistory.com/entry/GitHub-깃허브-블로그-만들기1 5. https://github.com/Integerous/Integerous.github.io 6. https://kzeoh.github.io/posts/make-blog/