1. Github 블로그

" 개발자라면 Github 블로그 하나 정도는 있어야지! "

라는 말을 어디선가 주워듣고 Github로 블로그를 만들어보자, 결심하게 되었다.

그런데 생각보다 진입장벽이 낮지는 않았고, 익숙해지는 데 생각보다 시간이 걸린 데다 시행착오도 제법 겪으며 결국 어찌저찌 성공은 하였다(그 결과물을 지금 보고 계십니다).

그래서 관련 내용을 정리해서 포스팅하면 Hugo로 블로그를 만들어 Github로 호스팅하고자 하는 사람들이 조금이나마 도움을 받을 수 있을 듯 하여, 첫 포스팅 주제는 블로그를 만드는 방법으로 결정!

2. 준비물

각 항목 클릭 시 해당 설치 파일을 받을 수 있는 웹사이트로 링크 (OS에 맞는 최신 버전을 다운로드)

• Git
• Hugo
  • Hugo theme (마음에 드는 테마 하나 선택)
• Typora (Markdown 에디터)

3. 설치하기

3.1. Git 설치

• Hugo blog만 사용하고자 하는 경우 설치 옵션 그대로 유지
• 명령 프롬프트에 git version를 입력하여 잘 설치되었는지 확인

3.2. Github Repository 2개 만들기

• '(Username).github.io' : 빌드 결과인 블로그 HTML 파일을 저장하는 Public Repository, 이름 양식 필히 준수 (everimind4.github.io)

• Hugo blog 전체 파일을 관리하는 Private Repository, 이름 자유롭게 설정 (필자의 경우 blog로 설정)

3.3. 로컬 디렉토리 생성 및 구성

• C:\Hugo\bin 디렉토리 생성 후 다운로드한 Hugo Zip 파일 압축 해제

• Windows + Q ▶ 시스템 환경 변수 편집 ▶ PATH에 C:\Hugo\bin 추가

• Git Bash 실행 후 C:\Hugo 위치에서 $ hugo new site blog 명령으로 로컬 컨텐츠 디렉토리 생성

  • C:\Hugo\blog에서 dir 명령으로 디렉토리 구조를 확인 가능
  • 이후, Git Bash 속성에서 시작 위치를 C:\Hugo\blog로 설정하면 작업이 편해집니다!

3.4. 테마 다운로드 및 설정

• 2번에서 고른 테마의 github 저장소 주소를 복사
• ~\blog 경로에서 $ git init 명령 실행 후 $ git submodule add (복사한 주소) themes\(테마 이름) 명령으로 테마를 submodule로 추가
• config.toml 파일의 내용을 각 테마 Github 페이지의 예시 파일을 보면서 수정
  • toml이 아닌 yml/yaml 파일만 존재하는 경우 YAML to TOML converter 등을 사용

3.5. Github 원격 저장소와 로컬 디렉토리 연결

• Github에 만든 blog 저장소(본인이 설정한 이름)와 C:\Hugo\blog 디렉토리 연결
  • C:\Hugo\blog로 이동
  • $ git init
  • $ git remote add origin https://github.com/everimind4/blog.git
• everimind4.github.io 저장소를 blog의 submodule로 등록
  • $ git submodule add -b main https://github.com/everimind4/everimind4.github.io.git public

3.6. 컨텐츠 생성

• $ hugo new post/test.md 명령을 실행하면 blog\content\post\ 위치에 test.md 파일이 생성됨
• Typora 등의 Markdown Editor를 사용하여 md 파일 내용 작성 (자세한 방법을 다음 글에서 다룸)
• $ hugo server 또는 hugo server -D 명령어로 웹서버 실행
  • http://localhost:1313/에 접속해서 확인
  • md 파일의 Draft 옵션이 true로 설정된 경우 빌드에서 제외됨
  • -D 옵션은 md파일의 Draft 문서들도 확인 가능한 옵션 (다른 옵션은 여기서 확인)

3.7. 컨텐츠 업로드

• C:\Hugo\blog로 이동
• $ hugo -t (테마이름) 명령으로 테마가 적용된 블로그 내용을 ~\public에 생성
• $ cd public public 디렉토리로 이동
• $ git add . 수정된 파일 내역 저장
• $ git commit -m "(description)" 변경 내용 commit
• $ git push origin main everimind4.github.io에 커밋 내용 Push
• blog 저장소에도 변경 내용 Push
  • $ cd .. public의 한 단계 상위 디렉토리인 blog로 이동
  • $ git add .
  • $ git commit -m "(description)"
  • $ git push origin main

4. 마무리하며

여기까지 따라왔다면 블로그에 글을 작성하고 빌드하여 블로그의 기초를 다지는 방법은 모두 배우셨습니다.

이어지는 글들을 통해 아래 내용들을 다룰 예정입니다.

• 블로그 세부 설정
  • config.toml 파일의 세부 내용을 수정하기
  • Disquss 등의 댓글 위젯 추가하기
  • Google Analytics 연동하기
  • sitemap.xml을 추가해 검색 엔진에 노출시키기
• 마크다운 에디터 Typora를 사용해 글쓰기
  • 글 작성 Tips
  • 기본적인 문법 및 단축키