이 저장소는 소프트웨어 개발자로서의 작업을 보여주는 개인 웹 사이트를 시작하는 데 필요한 코드를 제공합니다. 또한 GitHub 저장소에서 코드를 관리하면 사진, 바이오 및 리포지토리를 포함한 소유자의 프로필 정보로 웹 페이지를 자동으로 렌더링합니다.
그러나 귀하의 개인 웹 사이트는 개인화되기를 기다리고 있습니다. 언어 나 산업과 같은 소프트웨어 개발에 관심있는 특정 영역을 강조하는 공간이 포함되어 있습니다. 그리고 다음 위대한 블로그 게시물을 게시하기 위해 서 있습니다.
Jekyll (웹 사이트 구축), GitHub 페이지 (웹 사이트 호스팅) 및 GitHub의 API (웹 사이트를 자동으로 컨텐츠로 채우기 위해)의 조합을 사용하여 가능합니다.
github/personal-website repo를 포크합니다 당신은 자신의 "개인 웹 사이트 스타터"저장소 사본을 만들므로 사용자 정의 할 프로젝트가 있습니다. "포크"는 저장소의 사본입니다. 따라서 github/personal-website 저장소 꼭대기에 "포크"를 선택하십시오.
포크 리포지토리를위한 집을 찾은 후에는 당신의 것입니다. 당신은 주인이므로 원하는 경우 게시 할 준비가되었습니다.
로컬 웹 개발 환경에서 웹 사이트를 관리하려면 Ruby를 사용할 것입니다.
포크 리포지토리를위한 집을 찾은 후에 는 복제하십시오 .
Jekyll은 대부분의 시스템에 설치할 수있는 루비 보석입니다.
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
GitHub에서 개인 웹 사이트의 코드를 호스팅하면 GitHub 페이지를 통해 무료 호스팅을 지원합니다.
가장 빠른 접근 방식은 저장소 username.github.io 바꾸는 것입니다. 여기서 username GitHub 사용자 이름 (또는 조직 이름)입니다. 그런 다음 다음에 저장소 master 브랜치로 변경 사항을 푸시하면 웹에서 username.github.io 주소로 액세스 할 수 있습니다.
사용자 정의 도메인을 사용하려면 github.com에서 저장소의 "사용자 정의 도메인"설정에 추가 할 수 있습니다. 그런 다음 DNS 제공 업체와 도메인을 등록 및/또는 구성하십시오.
귀하의 웹 사이트이며 소스 코드를 제어합니다. 따라서 원하는 경우 모든 것을 사용자 정의 할 수 있습니다. 그러나 웹 사이트를 시작할 때 고려할 수있는 소수의 빠른 사용자 정의를 제공했습니다.
대부분의 사용자 정의는 리포지토리의 _config.yml 파일을 수정하여 몇 초 만에 수행 할 수 있습니다. 새로운 변경 사항을 저장할 때마다 로컬 서버를 다시 시작하여 Jekyll 기반 웹 사이트를 올바르게 재건하십시오.
jekyll serve 기본적으로 귀하의 웹 사이트는 왼쪽 정렬 된 "사이드 바"로 표시되는 사진, 이름 및 기본 정보와 함께 대형 스크린 장치에 2 열 레이아웃으로 표시됩니다. 그러나 layout: sidebar 읽는 _config.yml 파일의 선을 변경하여 레이아웃 : layout: stacked _config.yml 파일의 선을 변경하여 "스택 된"단일 열 레이아웃으로 빠르게 전환 할 수 있습니다.
기본적으로 귀하의 웹 사이트는 "밝은"흰색과 회색 배경으로 어두운 텍스트가 있습니다. 그러나 style: light style: dark _config.yml 파일의 선을 변경하여 흰색 텍스트로 "어두운"배경으로 빠르게 전환 할 수 있습니다.
귀하의 웹 사이트에는 "내 관심사"라는 제목의 섹션에 나타나는 세 가지 주제 (예 : "웹 디자인"및 "Sass")가 사전 구성됩니다. 이들은 또한 리포지토리의 _config.yml 파일에 저장되며 각 주제의 이름과 다른 두 가지 옵션 세부 사항을 정의 할 수 있습니다.
web_url : 주제에 원하는 웹 주소 (예 : https://github.com/topics/sass ).image_url : 주제와 함께 표시하려는 (이상적으로 정사각형) 이미지의 웹 주소. 웹 사이트에 페이지를 추가 하려면 (예 : 자세한 이력서) :
.html 또는 .md 파일을 만듭니다.http://yoursite.dev/filename ). ---
layout: default
---
웹 사이트에 블로그 게시물을 추가 하려면 :
/_posts/ 디렉토리에 새 .md 파일을 만듭니다. YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
귀하의 웹 사이트에는 참조 할 수있는 자리 표시 자 블로그 게시물이 제공됩니다. 특히, 프론트 물질은 false 으로 published 하므로 웹 사이트에 표시되지 않도록합니다.
전면 물질에서 layout 정의 할 수도 있지만, 귀하의 웹 사이트는 /_posts/ 디렉토리의 모든 게시물에 post 레이아웃을 할당하도록 사전 구성되어 있습니다. 따라서 원하지 않는 경우 게시물에서 선언 할 필요가 없습니다.
블로그 게시물을 작성하고 관리하기위한 Jekyll의 컨벤션은 매우 유연합니다. "게시물"에 대한 Jekyll의 문서에서 자세한 내용을 배울 수 있습니다.
개인 웹 사이트를 시작할 수있는 사운드 기반을 제공하기 위해 저장소에는 웹 사이트 전체에 재사용되는 소수의 "포함"-Dynamic .html 파일이 포함되어 있습니다. 그것들은 모두 /_includes/ directory에 저장되어 있습니다.
header.html 및 footer.html 과 같은 일반적인 용의자가 있습니다. 그러나 지적할만한 가치는 거의 없습니다.
interests.html : "내 관심사"의 제목 및 동적 목록은 _config.yml 에 나열된 주제로 채워져 있습니다.masthead.html : 모든 웹 페이지에 눈에 띄게 표시된 아바타, 이름, 바이오 및 기타 메타 데이터 모음을 통해 웹 사이트의 내용을 식별하는 데 도움이됩니다.post-card.html : 블로그 게시물의 소형, 요약 된 프레젠테이션, 최신 블로그 게시물의 목록을 표시하기 위해 재사용했습니다.projects.html : 최신 Github 리포지토리 목록으로 채워진 "My Projects"의 제목 및 동적 목록.repo-card.html : 저장소의 소형, 요약 된 프레젠테이션, GitHub 리포지토리 목록을 표시하기 위해 재사용했습니다.thoughts.html : 최신 블로그 게시물의 목록으로 채워진 "My Thought"의 제목 및 역동적 인 목록.topic-card.html : 주제 ( _config.yml 에 정의 된 소형, 요약 된 프레젠테이션), 관심사 목록을 표시하도록 재사용.저장소에는 세 가지 레이아웃이 제공됩니다.
index.html 홈페이지에서 사용하여 프로젝트, 관심사 및 (선택적으로) 블로그 게시물 목록을 표시합니다./_posts/ 디렉토리의 게시물에서 기본적으로 사용됩니다.레이아웃을 정의하기위한 Jekyll의 협약은 매우 유연합니다. Jekyll "레이아웃"문서에서 레이아웃을 사용자 정의하는 것에 대해 자세히 알아볼 수 있습니다.
귀하의 웹 사이트는 /assets/styles.scss Sass Stylesheet에 작성한 사용자 정의 스타일과 함께 "Primer"라는 매우 유연한 CSS 프레임 워크를 사용하도록 사전 구성되어 있습니다. 현재 CSS import at-rule을 사용하여 styles.scss 파일 내에서 참조되어 있습니다.
@import url('https://unpkg.com/primer/build/build.css');
물론 당신은 그것을 제거하거나 다른 프레임 워크로 바꾸는 것을 환영합니다. 귀하의 웹 사이트에 대한 HTML은 열 폭, 여백 및 배경색과 같은 것을 정의하기 위해 여러 프라이머 "유틸리티 클래스"로 참조 된 다중 프라이머 "유틸리티 클래스"로 사전 포장 된 것을 명심하십시오.
테마는 MIT 라이센스의 조건에 따라 오픈 소스로 제공됩니다.