Jekyll 및 Github 페이지를 사용하여 웹 사이트/블로그를 만드는 3단계

한편, 당신은 워드프레스와 같은 기능이 완비된 CMS를 당신의 블로그로 만들 수 있습니다.다른 한편, 당신은 제킬이나 개츠비 같은 정적 사이트를 만들 수 있고, 간단하지만 빠른 블로그를 만들 수 있다.이 글은 Jekyll과 Github Pages을 사용하여 블로그 사이트를 만들 수 있도록 안내합니다.우선, 우리는 로컬에 Jekyll 블로그를 설치한 후에 그것을 Github 페이지에 배치할 것이다.

미국 제킬 섬 (Unsplash)

소개

Jekyll의 공식 사이트는 jekyllrb.com으로 정적 사이트 생성기로서 그 구축 목적은 최소화하고 신속하며 관리하기 쉽다.Github의 공동 창시자인 톰 프레스턴 워너(Tom Preston Werner)는 2008년에 Jekyll을 창립했다.
제킬은 Github 페이지 뒤에 있는 엔진이다.따라서 우리는 무료로 Github 페이지에서 Jekyll 블로그를 위탁 관리할 수 있다.놀랍게도 Github 페이지는 사용자 정의 도메인을 지원합니다.따라서 우리는 그곳에서 그것을 위탁 관리하고 자신의 도메인 이름(blog.example.com)을 가질 수 있다.

Jekyll does what you tell it to do --- no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.

-- Jekyll README.md

제킬에 대한 사실

Markdown 사용

Liquid Templates 사용

.01%의 사이트에서 Jekyll(Source)

사용

Jekyll은 Ruby Gem으로 로컬 컴퓨터에 설치됩니다.

Jekyll은 요청마다 파일을 분석하지 않습니다.정적 페이지를 만들고 구축된 _site 폴더에 저장합니다.파일은 서버를 통해 정적으로 제공됩니다.

Jekyll은 데이터베이스를 사용하지 않습니다.

베일 벗기: 방금 Jekyll을 접한 사람들에게 흔히 볼 수 있는 곤혹은 Jekyll이 블로그 소프트웨어(또는 콘텐츠 관리 시스템)라고 생각하는 것이다. 사실은 그렇지 않다!Jekyll은 단지 파일을 해석하는 엔진일 뿐이다.워드프레스에서 웹 기반의 편집기에서 내용을 작성하고 발표할 수 있습니다.그러나 Jekyll에서는 일반 텍스트 편집기에서 태그로 내용을 작성할 수 있습니다.그리고 온라인으로 새로운 업데이트를 발표할 수 있습니다.
(이에 대해 의견이 없는 것을 보증한다.)

선결 조건

Jekyll을 설정하거나 사용하는 데는 인코딩 지식이 필요하지 않지만 다음과 같은 개념을 알아야 한다.

의 가격 인하--이것은 어떻게 Jekyll로 작성되었는지 내용입니다.가격 인하를 배우는 데는 시간이 많이 걸리지 않는다.Markdown cheatsheet 보기

Git - 버전 제어 코드에 사용됩니다.Github 관리 코드를 사용하기 때문에 Git 버전 제어에 익숙해야 합니다.만약 당신이 그것에 익숙하지 않다면, 나는 당신이 Github의 Git Handbook부터 시작하는 것을 건의합니다.

명령행 - 명령행을 사용한 경험이 조금은 없어서는 안 된다.만약 네가 이런 경험이 없다면, 걱정하지 마라.명령줄을 열고 폴더로 이동하는 방법만 알면 된다.

(비개발자 주의: 이 과정은 막을 수 없는 것 같다. 하지만, 이것은 매우 쉽다. 너는 그것에 익숙해지기만 하면 된다)

지킬을 설정합니다.

나는 이 과정을 세 단계로 나누고 싶다.

로컬에서 Jekyll

설정

