• HOME
  • PRODUCT
  • DEVELOP
  • NEWS
  • CONSULTING
No Result
View All Result
illunex Blog
  • HOME
  • PRODUCT
  • DEVELOP
  • NEWS
  • CONSULTING
No Result
View All Result
일루넥스 블로그
No Result
View All Result

깃허브 블로그 만들기(지킬, Jekyll)

깃허브 블로그 만들기(지킬, Jekyll)

윤 나영 by 윤 나영
2021년 4월 12일
in 기타
깃허브 블로그 만들기(지킬, Jekyll)

안녕하세요, 개발팀 윤나영입니다.
오늘은 깃허브 블로그 만드는 방법에 대해 포스팅하려고 합니다.
만드는 방법은 여러가지가 있지만, 저는 제일 간단하고 빠른 지킬(Jekyll)을 사용했습니다.

본론

1.1 지킬(Jekyll)이란?

정적 사이트 빌더(Static Website Builder)입니다. Github의 공동 설립자가 Liquid 언어로 만들었습니다.
템플릿과 템플릿 구성요소, 인라인 코드, 마크다운과 같은 동적인 구성요소를 정적인 웹페이지로 만들어주는 파싱 엔진입니다.

마크업 (MarkUp) & 마크다운 (MarkDown)

마크업 언어는 마크(Mark)로 들러싸인 언어로 마크는 **태그(Tag)**를 의미합니다. 문서에 부가적인 정보를 표시하기 위해 고안된 언어입니다.
HTML, XML 등이 마크업 언어에 해당하는데, 이 언어들은 문서의 구조(골격)를 정의합니다.

마크다운 언어는 마크업 언어 종류 중 하나로, 마크업 문법을 좀 더 쉽게 바꿨습니다.
읽기와 쓰기가 쉽다는 장점이 있으며 현재 지킬을 포함하여 깃허브(Github), 스택오브플로우(Stack Overflow) 등에서 사용 중입니다.
가장 대표적인 기능은 **태그 기능(‘@’)**입니다. 마크다운의 확장자명은 깃허브에서 자주 볼 수 있는 .md입니다.

확장자 .md 문법

  • # – ###### : Heading

  • * : 순서 없는 리스트

  • 1, 2, 3 … : 순서 있는 리스트

  • *글씨* : 기울임

  • **글씨** : 굵기

  • [링크내용](링크주소) : 링크

  • > : 인용구

  • <mark></mark> : 형광펜

  • “ : 하이라이트 텍스트

정적 사이트 (Static Website) & 동적 사이트 (Dynamic Website)

지킬의 장점은 다음과 같습니다.

  1. 마크다운 언어를 사용하기 때문에 사용법이 비교적 간단합니다.
  2. 정적 사이트 생성기라서 db가 필요 없습니다.
  3. Git을 이용하여 백업과 복원이 쉽습니다.
  4. 다양한 테마와 플러그인, 편집기 등이 있어서 정보를 얻기 쉽고 확장성을 고려할 수 있습니다.
  5. Github 계정만 있다면 무료 호스팅을 지원받을 수 있습니다.

1.2 기본적인 웹사이트 생성

테마 적용을 하기 전에 먼저 기본적인 jekyll 웹사이트를 생성하여 jekyll의 흐름을 파악해봅니다.

먼저 터미널에서 루비 언어의 설치 여부를 확인합니다.

ruby -v

루비가 설치되어 있지 않다면 설치해야 합니다. 루비 버전 관리 도구인 rvm(Ruby Version Management)을 설치합니다.

\\curl -sSL <https://get.rvm.io> | bash -s stable

그 후에는 rvm으로 최신버전의 루비를 설치합니다.

rvm install ruby-2.7.1

최신버전을 적용시킵니다.

rvm use ruby-2.7.1
rvm --default use 2.7.1

버전이 잘 적용되었는지 확인합니다.

ruby -v

루비가 설치되었다면 이제 RubyGem으로 지킬을 설치합니다.

sudo gem install jekyll bundler

루비젬 (RubyGem)

