[초보자를 위한] Hugo + GitHub Pages로 정적인 조합을 만들어보도록 하겠습니다.

※ 이 기사는 자신의 블로그 글 재구성한 것입니다.
후속 문장

입문

지인이 GitHub로 Resume를 공개하는 것을 보고 나도 한번 해보고 싶다.

완성물

URL 이전의 내용이 변하지 않도록 취지를 전달할 수 없는gif
URL:
https://nkjzm.github.io/
GitHub Pages 저장소:
nkjzm/nkjzm.github.io

기술 선정

관리: GitHub Pages

정적 사이트 생성 도구: Hugo(+Academic 주제)

최대한 간단하게 공개하고 표기가 떨어지는 점을 선택했다.

GitHub Pages(채택)

자체 관리 서버 필요 없음

GitHub에 대한 작업만으로 가능

자신의 도메인 지원

인터넷과 엔지니어가 아니기 때문에 스스로 맡기지 않는 것이 매력적이다.GitHub는 평소에 사용하는 서비스이기 때문에 안심도 됩니다.
또한 표준 URL은 사용자 id로 발행하는 곳을 좋아합니다.(예: https://[user_id].github.io/

Jekyll(미채택)

GitHub에서 개발한 정적 사이트 생성 도구

GitHub Pages 공식 지원

Markdown 지원

언뜻 보니 좋은 것 같다.실제로 시도할 때 브라우저에서 Github만 조작하면 페이지를 만들 수 있어 좋은 지원을 받았다.
Adding a Jekyll theme to your GitHub Pages site - GitHub Help
하지만 맞춤형을 원하는 상황에서 설정이 복잡해지고 매번 반영을 기다려야 하는 것은 스트레스다.널리 사용되는 도구이기 때문에 능숙하게 사용할 수 있다면 편리하지만 자신의 경우 후술한 Hugo를 사용하기 쉽다.

Hugo

정적 사이트 생성 도구

Markdown 지원

정적 파일 생성 속도

큰 차이는 없지만 가져오기 쉽고 생성 속도가 좋습니다.
하지만 지킬과 달리 공식적인 지지가 없어 일부만 힘들다.

Github Pages 사양 이야기

2016년경 도입 이후 몇 가지 규격의 변경이 있었기 때문에 간단하게 정리하고 싶습니다.gh-pages 몇 가지 지점의 정보가 나왔지만 현재 상황이라면 사용할 필요가 없기 때문에 참고하지 않는 것이 좋다.

페이지 분류

GitHub Pages에는 사용자 페이지와 프로젝트 페이지 두 가지 사양이 있습니다.
　　　　　
사용자 페이지
프로젝트 페이지
용도
제품 조합 및 응답
프로젝트 웹 페이지
저장소 이름[user_id].github.io [user_id].github.io/[repository_name]부여된 URLhttps://[user_id].github.io/ https://nkjzm.github.io/[repository_name]/객체 게시
master 지점 바로 아래
master 지점 바로 아래 또는 지정한 지점 바로 아래docs 폴더
프로젝트 페이지에서는 docs 폴더 아래를 게시 대상으로 설정하여 프로젝트의 소스 코드 관리와 같은 저장소에서 관리할 수 있습니다.
이에 비해 사용자 페이지는 마스터 지점 바로 아래에서만 공개할 수 있는 제한이 있습니다.이번에는 Git 관리로 원본 파일을 생성하려면 후술 작업이 필요합니다.

사용 방법

위의 공개 객체에 파일을 배치한 후 저장소의 설정 탭에서 GitHub Pages 항목을 찾습니다.
Source에서 게시할 분기를 설정하고 저장합니다(사용자 페이지에 master가 자동으로 설정된 것 같습니다).
한 가지 주의할 점은 공개 대상이 업데이트된 경우 반영하는 데 시간이 좀 걸린다는 것이다.
push 다음에 다음 메시지가 표시됩니다.

Your site is ready to be published at https://nkjzm.github.io/

하면, 만약, 만약...

Your site is published at https://nkjzm.github.io/

에서 설명한 대로 해당 매개변수의 값을 수정합니다.최소 30초 정도.
실패하면 실패 메시지가 표시됩니다. 메일로 알려 줍니다.이 경우 게시된 페이지가 손상되지 않고 실패 전 버전이 계속 표시됩니다.
참조: GitHub Pages를 사용하여 웹 페이지 빠른 게시 - Qiita

Hugo 배포

나는 아래의 페이지를 보고 가져왔다.
Hugo 및 GitHub Pages에 정적 사이트 게시 - Qiita
간단히 말하다
(brew가 Mac에 설치되어 있는 경우)

$ brew install hugo
$ hugo new site hugo-test
$ cd hugo-test

# サーバー起動
$ hugo server 

# 静的ファイル生成
$ hugo

상기 상태라면 아무것도 표시되지 않지만 theme를 설정하여 자신의 페이지를 맞춤형으로 만들 수 있습니다.

로컬 서버 미리 보기

$ http://localhost:1313

에서 설명한 대로 해당 매개변수의 값을 수정합니다.
이것은 상당히 우수해서 시동이 걸리면 매번 파일의 변경이 자동으로 업데이트됩니다.
서버를 낮출 때Control + C 하지 않으면 프로세스가 남을 수 있으므로 주의해야 한다.

Github Pages 설정

hugo 명령은 public 아래에 정적 파일을 생성하여 공개 객체로 설정하여 GitHub Pages로 표시합니다.그러나 GitHub Pages의 경우 공개 대상으로 선택할 수 있는 폴더는 바로 아래 또는 master 폴더이므로 설정을 변경해야 합니다.docs 파일의 config.toml 에 정의하도록 설정합니다.publishDir = "public" 다음 폴더를 설정할 때 docs 를 지정합니다.
사용자 페이지의 경우 publishDir = "docs" 바로 아래에만 공개할 수 있는 제한이 있다고 하지만 후술 방법으로 대응할 수 있기 때문에 master 만 지정하면 된다.
소스 코드를 관리할 필요가 없는 경우 docs 폴더를 Git의 루트 디렉토리로 사용하거나 publishDir 프로젝트 바로 아래에 토출할 수 있습니다.
참조: Host on GitHub | Hugo

대략적인 사용자 정의 이미지

사용된 주제에 따라 다른 부분도 있습니다. 자세한 내용은 각 주제의 자술 파일과 문서를 참조하십시오.
나는 모든 주제의 견본 페이지를 복사한 후에 필요한 부분을 바꾸는 방법을 이해하기 쉽다고 생각한다.

전체 사이트에 대한 메타 정보 등은 publishDir = "./"에 기술될 것이다.

이미지는 config.toml 아래에 저장됩니다.

각 요소와 페이지의 내용static/img은 다음과 같다.

content 첫 페이지의 각 요소의 내용을 설명합니다.

content/home 등 기사의 내용 등을 기술한다.

Academic 주제

광범위하게 이용되는 개원의 주제다.

MIT 라이센스

응답효소

Academic | Hugo Themes
만약 잘 쓰지 못한다면 나의 자료 파일 라이브러리를 참고하세요.
nkjzm/nkjzm.github.io

동일한 저장소에서 Hugo 소스 및 공용 파일 관리

GitHug Pages의 사용자 페이지는 master 브랜치 바로 아래에 있는 파일만 공개할 수 있는 제한이 있기 때문에 직접 실행할 수 없습니다.
따라서 아래의 보도는 참고가 되었다.
GitHub Pages의 User Pages에서 문서 루트 디렉토리를 변경하려면 master-Qiita 를 죽입니다.
업데이트를 하려면 다음과 같이 okcontent/post가 publishDir인 경우입니다.

$ git push origin source
$ git subtree push --prefix docs/ origin master

한마디로 Git의 hooks 기능docs으로 두 번째 줄의 조작을 자동화하고 싶습니다.
참조: git pre-push hook에서 master 지점으로 push 할 때 확인 알림 - Qiita
참조: git/hooks--pre-push.sample at master · git/git
하지만 pre-push 동작이 없어 포기했다.
while 이전의 줄에서 while read local_ref local_sha1 remote_ref remote_sha1 설명하면,push 시 출력echo "hello",while에서 처리하지 않음
만약 누가 원인을 생각한다면, 반드시 나에게 알려 주십시오

마지막

Github Pages와 Hugo를 사용하면 자신의 투자조합 사이트를 쉽게 만들 수 있습니다.
최근에 나는 이렇게 하면 자신의 정보를 내려다볼 수 있는 페이지가 매우 의미가 있지 않을까 생각한다.
나는 평소에 기술과 수출을 자랑스럽게 여기며 트위터에 가능한 한 주위 사람들에게 메시지를 보내는 것에 주의한다.하지만 앞으로는 이런 발신을 참조하기 어렵다.실제로 어느 정도 교류가 있는 사람이라도 그 사람이 과거에 무엇을 했는지 모르는 사람이 많다.그래서 나는 자신의 실적, 기능, 지향성 등 통일된 장소의 필요성을 다시 한 번 느꼈다.
자신의 지향성으로서 직접적인 대화가 아니라 수출을 통해 자신의 생각을 이해하고 싶지만 이를 위해 다른 사람에게 자신의 수출을 전달하는 노력을 게을리해서는 안 된다고 생각합니다.

감사 인사

디버깅에 협조해 주셔서 감사합니다@pagu0602🙏