Github 및 Github 페이지 설정 및 배포

사용자 정의

1. 로컬에 Jekyll 설정

제킬은 루비로 썼어요.그래서 너는 반드시 먼저 너의 컴퓨터에 그것을 설치해야 한다.

Official Installation Guide for Ruby

다음으로, Ruby Gems 두 개를 설치해야 합니다(Ruby Gems는 Ruby 프로젝트에 기능을 추가하는 패키지입니다).
여기서 Ruby 설치 후 사용할 수 있는 jekyll 명령을 사용하여 bundler 및 gem Gems를 설치합니다.명령줄을 열고 다음 코드를 실행합니다.

gem install jekyll bundler

그리고 새 블로그가 있는 폴더로 이동합니다.(예: 윈도우즈에서 cd F:\MyProjects)
다음 명령을 실행하여 새 Jekyll 사이트를 설치합니다.

jekyll new my-blog

이것은 현재 디렉터리의 my-blog 폴더에 Jekyll 파일을 설치합니다.다음 폴더로 이동합니다.

cd my-blog

최종 명령:

bundler exec jekyll serve

이것은 새로 만든 정적 사이트 http://localhost:4000에 서비스를 제공할 것입니다.웹 브라우저의 URL을 방문하여 아름다운 Jekyll 사이트를 보십시오.
여기서 [email protected]과 같은 자리 표시자 값을 볼 수 있습니다.우리는 지금 그것들을 변경하고 우리의 첫 번째 게시물을 쓸 것이다.

구성 변경

_config.yml을 열고 편집합니다.이것은 YAML 파일입니다.고맙게도 Jekyll의 프로필 자체가 YAML 문법을 설명했다.따라서 편집하기 전에 파일의 설명을 참조하십시오.

title: My Cute Jekyll Blog
email: [email protected]
description: >-
  This is my cute jekyll blog. I post some awesome stuff every day.
baseurl: ""
url: "https://mycutejekyllblog.com"
twitter_username: MyCuteJekyllBlog
github_username:  MyCuteJekyllBlog

내용 및 데이터 파일을 편집할 때 serve 명령은 자동으로 정적 내용을 업데이트합니다.하지만 _config.yml을 편집한 후 서버를 다시 시작해야 합니다!

첫 번째 블로그 글 만들기

모든 게시물은 _posts 폴더에 저장됩니다.
모든 게시물은 YEAR-MONTH-DAY-title.md 형식으로 작성해야 합니다.예:

2020-02-16-어떻게 일찍 일어나요.마리란드

2020-02-20-best-tools-for-remote-teams.마리란드

모든 게시물은 Front Matter으로 시작됩니다. 이것은 세 개의 점선 사이의 YAML 코드입니다.

--------
layout: post
title: Best Tools for Remote Teams
bestTool: SomeTool
--------

우선, 미리 정의된 변수에 대한 값을 설정하거나 새 변수를 정의할 수 있습니다.상기 예시에서 layout과 title은 미리 정의된 변수이고 bestTool은 새로운 변수로 페이지에 접근할 수 있습니다. 아래와 같습니다.
모든 블로그 게시물의 레이아웃 유형은 post입니다.

--------
layout: post
title: Best Tools for Remote Teams
bestTool: SomeTool
--------

<h2>The Best Tool is {{ page.bestTool }}</h2>

이제 너는 어떻게 블로그 게시물을 만드는지 알게 되었다.를 생성하여 _posts 폴더에 저장합니다.그런 다음 사이트를 다시 로드합니다.새 업데이트를 실시간으로 볼 수 있습니다.

2. Github 및 Github 페이지 설정 및 배포

지금까지 우리는 로컬에서 Jekyll 블로그를 만들고 설정을 맞춤 제작하여 우리의 첫 번째 글을 발표했다.
이제 우리는 그것을 배치할 것이다.
우선, 우리는 Git을 사용하여 우리의 사이트에 대해 버전 제어를 해야 한다.사이트의 폴더에서 다음 명령을 실행합니다.

