10 분 안에 GitHub 페이지로 무료 정적 사이트를 만드는 방법

정적 사이트가 대세가되었으며 그럴만한 이유가 있습니다. 매우 빠르며 지원되는 호스팅 서비스가 계속 늘어나면서 설정이 매우 쉽습니다.

여기서 정적 사이트에 대해 누가, 무엇을, 언제, 어디서, 왜 그런지에 대해서는 설명하지 않겠습니다. 나는 당신이 그들이 무엇인지에 대한 모호한 아이디어를 가지고 있거나 자신의 사이트를 만들고 싶고 다른 세부 사항에 대해서는 신경 쓰지 않는다고 가정합니다. 어느 쪽이든이 게시물은 당신을위한 것입니다.

첫째, 가능한 한 광범위한 청중을 위해이 글을 쓰고 있다는 사실을 알고 싶습니다. 따라하기 위해 프로그래밍 지식이 필요하지는 않지만 명령 줄과 Git에 익숙하면 많은 도움이 될 것입니다.

그렇다면 어떻게 10 분 안에 GitHub로 정적 사이트를 만들 수 있을까요?

정적 콘텐츠를 제공하도록 특별히 설계된 GitHub Pages와 Jekyll이라는 정적 콘텐츠 생성기의 두 가지 특정 도구로 작업 할 것입니다.

Jekyll은 정적 사이트를 쉽게 생성 할 수있는 Ruby gem이므로 Jekyll을 사용하려면 컴퓨터에 Ruby를 설치해야합니다. OSX가있는 경우 이미 Ruby 버전이있을 가능성이 높습니다 (업데이트해야 할 수도 있음). 그렇지 않거나 Windows 컴퓨터를 사용하는 경우 여기에서 Ruby 설치에 대해 자세히 알아볼 수 있습니다.

그것을 막고 새 터미널 창을 열고 gem install bundler jekyll. 그러면 Bundler (Ruby 패키지 관리 도구)와 Jekyll이 설치됩니다.

이러한 gem (Ruby 패키지)이 설치되면 Jekyll new my-static-site새 디렉토리에 프로젝트를 생성하기 위해 Jekyll의 생성기를 실행하는 입력 (원하는대로 이름 지정)합니다. 사이트가 생성 된 후 입력 cd my-static-site(또는 cd프로젝트라고 부르는 이름)을 입력하여 새로 생성 된 사이트 디렉토리로 이동합니다 .

텍스트 편집기에서 프로젝트를 열면 Jekyll이 생성 한 여러 파일과 폴더가 표시됩니다. 지금 당장은 Gemfile (Gemfile.lock이 아님)에만 관심을 기울이면됩니다. Gemfile은 프로젝트를 실행하는 데 필요한 모든 관련 Ruby 패키지를 관리하는 Ruby 파일입니다.

파일에는 Jekyll 버전이 포함 된 줄이 포함됩니다.

#gem "jekyll", "~> 4.0.0" 

그런 다음 다음 줄을 추가하십시오.

gem "github-pages", group: :jekyll_plugins 

GitHub Pages gem을 설치할 때 많은 문제가 발생할 수 있습니다. 때로는 의존하는 gem이 오래되었거나 로컬에 설치 한 gem이 GitHub Pages에 비해 너무 현대적입니다.

이로 인해 Jekyll 사이트를 로컬에서 구축하고 테스트하는 것이 어려울 수 있음을 발견했습니다. 사이트를 로컬에서 테스트하고 배포 할 준비가 될 때까지 저장하는 것이 가장 쉬울 수 있습니다. 그러나이 글을 쓰는 시점에서 Gemfile에서 이러한 종속성 버전을 지정할 수 있으며 Jekyll은 로컬 및 GitHub 페이지에서 모두 작동합니다.

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

최신 구성에 대해 StackOverflow의 Alex Waibel에게 감사드립니다.

실제 사이트를 보려면 bundle exec Jekyll serve명령 줄에서 실행 하십시오. 이렇게하면 서버가 시작되고 브라우저의 URL 표시 줄에 "localhost : 4000"을 입력하여 사이트를 볼 수 있습니다.

짜잔! Jekyll을 사용하여 정적 사이트를 만들었으며 현재 프로젝트 디렉터리에 있습니다. 50 % 정도 완료되었습니다.

온라인으로하자

