Github Blog 생성 (+ Jekyll)

Github Blog

Github Blog란?

Github Repository 에 저장된 html, css, js 등 정적 웹 문서들을 Github에서 무료로 웹에서 볼 수 있도록 호스팅 서비스를 제공해주는 것 입니다.

Jekyll, Hugo등의 정적 웹 사이트 생성기와 결합하여 사용자가 편리하게 웹을 만들 수 있도록 기능을 제공합니다.

즉, Github Blog는 Github에서 제공하는 웹 호스팅 서비스로 유저가 자유롭게 웹 사이트를 운영 할 수 있는 서비스입니다.

참고로, Github 이외에도 여러가지 서비스가 존재합니다. ex) GitHub, GitLab, BitBucket

Github Repository 생성

회원가입은 생략하겠습니다. (회원가입은 구글링하시면 바로 나오니 어렵지 않습니다.😊)

가입이 완료된 후 New버튼을 눌러 Repository (저장소)를 생성합니다.
Repository name에는 저장소의 이름을 지정합니다.
(Owner는 변경하지 마시고, Repository name항목은 username.github.io를 입력합니다.)
Public, Add a README file만 체크 후 맨 아래의 Create repository를 클릭합니다.
URL에 username.github.io 입력 시 아래 사진처럼 나온다면 성공입니다!
안될 때 시도 해볼 수 있는 방법입니다.
Page 카테고리에서 Branch 설정을 확인하시고 사진과 같이 설정 후 SAVE 해줍니다.
Your site in live at …이 나타나면 페이지에 들어가셔서 확인해봅니다.
(오래 걸릴 수 있으니 5~10분 정도 기다렸다가 확인해보세요!)

Git Clone

Local repository 생성

페이지 작업을 하기 위해 Git Repository와 VScode를 연동해보겠습니다.
(연동없이 Github Desktop 등을 이용하셔도 됩니다.👌)

VScode 실행 후 F1 -> git clone 클릭
Github에서 복제 클릭
연동할 Repository의 Web URL을 복사해 입력합니다.
Owner/repository로도 입력 가능합니다.
연동할 Local Repository를 선택합니다.
선택한 폴더에서 Git repository와 같은 이름의 폴더가 생성되고 폴더 안에 .git 폴더가 생성되며 연동됩니다.

index.html 만들기

연동된 Local repository가 VScode에 실행됩니다.
index.html을 만들어봅니다.
1 2 3 4 5 <html> <body> Hello, World! </body> </html>

add, commit, push

CLI환경에서 명령어로 이용하는 것보다 더 간편하게 VScode에서 add, commit, push를 실행할 수 있습니다.

VScode의 왼쪽 메뉴에서 소스 제어 항목으로 이동합니다.
+ 버튼으로 간단하게 변경 사항을 스테이징 할 수 있습니다. (git add와 같습니다.)
간단한 메세지를 적고 commit 버튼을 클릭합니다. (git commit과 같습니다.)
commit 후 변경 내용 동기화 버튼을 클릭합니다. (git push와 같습니다.)
첫 push 시 알림 팝업이 뜨고 확인 버튼을 클릭 시 push 권한 여부 확인을 위한 절차가 진행됩니다. (push 이후 페이지에 반영되기까지 시간이 걸릴 수 있습니다.)
절차 완료 후 Web URL에 username.github.io 입력 시 Hello, World!!가 나타난다면 성공입니다.

Jekyll 설치

Jekyll이란?

Jekyll은 Github의 설립자 중 한 명인 Tom Preston-Werner가 Ruby언어로 개발한 프레임워크입니다.
템플릿, 인라인 코드, MarkDown과 같은 동적인 구성요소를 정적인 웹 페이지로 만들어주는 파싱 엔진입니다.
Jekyll에 대한 자세한 이야기는 다음에 하고 지금은 가볍게 마크다운을 통한 웹 사이트 생성기로 생각하면 편합니다.😃

Rudy 설치 - Window

Jekyll을 설치하기 위해서는 먼저 Ruby를 설치해야합니다.

먼저 Ruby 다운로드 사이트에서 Ruby+Devkit 3.X.X (x64) 를 다운로드합니다.
설치는 수정 없이 Next만 누르시면 됩니다.
Ruby가 잘 설치됐는지 확인해봅니다.

Jekyll 생성 & 서버 열기

cmd창에서 본인이 원하는 로컬 저장소 디렉토리로 이동합니다.
위에서 git clone경로로 진행하겠습니다.
(저의 경우에는 C:\workspace\project\Psmin-be.github.io입니다.)
1 cd C:\workspace\project\Psmin-be.github.io
이동한 후 경로에 한글이 깨질 수 있으니 UTF-8 인코딩합니다.
Active code page: 65001가 보이면 정상입니다.
이동한 경로에서 Jekyll, bundle 설치합니다. 이후 webrick까지 설치합니다.
1 2 gem install jekyll bundler gem install webrick
Jekyll 생성
생성하기 전 폴더 안의 파일들을 삭제해주세요.
(README.md, index.html)
1 jekyll new ./
bundle install
1 bundle install
jekyll 서버 열기
1 bundle exec jekyll s
정상적으로 실행된다면 http://127.0.0.1:4000/ 또는 http://localhost:4000/로 접속합니다.

Github 블로그 만들기 By Chirpy, VScode - 1