Web page 생성과 Github upload
- md파일을 html 정적 페이지로 변환하고 github 에 올립니다.
- github repository 생성 및 git 사용법은 생략됐습니다. (Update: Dec 17, 2019)
Configurations
- OS: Windows 10 (x64)
- Browser: Google Chrome
- Hugo: v0.61.0
- Hugo theme: hugo-tranquilpeak-theme (0.4.7-BETA)
- Github repositories: BlogHugoContents, 010000.github.io
Generate static pages & Upload it on Github
1. Hugo\blog 내 생성된 폴더와 파일을 github push할 때 3개의 폴더로 구분하면 이해가 쉽습니다
1.1. public 폴더 내 파일들은 {userid}.github.io 에 올려져 (공개된)실제 웹페이지로 노출됩니다
1.2. hugo 테마가 저장된 themes 폴더는 별도 git 설정을 하지 않으면 github에 업로드 되지 않습니다
1.3. 1.1~1.2를 제외한 나머지는 소스관리 목적상 별도 github repository에 업로드하는 것이 좋습니다
(즉, 1.1 public 폴더에 객체들만 업로드되어도 원하는 정적 페이지 웹서비스가 가능합니다)
S:\Hugo\blog> dir
12/15/2019 01:19 <DIR> .
12/15/2019 01:19 <DIR> ..
08/31/1754 07:43 <DIR> public 1) html로 변환 저장. {userid}.github.io 로 업로드
12/13/2019 13:20 <DIR> themes 2) hugo 테마
12/13/2019 11:04 <DIR> archetypes 3) 나머지 md 문서, css, js 등의 contents 로
12/13/2019 13:42 <DIR> content 별도의 github repository 로 관리
12/13/2019 11:04 <DIR> data
12/13/2019 13:53 <DIR> layouts
12/13/2019 13:40 <DIR> resources
12/13/2019 13:48 <DIR> static
12/16/2019 14:32 9,254 config.toml
2개 파일 9,361 바이트
10개 디렉터리 63,018,098,688 바이트 남음
2. Hugo\content 폴더 내 md 파일 작성이 완료됐다면 hugo 실행으로 정적 페이지를 생성합니다
2.1. 사용중인 hugo 테마명 확인
2.2. 정적 페이지 생성
*주의 - Hugo\content 폴더 내 (md)문서 파일이 UTF-8 인코딩이 아니면 오류가 발생할 수 있습니다
S:\Hugo\blog> dir themes
12/13/2019 13:20 <DIR> .
12/13/2019 13:20 <DIR> ..
12/13/2019 13:37 <DIR> hugo-tranquilpeak-theme
0개 파일 0 바이트
S:\Hugo\blog> hugo -t hugo-tranquilpeak-theme
Building sites (…)
| EN-US
+------------------+-------+
Pages | 22
Paginator pages | 0
Non-page files | 0
Static files | 8
Processed images | 0
Aliases | 7
Sitemaps | 1
Cleaned | 0
Total in 119 ms
2.3. blog\public 폴더 이동 후 git push 하면 {userid}.github.io url로 생성된 페이지를 볼 수 있습니다
*Github repository 생성과 git 설정이 선행되어야 아래 git push 가능합니다
S:\Hugo\blog> cd public
S:\Hugo\blog\public> git add .
S:\Hugo\blog\public> git commit -m "first commit pages"
S:\Hugo\blog\public> git push origin master
*Github 이 처음이라면… Git간편안내서
*Pro Git ebook
3. Submodule 로 Hugo repository 관리하기
hugo는 jekyll과 달리 github에서 자동으로 빌드를 해주는 것이 아니라 내가 빌드해서 만든 파일을 github page 기능으로 띄우는 것이다. 따라서 전체 컨텐츠를 저장할 곳과 빌드 결과로 github page를 띄울 곳, 이렇게 두개의 git repository가 필요하다.
https://ialy1595.github.io/post/blog-construct-1/
; 위의 2번과정까지만 완료해도 원하는 웹서비스가 되지만 관리 목적상 submodule 를 이용한 repository 구성도 참고로 남긴다. 지나고 나면 잊어버리도해서… :-)
*Contents 관리용 repository 이름은 자유롭게 생성해도 됩니다
*{userid}.github.io 의 repository는 github 계정과 동일하게 생성해야 합니다
임의로 생성시 다른 계정에서 사용중일 경우 페이지가 안뜨거나 관계없는 페이지가 뜨는 현상이 보일 수 있습니다
*Repositories
Contents용 - BlogHugoContents
Public 웹서비스용 - {userid}.github.io
S:\Hugo\blog> git init
# $ git remote add origin <contents용 repository url>
S:\Hugo\blog> git remote add origin https://github.com/0l0000/BlogHugoContents.git
# git submodule add -b master <public용 repository url> public
# S:\Hugo\blog 폴더에 public 폴더가 있으며 오류가 발생하니 삭제할 것
S:\Hugo\blog> git submodule add -b master https://github.com/0l000/0l0000.github.io.git public
'public' does not have a commit checked out
# $ hugo -t <테마 이름>
S:\Hugo\blog> hugo -t hugo-tranquilpeak-theme
# public 폴더에서 push 후 blog 폴더에서 push 한다.
S:\Hugo\blog> cd public
S:\Hugo\blog\public> git add . && git commit -m "커밋 메세지" && git push origin master
S:\Hugo\blog\public> cd ..
S:\Hugo\blog> git add . && git commit -m "커밋 메세지" && git push origin master
;Linux OS에서 SSH key로 설정하는 경우
(ssh.key 생성과 github에 등록까지 완료된 환경에서 진행)
~]$ cd ~/Hugo/Blog
~]$ git remote add origin git@github.com:0l0000/BlogHugoContents.git
~]$ cd ~/Hugo/Blog/public
~]$ git submodule add -b master git@github.com:0l000/0l0000.github.io.git public
4. 브라우저에서 확인
https://{userid}.github.io/