치맥세미나 1회 발표 Hugo를 활용한 블로그 구축 (박지훈)

1. Hugo를 활용한 블로그 구축
2018.12.21 박지훈

4. 루비 기반
제일 많이 사용하는 Generator
한글 레퍼런스 많음
GitHub Pages의 내부 엔진으로 사용
느리다는 단점

5. Go languages 기반
빌드가 빠름
한글 레퍼런스가 없음

7. 성능이 저하되면 안되고
빌드가 빨라야함

8. Hugo 설치
C:Hugo 폴더 생성
C:Hugobin 하위 폴더 생성
(https://github.com/gohugoio/hugo/releases) 다운받은 파일 해제
set PATH=%PATH%;C:Hugobin 명령으로 환경변수 추가
hugo version / hugo help 로 동작 확인

9. Hugo Static Site 생성
hugo 폴더에 사이트생성
- hugo new site [블로그명] 명령으로 site생성

10. Hugo Static Site 구조
항목 내용 비고
archetypes 컨텐츠 기본 구조 정의
default.md 파일에서 마크다운 구조 설
정
config.toml Hugo 블로그 전체 설정 파일
content/posts 블로그에 올라갈 마크다운 파일 위치
data
태그, 카테고리, 저자 등 기타 항목 정
의
layouts, static 블로그의 템플릿 및 정적 리소스 위치
현재는 테마를 사용하기 때문에 사용안
함
themes 사용할 Hugo 테마 위치
public 블로그 빌드 타켓 폴더 gh-pages 브랜치에 Push될 결과물

11. Hugo 테마 적용 및 포스트 생성
Hugo theme 적용
- Hugo theme 페이지에서 원하는 테마 선택
- theme폴더에 테마 다운로드(ex:https://themes.gohugo.io/hugo-blog-jeffprod/)
Config.toml 파일 설정

12. Github 세팅
Github 저장소 세팅
- Hugo의 컨텐츠와 소스파일들을 포함할 <YOUR-PROJECT> 생성
- 렌더링 된 버전의 Hugo 웹사이트를 포함할
<USERNAME>.github.io 생성
Github remote와 submodule 설정
- git init
- git remote add origin https://github.com/qkrwlgnstm/blog.git
- git submodule add -b master
https://github.com/qkrwlgnstm/qkrwlgnstm.github.io.git public

13. Hugo 테마 적용 및 포스트 생성
포스트 생성
- 신규 블로그 포스트 생성
- 신규 블로그 포스트 작성

14. Hugo 테마 적용 및 포스트 생성
포스트 생성
- 페이지 확인 (http://localhost:1313/ 로 확인 가능)

15. Hugo 테마 적용 및 포스트 생성
테마적용
- 테마 적용 웹사이트 생성
(hugo 명령어를 통해 테마가 적용된 블로그 내용 퍼블리싱)

16. Github 업로드 및 뷰페이지 확
인
Github 업로드(blog저장소 / public 폴더 모두 업로드)
- cd public
- git add .
- git commit –m “커밋메세지”
- git push origin master
- 블로그 저장소도 동일하게 변경내용 푸시

17. 끝