루비의 표준화 패키징 및 설치 프레임워크입니다. 루비 어플리케이션이나 라이브러리를 설치하고 패키징을 관리합니다. 명령어는 gem입니다.
지킬 설치가 완료 되었다면 지킬 사이트를 생성합니다. 새로운 프로젝트를 생성합니다.

지킬 설치가 완료 되었다면 지킬 사이트를 생성합니다. 새로운 프로젝트를 생성합니다.

jekyll new 프로젝트명

해당 파일로 들어가보면 기본 html과 설정 파일인 config.yml, 404 에러 페이지 등이 있습니다.

cd 프로젝트명
ls 프로젝트명

jekyll 서버를 실행합니다. 실행 명령어는 config.yml에서 확인할 수 있습니다.

bundle exec jekyll serve

jekyll 기본 포트는 4000번입니다.

localhost:4000

사이트가 뜨면 성공입니다.

1.3 테마 적용

일단 Github Repository를 생성해야 합니다. 계정이 없다면 계정 생성을 먼저 해야 합니다. 레파지토리 이름이 곧 블로그 url이 될 것입니다.

Owner.github.io 

원격 레파지토리 > 설정 > 페이지 메뉴에 가면 해당 레파지토리가 성공적으로 호스팅되었음을 확인할 수 있습니다.

그 다음에는 원하는 지킬 테마를 고릅니다. 사이트는 여러 곳이 있습니다.

  • Github에 있는 테마들 (무료) https://github.com/topics/jekyll-theme
  • Jamstack Themes (무료) https://jamstackthemes.dev/ssg/jekyll/
  • Jekyll Themes1 (무료) http://jekyllthemes.org/
  • Jekyll Themes2 (유/무료) https://jekyllthemes.io/
  • Jekyll Themes3 (유료) https://jekyll-themes.com/

고른 테마의 깃허브 레파지토리를 포크(Fork)해도 되고 클론(Clone)해도 됩니다.

Git 포크 (Fork) & 클론 (Clone) 차이점

다른 사람의 Github 레파지토리를 복제하여 수정, 추가, 삭제를 용이하도록 해주는 복제 기능입니다.

clone과 fork의 가장 큰 차이점은 원격 저장소와의 연동 여부입니다. fork는 원격 저장소와 연결되어 있어 원격 저장소에 변화가 생기면 fork된 레자피토리에도 반영됩니다. 반대로 원격 저장소에 변경 사항을 적용하고 싶으면 pull request를 보내면 됩니다. clone은 원격 저장소와 연결되어 있지 않습니다.

저는 클론을 선택했습니다. 클론 후에는 원격 저장소 연결을 끊고

git remote remove 명칭

처음에 새로 만든 저장소를 연결하면 됩니다.

git remote add 명칭 깃허브url

그 후에는 기본 설정을 합니다. 이건 테마마다 다르기 때문에 자신의 테마가 어떤 환경을 기반으로 하고 있는지 확인해야 합니다.

설정이 끝났다면 원격 저장소에 push합니다.

git push 명칭

깃허브 레파지토리명을 url창에 입력합니다. 블로그 화면이 뜬다면 성공입니다.

깃허브 블로그는 적용하는 데까지 1-3분정도 시간이 소요됩니다.

push 후 곧바로 적용은 안 되니 여유를 가지고 기다립시다.

이제 해당 테마를 수정해서 나만의 블로그를 만들어 나가면 됩니다.

결론

깃허브 블로그는 블로그를 하나 하나 내 손으로 만드는 재미를 느낄 수 있지만, 이걸 귀찮아하는 사람한텐 글 하나를 업로드 하는 것도 힘듭니다.
이런 경우에는 기본적인 기능들이 갖춰져 있는 Velog나 Tistory를 추천합니다.

Tags: GitGithubGithubBlog
ShareTweet
Previous Post

nginx 웹서버 띄워보기

Next Post

딥 러닝이 대체 뭘까?

Next Post
딥 러닝에 관하여

딥 러닝이 대체 뭘까?

  • Copyright © 2020 illunex., Inc., All Rights Reserved.
  • 개인정보보호정책
No Result
View All Result
  • HOME
  • PRODUCT
  • DEVELOP
  • NEWS
  • CONSULTING