:: Dev/Etc

Jekyll을 이용해 GitHub에 블로그 만들기 (1)

jETA 2019. 9. 23. 10:00
반응형

https://username.github.io의 주소를 가진 블로그를 보신 적이 있을겁니다.

이런 블로그들은 GitHub Pages 서비스를 이용해 무료로 생성된 것들입니다.

 

이번 글에서는 간단하게 GitHub에 블로그를 만들어서 운영하는 방법을 알아봅니다.

 

GitHub Pages 생성하기

Repository 생성

먼저 username.github.io 형태의 Repository를 생성합니다.

예를 들어 GitHub ID가 jETA-Kor라면 jeta-kor.github.io로 이름을 지어주면 됩니다.

전 이미 생성해서 빨갛게 표시됩니다.

 

Hello, World! 출력

1. 아래 이미지의 빨간색으로 표시해놓은 버튼을 눌러서 새 파일 생성을 진행합니다.

원래 _posts, 404.html 같은 파일들은 없습니다. 없는게 정상이예요.

 

2. 파일 이름과 파일 내용을 입력합니다.

파일 이름은 index.html로, 내용은 Hello, World!를 입력합니다.

 

3. Commit Log를 작성하고 Commit new file를 선택합니다.

Commit Log는 늘 성실하게 작성합니다.

 

4. 잠시 후 username.github.io에 접속하면 Hello, World!가 표시됩니다.

원래 시작은 Hello, World입니다.

 

 

Jekyll 설치하기

로컬에 Jekyll 설치하기

1. 아래 명령어를 이용해 Ruby 버전을 확인합니다.
   Ruby가 설치되어 있지 않거나 버전이 2.4 미만이라면, 이 글을 참조해서 설치 및 업데이트를 진행합니다.

$ ruby -v # ruby 2.4.4 (2018-03-28) [x86_64-darwin18] 와 같은 형태로 버전이 출력됩니다.

 

2. 아래 명령어를 이용해 Jekyll을 설치합니다.

$ gem install jekyll bundler

 

 

GitHub Repository 다운로드 하기

1. GitHub에서 Repository 경로를 확인합니다.

다시 말씀드리지만 index.html 파일만 있는게 정상입니다.

 

2. git clone 명령어를 이용해서 로컬로 다운로드하고, 디렉토리를 이동합니다.

$ git clone https://github.com/jETA-Kor/jeta-kor.github.io.git # 제 경로는 이렇게 됩니다.
$ cd jeta-kor.github.io

 

 

Jekyll 생성하기

1. 테스트로 생성했던 index.html을 삭제합니다.

$ rm index.html

 

2. Jekyll을 생성합니다.

$ jekyll new ./
$ bundle install

 

3. 생성된 사이트를 실행해봅니다.

$ bundle exec jekyll serve

 

4. 개발용 서버가 실행됩니다. http://localhost:4000에 접속해서 생성된 사이트를 확인할 수 있습니다.

 

 

배포하기

Git의 Commit과 Push를 이용해 변경 사항을 GitHub로 올리면 잠시 후 실제 사이트에 반영됩니다.

GitHub Desktop이나 Sourcetree와 같은 GUI 툴을 사용하거나, git-cli 등의 도구를 사용해서 배포할 수 있습니다.

 

 

*

글을 작성하는 방법과 테마를 적용하는 방법은 다음 글에 이어서 작성하겠습니다.

 

 

참고 문서

반응형