Jekyll 자습서를 사용하여 Github 페이지 웹 사이트 설정

이 자습서는 my github에 교차 게시되어 있습니다.
제킬은 정적 사이트 생성기이다.Jekyll이 있으면 가격을 내려 당신의 페이지를 쓸 수 있습니다. 이것은 레이아웃 설정에 따라 당신의 html 페이지를 구축할 것입니다.예를 들어, 작성 중인 태그 파일이 project1.markdown이면 Jekyll에서 project1.html 파일을 구성합니다.맞춤형 제작을 원하지 않으면 레이아웃의 html, css 또는 그 어떠한 내용도 조정할 필요가 없습니다.개별적으로 사용하는 Jekyll 테마는 Bootstrap 사용을 고려하여 사용자 정의 (Bootstrap 사용) 를 허용하고 있으며, 제공된 필드를 사용하여 쉽게 변경할 수 있습니다.

라이브 버전
내 서류 가방의 실시간 버전 보기 https://azukacchi.github.io/

가설

숙지git

프로젝트 문서가 준비되어 있으며 가격은

자습서 링크

setting up jekyll (Windows)

free jekyll themes

github pages official documentation

"just-the-docs" theme source code

"just-the-docs" theme documentation

"just-the-docs" github pages DEMO

기타 읽기

simplest tutorial 웹 사이트

을 로컬에서 실행할 수 없습니다.

층계

Ruby 및 Jekyll 설치
이 페이지 for Windows의 지침을 따르십시오.

프로젝트 폴더 준비
우선 로컬에서 페이지를 준비하고 테스트할 것입니다.이러한 첫 번째 단계는 this에서 수정된 것이다.

새 프로젝트 폴더를 만듭니다.메모리 라이브러리의 이름이 아니기 때문에, 기본github 페이지가 myblog이기 때문에, 예를 들어 username.github.io을 선택하십시오.

명령 프롬프트를 열고 프로젝트 폴더로 이동합니다.

게시할 사이트의 디렉터리를 선택하십시오.

저장소의 루트 디렉터리 / 발표 사이트를 선택하면 github 페이지가 루트 디렉터리에 직접 표시됩니다. 예를 들어 username.github.io.이 옵션을 선택하면 새 디렉토리

을 만들 필요가 없습니다.

저장소의 특정 폴더 (예: /docs) 에서 사이트를 발표하는 것을 선택하면,github 페이지가 이 페이지에 표시됩니다. 예를 들어 username.github.io/docs.이 옵션을 선택한 경우 새 디렉토리를 만들고 폴더로 이동합니다.

mkdir docs
# Creates a new folder called docs
cd docs

현재 디렉토리에 새 Jekyll 사이트 만들기

jekyll new

예를 들어 '문서만' 테마를 설치합니다.새 Jekyll 웹 사이트의 기본 주제는 "minima"입니다.

gem install just-the-docs

Jekyll 웹 사이트의 Gemfile에 추가

gem "just-the-docs"

Jekyll 웹 사이트의 _config.yml에 Docs 주제 추가

theme: "just-the-docs"

로컬 Jekyll 서버를 실행하고 브라우저 http://localhost:4000에서 로컬 사이트를 엽니다.

bundle exec jekyll serve

페이지 변경
이 단계에서, 일부 페이지를 추가하고, 사용자 정의를 추가하며, 로컬에서 테스트할 수 있습니다._config.yml 파일을 변경할 때 서버를 재부팅하고 다음 명령줄을 다시 실행하지 않으면 업데이트가 적용되지 않습니다. bundle exec jekyll serve항상 테마 문서를 보고 페이지를 작성하고 설정하세요!테마 CSS를 맞춤형으로 만들고 싶을 때 테마 문서를 보십시오.
페이지 설정이 완료되고 사이트가 로컬에서 정상적으로 실행된 후에 다음 단계를 계속합니다.

기존 프로젝트를 Github로 푸시

Github에 새 저장소를 생성합니다.저장소 이름을 입력합니다.사용자 사이트를 만들려면 저장소의 이름이 <yourusername>.github.io이어야 합니다.파일을 로컬에서 밀어넣기 때문에 파일을 추가하지 마십시오.

프로젝트 폴더의 루트 디렉터리에서 일하지 않으면 루트 디렉터리로 이동하십시오.현재 디렉터리에서git 저장소를 초기화합니다. (루트 폴더여야 합니다.)

git init

제킬이 만든 파일을 편집합니다.

은gem "jekyll"로 시작하는 행의 시작 부분에 "#"을 추가하여 해당 행을 주석 처리합니다.

# gem "github-pages"에서 시작하는 줄을 편집하여github 페이지gem를 추가합니다.이 행을 다음과 같이 변경합니다.

gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

GITHUB-PAGES-VERSION을 지원되는 최신 버전의 GITHUB-PAGES-gem으로 교체합니다.버전 보기: "Dependency versions".

파일 저장 및 닫기

supported themes이 아닌 Jekyll 테마를 사용하는 경우 _config.yml 파일을 편집하십시오.예를 들어, 문서 전용 항목에 대해 theme: "just-the-docs을 다음과 같이 변경합니다.

remote_theme: pmarsceill/just-the-docs

다른 주제에 대한 자세한 내용은 주제 문서를 참조하십시오.

명령줄에서 bundle update

실행

원격으로 GitHub 저장소 추가

git remote add origin https://github.com/<username>/<username>.github.io.git

그런 다음 파일을 추가, 제출 및 원격으로 푸시

git add .
git commit -m "initial commit"
git remote -v
git push origin master

github 페이지를 엽니다.예를 들어 테마를 불러올 수 없으면 이메일을 보십시오!문제가 발생하면 페이지 구축에 실패하거나 페이지 구축이 약해진 전자메일을 받을 수 있습니다.

사용자 정의 CSS 사용
사용자 정의 CSS (예를 들어 새 스타일을 변경하거나 추가하는 것) 를 사용하여 로컬에서 실행하고 있다면, 테마 디렉터리에 있는 scss 파일을 편집해서 테마를 편집할 수 있습니다.예를 들어, 문서 전용 주제에 대한 사용자 정의scss 파일은 다음 디렉토리에 있습니다.

C:\Ruby27-x64\lib\ruby\gems\2.7.0\gems\just-the-docs-0.3.3\_sass\custom\custom.scss

이 bundle info --path "THEME-NAME"을 사용하여 설치된 테마 디렉터리의 경로를 확인하십시오
단, Github 페이지에서 페이지를 실행할 때, 디렉터리와 파일을 게시 사이트의 폴더에 두어야 합니다.각 주제의 정확한 디렉토리는 다릅니다. 예를 들어, 문서 전용의 새 파일 디렉토리는 _sass/custom/custom.scss입니다.새 파일의 컨텐트를 추가할 때는 주제 문서를 따라야 합니다.최소값 항목은 here의 예입니다.