깃허브 블로그 설치 없이 가장 쉽게 만들기

이번에는 깃허브 블로그를 가장 쉽게 만드는 방법에 대한 설명입니다. 정석적인 방법대로 하려면 깃허브 설치도 해야 되고 까다로운 내용이 상당히 많죠. 이 방법만 따라 하면 깃허브가 뭔지 몰라도 깃허브 계정만 있으면 깃허브 블로그를 만들 수 있습니다.

Jekyll Now로 설치 없이 깃허브 블로그 만들기

먼저 간단히 우리가 깃허브 블로그에 사용할 Jekyll과 Jekyll Now에 대해 설명하고 시작하겠습니다.

Jekyll과 Jekyll Now

기본적으로 깃허브 블로그를 개설할 때 Jekyll을 많이 사용합니다. Jekyll은 마크다운(깃허브 블로그에 포스팅하는 문서)으로 생성된 문서를 HTML 방식으로 바꿔서 사이트에 보여주는 설치형 블로그 정적 생성기입니다.

그런데 깃허브에서 직접 Repository를 만들고 Jekyll을 세팅하려면 생각보다 번거롭습니다.

일단 깃허브에 사용하는 깃 배쉬를 PC에 설치도 해야되고 깃에 대한 이해도 어느 정도 필요하죠.

여기서 정석대로 Jekyll을 이용해서 깃허브 블로그를 만드는 사람들이 가장 많이 포기하겠죠.

 

그럼 깃 배쉬 설치 없이 깃허브로 블로그를 만들 방법은 없는 걸까요?

물론 존재합니다. 그게 바로 지금 설명드릴 Jekyll Now죠.

앞서 말한 것처럼 수많은 사람들이 Jekyll 설정에서 깃허브 블로그를 포기하다 보니 몇몇 사람들이 이미 세팅이 끝난 Jekyll 프로젝트를 공유하기 시작합니다.

이런 프로젝트들을 Jekyll Now라고 합니다.

우리는 이 Jekyll Now를 복제해서 깃허브 블로그를 만들 겁니다.

 

여기까지 이해가 안 된다? 정상입니다.

이해 못 해도 정상이고 이해를 해도 정상이고 어쨌든 몰라도 깃허브 블로그 만들기 진행은 가능합니다.

깃허브 회원가입과 로그인

이제 깃허브 홈페이지로 가서 회원가입을 하고 로그인을 해줍시다.

아무리 뭐 안 한다 해도 로그인을 해야 되니까요.

깃허브 홈페이지는 아래 주소로 들어가면 되고 별거 없으니 Sign up을 눌러 회원가입을 해주세요.

GitHub: Let’s build from here

자 회원가입을 하고 로그인을 하면 뭐 알 수 없는 용어들이 가득합니다.

이렇게나 저를 반겨주니 감사할 따름이지만 모르는 말은 일단 잠깐 무시해 둡시다.

 

Jekyll Now Repository 복제하기

자 이제 우리는 이미 만들어진 깃허브 블로그 포맷인 Jekyll Now의 Repository를 복제해갈 겁니다.

https://github.com/barryclark/jekyll-now

GitHub - barryclark/jekyll-now: Build a Jekyll blog in minutes, without touching the command line.

Jekyll Now라고 만들어진 여러 가지 Repository가 있지만 배리 클락이라는 아저씨가 만든 Jekyll now가 가장 많이 알려진 것 같으니 이걸 씁시다.

먼저 상단의 링크로 들어가 줍니다.

Jekyll Now Git Repository

뭐 엄청 많습니다. 이미지는 그림일 거고 포스트는 글일 거고 Readme는 설명이겠죠.

어쨌든 Jekyll을 이용해 깃허브 블로그를 정석대로 만들면 이거랑 비슷하게 생성될 텐데요.

그 절차를 전부 건너뛰고 만들어놓은 걸 복제할 거니까 일단 신경 쓰지 맙시다.

 

우측 상단의 Fork 버튼이 보이시죠?

이걸 눌러주세요.

그러면 또 뭐가 나옵니다. Owner에 계정이 나오고 Repository name에는 jekyll-now라고 되어있습니다.

Description은 마음에 안 들면 지워도 상관없습니다.

여기서 Repository name 부분을 <깃허브 ID>. github.io로 바꿔줍니다.

그러니까 예를 들어 제 깃허브 ID가 montanajones다 하면 montanajones.github.io로 바꿔주는 겁니다.

그러고 나서 Create fork 버튼을 눌러주면 아까 봤던 파일들이 전부 제 계정에 종속된 파일로 바뀌어있습니다.

정확히는 본인의 깃허브 프로젝트로 복제된 거죠.

(참고로 실수로 Repository name을 잘못입력했다면 낙담하지 말고 일단 계속 읽어주세요.)

 

믿기지 않겠지만 이제 깃허브 블로그 만들기가 끝났습니다.

만들어진 깃허브 블로그 확인하기

만들어진 깃허브 블로그를 확인해 봐야겠죠.

상단의 Settings 탭으로 이동해 줍니다.

Repository name이 있는데요. 앞에 오타가 났거나 잘못 입력했다면 여기서 수정하고 Rename 버튼을 누르면 Repository Name이 바뀝니다.

