Jekyll을 사용하여 GitHub Pages에서 좋은 느낌의 정적 페이지를 게시하는 단계를 요약합니다. 이미 Qiita에서도 몇 가지 사례가 있습니다만, 하나의 순서로서 참고까지.
OS는 mac을 가정합니다.

사전 지식

GitHub Pages

… GitHub에서 정적 웹 페이지를 호스팅하는 메커니즘. GitHub에서 소스 관리 & 공개를 한 번에 할 수 있기 때문에 매우 편리.

Jekyll

… Ruby의 도구로 markdown 등에서 정적 페이지를 생성한다. GitHub Pages에서도 사용되며 Jekyll 프로젝트를 GitHub에 등록하면 페이지를 생성 할 수 있습니다

환경 준비

우선 Jekyll이 움직이는 환경을 정돈합니다. Ruby가 움직이는 환경이 있으면 괜찮습니다.
rbenv, ruby-build, ruby, bundler를 도입한다.

rbenv, ruby-build, ruby

원래의 Ruby를 넣어도 좋지만, 버전 관리를 위한 rbenv,ruby-build를 도입해 둡니다.
↓ homebrew 경유로 rbenv, ruby-build를 넣는 경우

$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

ruby의 지정된 버전을 설치하고 기본적으로 사용하는 버전으로 지정. 디폴트로 하고 싶지 않은 경우는 rbenv local [x.x.x] 라고 하면(자) 그 디렉토리 이하에만 적용됩니다.

$ rbenv install 2.6.0
$ rbenv global 2.6.0

bundler, Gemfile

다음으로 jekyll을 소개합니다. jekyll은 Ruby 패키지 (Gem)이므로 Gem 관리 도구 인 bundler를 소개합니다.
bundler도 gem이므로 우선 bundler로부터.

$ gem install bundler

bundler는 Gemfile에 설치하고 싶은 gem을 열거하고 관리하므로 Gemfile에 jekyll을 쓰는 순서가 됩니다만, GitHub Pages에서의 이용을 전제로 하는 경우는 github-pages 라고 하는 gem을 이용하면, GitHub Pages에 적절한 환경을 구축할 수 있습니다.

source "https://rubygems.org"
gem 'github-pages', group: :jekyll_plugins

위와 같이 Gemfile을 작성하고 install을 실행합니다.

$ bundle install --path vendor/bundle

꽤 많은 양의 젬이 도입된다고 생각합니다.

동작 확인

동작 확인을 위해 적절한 Markdown을 작성해 봅시다.index.md를 만들고 jekyll의 개발 서버 모드에서 실행하십시오.

$ bundle exec jekyll s

// ディレクトリを指定する場合は-sオプション
// $ bundle exec jekyll s -s hoge

이제 서버가 시작되고 htp://127.0.0.1:4000/을 참조하여 웹 페이지화된 상태를 확인할 수 있습니다.

↓이하는 jekyll new 로 신규 프로젝트 만들 경우의 샘플 페이지

테마 변경

그리고는 가시가시 index.md를 써 가면, 최소한의 페이지 작성은 할 수 있습니다만, 조금 테마를 바꾸고 싶어졌으므로 변경 순서입니다.

jekyll의 테마는 여러분이 공개하고 있으므로 좋아하는 것을 찾아 오는 것도 좋지만, GitHub Pages로 대응하고 있는 것이라면, 설정 파일에 1행 지정하는 것만으로 괜찮습니다. 매우 편합니다.

이하의 테마가 대응하고 있는 것 같습니다.
Supported themes

테마를 설정하려면 _config.yml를 만들고 theme: jekyll-theme-[テーマ名]라는 한 줄을 추가합니다.

_config.yml

#theme: jekyll-theme-cayman
#theme: jekyll-theme-midnight
#theme: jekyll-theme-slate
theme: jekyll-theme-minimal

이런 느낌.

공개

그리고는 공개입니다.
GitHub에서 [アカウント名].github.io라는 리포지토리를 만듭니다.
그리고는 master 브랜치에 push 하면 https://[アカウント名].github.io/ 로 페이지를 참조할 수 있게 됩니다.
훌륭합니다.

혼잡하게 만든 예 → htps : // 기주 b. 이 m / stk에서 v / stk에서 v. 기주 b. 이오
좋은 느낌으로 도커 화하는 친구의 예 → htps : // 기주 b. 코m/신2로/신2로. 기주 b. 이오

참고

Using Jekyll as a static site generator with GitHub Pages

Jekyll - GitHub Pages 정보

Github Pages의 기본 테마를 로컬에서 Jekyll 서버에서 확인할 수 있도록