GitHub.com으로 이동하여 가입하거나 이미 계정이있는 경우 "새로 만들기"버튼을 선택하고 저장소를 만듭니다. GitHub 페이지 계정이 제공 할 링크 (your_username.github.io) 다음에 저장소 이름을 지정하는 것이 중요합니다. 예를 들어 내 GitHub 사용자 이름은 tfantina이고 내 블로그는 tfantina.github.io이므로 내 GitHub 저장소의 이름은 "tfantina.github.io"입니다.

터미널 창으로 돌아가서 다음 명령을 실행하여 컴퓨터에서 GitHub로 Jekyll 사이트를 푸시합니다.

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(사용자 이름과 프로젝트 이름을 대체 할 때 열고 닫을 필요가 없습니다).

변경 사항이 저장소로 푸시되면 작동하는 정적 사이트가 있어야합니다. 이는 GitHub Pages gem을 사용하고 GitHub가 GitHub Pages를 통해 제공하고자하는 것을 이해하는 방식으로 저장소 이름을 지정했기 때문입니다.

사이트를 방문하거나 GitHub의 설정 탭으로 이동하여 페이지 섹션으로 스크롤하여이를 확인할 수 있습니다. 사이트가 게시 된 위치를 나타내는 녹색 상자가 표시되어야합니다.

여기에서도 테마를 쉽게 변경할 수 있습니다. GitHub는 Jekyll에 대한 몇 가지 기본 테마를 제공하지만 물론 직접 만들 수도 있습니다.

사이트가 게시되었다고 표시되지만 비어있는 경우 새로 고침을하거나 비공개 창에서 사이트를 확인해야 할 수 있습니다. 이것은 분명해 보일지 모르지만 새 Jekyll 인스턴스를 설정할 때마다 거의 매번 나타납니다.

모든 것이 계획대로 진행되면 사이트가 다음과 같이 보일 것입니다.

이제 몇 분만에 GitHub 페이지가있는 정적 웹 사이트를 만들고 배포했습니다. 그러나 아마도 페이지에 일부 콘텐츠를 넣을 수 있기를 원할 것입니다.

나는 이것이 10 분 밖에 걸리지 않을 것이라고 약속 했으므로 페이지, 서문 또는 Liquid 템플릿 언어의 모든 세부 사항에 대해 자세히 설명하지는 않겠습니다. 그것은 다른 날에 대한 게시물입니다. 그러나 첫 번째 게시물을 작성하는 방법을 공유하겠습니다.

텍스트 편집기로 돌아가 "_posts"폴더를 엽니 다. 새 블로그에 오신 것을 환영하는 게시물이 이미 있습니다. 새 마크 다운 파일을 만들고 YEAR-MONTH-DAY-TITLE.markdown 형식의 이름으로 저장합니다 (아래 참조).

Jekyll 게시물에는 머리말과 본문의 두 섹션이 있습니다.

서문은 게시물 제목, 사용할 레이아웃, 게시물 작성시기와 같은 특정 지침을 Jekyll에게 제공합니다.

머리말은 고도로 사용자 정의 할 수 있습니다. 예를 들어, 내 게시물에 영웅 이미지가 포함되기를 원했기 때문에 lead_image태그를 만들고 레이아웃에 구문을 배치하여 각 게시물의 서문에서 리드 이미지를 구체적으로 확인했습니다. Liquid 템플릿 언어를 사용하면 서문에서 테마로 콘텐츠를 쉽게 가져올 수 있습니다.

서문으로 할 수있는 일이 훨씬 더 많지만 일반적인 예부터 시작하겠습니다.

기본 머리말은 다음과 같습니다.

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Layout은 Jekyll에게 콘텐츠를 표시 할 레이아웃을 알려줍니다. 다른 페이지 또는 게시물 유형에 대해 여러 레이아웃을 가질 수 있습니다.
  • 게시물 제목
  • 게시일
  • 본질적으로 태그 인 카테고리. 공백으로 구분하여 원하는만큼 추가 할 수 있습니다.

서문 뒤에 게시물을 Markdown으로 작성할 수 있으므로 게시물 내용을 작성할 때 많은 유연성을 제공합니다.

게시물이 완료되면 저장하고 터미널 창을 엽니 다.

git commit -am “Publishes first post git push

잠시 후 (그리고 새로 고침) 게시물을 볼 수 있습니다.

바라건대, 이제 Jekyll로 만든 GitHub 페이지에 작동하는 정적 사이트가 있습니다! 문제 나 질문이 있으면 @tfantina로 트윗하거나 [email protected]으로 저에게 이메일을 보내주세요.