깃허브 블로그를 이용하려면 꼭 이 원칙에 따라 Repository Name을 써줘야 한다고 합니다.

 

다음으로 왼쪽 메뉴 중 Pages로 이동해 줍니다.

그러면 Branch에 None이라고 되어있을 수 있는데 이걸 눌러서 master로 바꿔줍니다.

그리고 새로고침을 해보면 화면 상단에 Visit site라는 버튼이 보일 겁니다.

 

안 보인다고요? 역시 낙담하지 마시고 잠깐만 기다려주세요.

길게는 몇 분까지 걸리기도 하니 기다렸다가 새로고침을 하면 버튼이 보일 겁니다.

어느 순간 버튼이 보이고 들어가면 우리의 깃허브 블로그를 확인할 수 있습니다.

깃허브 블로그 초기 화면

엄청 단순한 페이지죠.

이런 페이지가 보인다면 우리의 깃허브 블로그 확인이 끝난 겁니다.

 

만들어진 깃허브 블로그 커스터마이징

자 깃허브 블로그는 만들었는데 너무 어설프죠. 블로그 제목도 없고 아쉬운 게 한두 가지가 아닙니다.

이걸 커스터마이징 해봅시다.

아까 깃허브 Repository 화면에서 Code 탭으로 이동해 줍니다.

좀 내려보면 _config.yml 파일이라고 있죠.

이걸 누르면 파일이 열리는데요.(참고로 코딩 아니고 문서 수정만 할 겁니다.)

상단의 연필 모양을 눌러 수정 모드로 들어가 주세요.

대충 살펴보면 name에 Your Name이라고 되어있습니다.

여기에 우리의 근사한 깃허브 블로그 제목을 넣어줍시다.

그리고 밑에 description을 보면 Web Developer 어쩌고 돼있는데 아까 우리의 깃허브 블로그에서 봤던 문구네요.

이것도 바꿔줍시다.

그리고 avatar는 우리 깃허브 블로그에서 봤던 빨간 약병 그림인 것 같은데요. 아직 깃허브에 이미지 올리기는 안 해봤으니 넘어가주세요.

이래 저래 다른 게  많긴 한데 일단 우상단에 Commit Change를 눌러서 저장합시다.

팝업 하나 뜰 건데 그냥 초록색 버튼 누르면 됩니다.

config.yml 파일

자 이렇게 수정했는데 우리의 깃허브 블로그로 돌아가서 새로고침을 누르면 바로 반영이 안 됩니다.

써보니까 깃허브 페이지가 이런 게 좀 느리네요.

그러니까 몇 분 기다렸다가 다시 새로고침을 눌러주면 반영이 됩니다.

config.yml 파일 변경 후

자 이 얼마나 근사한 블로그입니까?

만들어진 깃허브 블로그 첫번째 글 쓰기

이런 근사한 블로그에 예시로 작성된 포스팅 하나가 눈에 거슬립니다.

이걸 또 바꿔봅시다.

깃허브 Repository로 돌아가서 _posts 폴더로 들어가면 Hello World.md라는 파일이 있습니다.

 

md라는 파일이 마크다운이라는 파일로 우리가 블로그 포스팅을 작성해서 올릴 파일 포맷입니다.

물론 이 파일을 직접 수정해도 되긴 합니다.

다만 그런 경우 포맷이 깨질 수도 있고 좀 불안하니 마크다운 편집기 사이트로 가줍니다.

https://stackedit.io/app#

StackEdit

스택 에딧이라는 사이트인데요. 어지간한 다운로드하여서 쓰는 마크다운 편집기보다 낫다고 하네요.

믿고 써봅시다. 팝업은 스킵해 줍니다.

좌상단의 폴더 버튼을 누르면 탐색기처럼 나올 텐데 Temp 안에 My First Posting이라는 파일을 하나 만들어봅시다.

간단하게 포스팅을 작성해 봤습니다.

마크다운 파일 작성 예시

작성이 끝났다면 왼쪽 내용을 복사하고 아까 그 _posts 폴더의 Hello World.md 파일을 열어주세요.

그리고 다시 연필 모양을 눌러서 편집기로 들어가 주시고요.

 

타이틀 밑에 ---라고 되어있는데 이 밑에다가 복사한 내용을 붙여 넣어주세요.

그러고 title도 보기 좋게 바꿔봅시다.

그리고 나서 Commit Change를 눌러주고 기다립시다. 어떻게 보면 기다려야 되는 게 단점 이긴 한데 적응되겠죠.

깃허브 블로그 첫 포스팅

자 이렇게 우리의 첫 번째 포스팅을 등록했네요.

만약 새로운 포스팅을 더 하고 싶다면 같은 형식으로 복사해서 _post 파일 안에다가 마크다운 파일 형태로 만들어 넣어주면 됩니다.

아무래도 티스토리 글쓰기보다는 까다로운 면이 있죠.

 

일단 제가 만든 깃허브 블로그 주소를 공유합니다.

https://jkandrea.github.io/Hello-World/

이게 첫 포스팅이지

근데 아마 며칠 안에 없애고 다시 만들 수도 있을 것 같습니다.

반가웠어 내 첫 깃허브 블로그야 하고 인사하면서 글을 마칩니다.