블로그에서 블로그 만들기를 쓰는 사람이 있다..? 두둥탁

음.. 예전에 "개발자라면 Github 블로그 하나 정도는 있어야 하는거 아닐까?" 라는 생각에 github 블로그를 만들었다.

근데 급식 시절, 최선을 다한 미술 수업에서 C를 맞던 나의 예술적 감각 덕분일까? 눈에 보이는 부분을 꾸미는 것에 너무 큰 노력이 들어갔다. 결국 꾸미기 귀찮아서 노션으로 옮겼는데, 노션 로딩속도에 진절머리가 나서 velog로 옮기는 중이다.

하지만 세상 일 어떻게 될 지 모르는 법.
예전에 공부했던 내용들을 글로 남겨두려 한다.

Hugo?

jekyll, hexo 등과 같이 웹사이트를 만들 수 있게 해주는 static site generator 중 하나이다.

Static site?

웹사이트는 두 종류로 나눌 수 있다.

1. Dynamic site (네이버, 유튜브 등)
2. Static site (블로그 등)

Static Site는 고정된 html을 전송하는 사이트이다.
Static Site는 Dynamic에 비해 표현이 제한적이지만 속도가 빠르다.
만들기도 쉽다.

Static Site Generator?

Static Site를 만들어주는 프로그램이다.
정해진 포맷대로 파일을 만든 뒤 빌드하면 알아서 html을 생성해준다.
사이트 테마를 쉽게 공유해서 사용할 수 있다.

환경

1. Static site generator : Hugo
2. Server : Github page

이렇게 만들거다.

사용 방법

어차피 난 이제 안쓰니까 나중 빠르게 리마인딩하기 위해 액기스만 딱딱 적어놓는다.

1. 프로젝트 만들기 (첫 번째 repository)

hugo new site <PROJECT_NAME>

2. 테마 다운받기

cd themes
git clone <THEME_GITHUB_REPOSITORY_URL>

3. 테마 적용하기

# 1. config.toml or .yaml 파일 열기
# 2. theme = "<THEME_NAME>" 값 수정

4. 글 생성하기

cd /contents/<FINE_NAME>
hugo new <FILE_NAME>

5. 동작 확인하기

# http://localhost:1313
hugo server -D

6. 빌드하기

# 1. git push
git init
git remote add origin <첫_번째_REPOSITORY_URL>
# 2. 빌드 결과로 github page를 띄울 git repository 생성하기 (두 번째 repository)
git init
git remote add origin <USER_ID.github.io>
git submodule add -b main <두_번째_REPOSITORY_URL>
# 3. 빌드하기
hugo -t <THEME_NAME>
# 4. push 순서 (public -> project)
cd public
git add .
git commit -m ""
git push origin main

cd ..
git add .
git commit -m ""
git push origin main

Theme overiding

테마를 수정할 때는 /themes/ 안의 코드를 수정하는 것이 아니다.

• 문제 발생 시 원본이 있어야 복구가 가능함
• 테마를 만든 사람에 대한 존중

대신 theme overriding을 이용한다.

테마의 파일 적용 순서

• 원래 프로젝트의 layouts
• /theme/layouts

if fName in layouts{
	send("/layouts/partials/fName")
}else{
	send("/theme/<THEME_NAME>/layouts/partials/fName")
}

테마 디렉터리 레이아웃

• /themes/<THEME_NAME>
  • archetypes
  • layouts
  • static
  • data
  • content

1. archetypes
   • default.md : default.md파일에 기재된 front matter(---)는 $ hugo new <FILE_NAME> 실행 후 만들어진 문서에 기본으로 생성되는 front matter이다.
2. layouts
   • 블로그에 적용되는 html을 코딩한다.
3. static
   • 빌드 후에도 그대로 옮겨지므로 css나 이미지 등을 저장한다.
4. content
   • 이 폴더가 있는 모든 파일/폴더는 블로그에서 페이지로 생성된다.
5. data
   • json이나 csv 파일 등을 저장해서 가져다쓸 수 있다.

html 속에 이중 중괄호 {{ }}를 통해 Go Templates를 코딩할 수 있다.

Context

• . : 현재 context
  • 현재 페이지의 제목 : {{.Title}}