git init
git add .
git commit -m "Initial Commit"

Jekyll을 설치할 때 루트 디렉터리에 다음과 같은 내용을 포함하는 .gitignore 파일을 자동으로 만들어야 합니다.(없는 경우 생성)

_site
.sass-cache
.jekyll-metadata

그리고 Github에 로그인하면 create a new repository명이 your_username.github.io명입니다.
그런 다음 저장소의 HTTPS URL을 복사합니다.

그런 다음 원격 저장소를 추가하고 코드를 푸시합니다.(링크를 자신의 링크로 교체해야 함)

git remote add origin https://github.com/HungryMan/hungryman.github.io.git
git push origin master

완성!귀하의 사이트는 현재 yourusername.github.io에서 사용할 수 있어야 합니다. 🎉

게시물 업데이트

게시물을 업데이트한 후에 당신이 해야 할 일은 변경 사항을 제출하고 추진하는 것입니다.

git add .
git commit -m "Updated x post"
git push origin master

3. 사용자 정의

정적 사이트에 기능을 맞춤형으로 설정하고 추가할 수 있는 몇 가지 일을 할 수 있다.

1. 설명 추가

정적 사이트에 데이터베이스가 없습니다.그래서 당신은 반드시 당신의 사이트에서 제3자 평론 시스템을 사용해야 합니다.우리는 당신이 Hyvor Talk을 사용하여 새로운 사이트에 댓글을 추가하는 것을 권장합니다. 왜냐하면 그것은 빠르고 무료이며 광고가 없고 완전히 사용자 정의가 가능하며 몇 분만 있으면 설정을 완성할 수 있기 때문입니다. (코드를 복사하고 붙이기만 하면)
How to add Hyvor Talk comments to Jekyll?
추천:Why Hyvor Talk is a better option for static sites than its alternatives?

2. Permalink 교체

기본적으로 블로그의 URL 구조는 /:categories/:year/:month/:day/:title입니다.그러나 search engines love은 간결하고 설명적인 URL입니다.
예를 들어 https://mywebsite.com/on-page-seo이 https://mywebsite.com/2020/01/20/on-page-seo보다 우수하다.
permalink를 _config.yml에 추가합니다.

permalink: /:title

여기에서 permalinks에 대한 더 많은 정보를 얻을 수 있습니다.

3. 사용자 정의 도메인 설정

우선, 당신은 도메인 등록 업체로부터 도메인 이름을 구매해야 합니다.
완료되면 DNS zone에 yourusername.github.io을 가리키는 CNAME 레코드를 추가합니다.
다음은 사이트의 루트 디렉터리에 CNAME이라는 파일을 만듭니다.그리고 거기에 도메인 이름을 추가합니다.

blog.example.com

마지막으로 변경 사항을 제출하고 추진합니다.(게시물을 업데이트할 때)

4. 지킬 테마 변경

공통 주제를 사용하지 마세요.당신의 사이트를 위해 새롭고 아름다운 주제를 찾으세요.수천 수만의 무료와 고급 테마가 있다.수색을 좀 하다.너는 그중의 많은 것을 발견할 것이다.
Jekyll Themes을 변경하는 방법을 참조하십시오.

결론

본고에서 우리는 Jekyll 사이트를 이용하여 정적 블로그를 구축하는 방법을 토론했다.만약 네가 개발자라면, 이 과정은 틀림없이 식은 죽 먹기일 것이다.그러나 제킬과 블로그를 만드는 데는 그리 많은 시간이 필요하지 않다.그리고 내용을 작성하고 업데이트하는 것이 훨씬 쉽다.설정 중 오류가 발생하면 아래에서 알려주십시오.
읽어주셔서 감사합니다!✌
이 문장은 최초로 Hyvor Talk Blog에 출현하였다.