본문 바로가기
ETC

[블로그 만들기] Github page에 Gitbook 장착하기

by softserve 2022. 8. 7.
반응형

Github page

는 Github에서 제공하는 웹 페이지 호스팅 서비스입니다.

* 호스팅(Hosting)이란

개인이나 영세 기업으로서는 자체 서버를 구축하기가 쉽지 않기 때문에 대용량 서버를 가지고 있는 호스팅 업체로부터 서버 공간을 대여하여 웹 서비스를 제공하곤 합니다. 대표적인 국내 호스팅 업체로는 가비아, cafe24 등이 있고 아마존의 자회사인 AWS는 클라우드 서버를 호스팅 하는 것이라고 볼 수 있습니다.

Github page의 서비스 제공 방법

은 단순합니다.

1. 사용자가 웹 페이지를 제작해서 Github page와 연동된 Github 레포지토리에 업로드를 합니다.

2. Github에서 특정 주소로 접속을 했을 때 해당 레포지토리에 저장된 웹 페이지가 보여지게끔 해줍니다.

이렇게 Github page를 통해서 우리는 간단한 웹 페이지를 만들 수 있고 포트폴리오 등의 용도로 활용할 수 있습니다.

2번을 Github에서 알아서 해주기 때문에 우리는 레포지토리를 만들고 파일을 업로드하기만 하면 됩니다.

구체적인 방법은 다음과 같습니다.

① Github에 접속해서 레포지토리를 하나 생성합니다.

이 때 레포지토리의 이름이 중요합니다. [Github 사용자이름].github.io 로 정확히 입력합니다.

사용자이름은 우측 상단의 프로필을 눌렀을 때 "Signed in as ***" 부분에서 확인할 수 있습니다.

② 이제 로컬에서 웹 페이지를 작성해줍니다.

$ git clone https://github.com/사용자이름/사용자이름.github.io.git

해당 페이지는 레포지토리 이름을 그대로 주소로 사용해 접속할 수 있습니다.

https://srj0.github.io

여러분은 현재 레포지토리에 아무것도 없기 때문에 접속할 경우 404 not found 에러가 뜨는 게 정상입니다.

github page에 접속했을 때 처음 보이는 페이지는 index.html 이므로 아래와 같이 파일을 만들어줍니다.

<index.html>

<!DOCTYPE html>
<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <h1>Welcome</h1>
    </body>
</html>

③ 이제 변경한 내용을 깃허브에 올려줘야 합니다.

$ git add .
$ git commit -m "first commit"
$ git push origin main

깃허브 사용법이 생소하시다면 -> https://co1nam.tistory.com/6?category=975022

반영되는데 약 1~2분 정도의 시간이 걸리므로 계속 새로고침 하지 마시고 기다려줍니다.

다시 접속을 해보면

깃헙 페이지가 완성되었습니다.

GitBook

Gitbook은 Github를 이용한 마크다운 기반의 문서 편집 도구입니다.

https://www.gitbook.com/

이 Gitbook을 앞서 만들어둔 Github page에 설치해 사용할 수 있습니다.

깃북을 활용하면 직접 html, css를 만들어서 페이지를 만드는 수고를 덜고 컨텐츠 제작에 집중할 수 있습니다.

1. nodejs & npm 설치하기

버전에 따라 깃북이 제대로 작동되지 않을 수 있으므로 먼저 nodejs 버전 관리 프로그램인 nvm을 설치해줍니다.

$ sudo yum install curl // curl 설치
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash // nvm 설치
$ source ~/.bashrc // .bashrc 로딩

nvm ls 또는 nvm list 를 입력하여 nvm으로 설치할 수 있는 nodejs 버전들을 확인할 수 있습니다.

$ nvm ls // ls-remote 는 모든 버전 리스트를 보여준다.

6.17.1 버전으로 설치해보겠습니다.

$ nvm install v6.17.1 // node 라고 입력하면 최신 버전을 설치한다.

현재 선택된 버전은 nvm ls로 확인할 수 있고 다음과 같이 변경할 수 있습니다.

$ nvm use v6.17.1

설치가 제대로 되었는지 확인해봅니다.

$ node -v
$ npm -v

2. gitbook 설치 및 문서 작성

npm으로 깃북을 설치해보겠습니다.

$ npm install gitbook-cli -g

설치가 제대로 되었는지 확인해줍니다.

$ gitbook --version

이제 폴더를 하나 생성한 뒤, gitbook으로 초기화해줍니다.

$ mkdir gb
$ cd gb
$ gitbook init // $ gitbook init gb 는 생성과 동시에 초기화

처음에 필요한 파일들을 설치하는데 시간이 좀 걸립니다.

ls 를 입력해보면 README.md 와 SUMMARY.md가 생긴 것을 확인하실 수 있습니다.

SUMMARY.md 는 일종의 목차라고 볼 수 있습니다.

좌측 메뉴에 SUMMARY.md의 내용이 보여지고 메뉴를 클릭하면 메인 프레임에 내용이 나타납니다.

그럼 간단하게 내용을 수정해보겠습니다.

first.md 파일을 만들고 원하는 내용을 적어줍니다.

$ vi first.md

SUMMARY.md를 수정해줍니다.

$ vi SUMMARY.md

<SUMMARY.md>

# Summary

* [Introduction](README.md)
* [Part 1](first.md)

작업을 마쳤으면 gitbook build를 해줍니다.

$ gitbook build

만약 에러가 발생할 경우
* Error: ENOENT: no such file or directory, stat '/mnt/c/projects/gb/_book/gitbook/gitbook-plugin-fontsettings/fontsettings.js'

아래와 같이 입력하여 파일을 열어줍니다.

$ cd ~/.gitbook/versions/3.2.3(gitbook --version으로 확인한 버전)/lib/output/website
$ vi copyPluginAssets.js

confirm: true 를 confirm: false로 바꿔줍니다. 제 경우는 두 줄을 수정했습니다.

다시 build를 해봅니다.

3. github page와 연동하기

이제 생성된 gitbook을 github page에 올려보겠습니다.

먼저 github에 접속해서 새로운 레포지토리(이름: gb)를 만들어줍니다.

현재 폴더를 생성한 레포지토리와 연결해줍니다.

$ git init
$ git remote add origin 레포지토리 주소(https://github.com/srj0/gb.git)

gitbook build를 하면 _book 폴더가 생성됩니다. 우리에게 필요한 것은 이 폴더에 든 내용물이므로 현재 폴더에 붙여넣기 한 다음 _book 폴더는 삭제해 줍니다.

$ cp -R _book/* .
$ git clean -fx _book

그리고 git push를 통해서 새 레포지토리에 파일들을 업로드합니다.

$ git add .
$ git commit -m "gb"
$ git push origin master

그런 다음 github에 접속해 레포지토리 Settings > Pages 에서 Branch 를 선택한 다음 save를 누릅니다.

잠깐 숨을 돌리고

https:// 깃헙페이지 주소 / 새 레포지토리 이름 을 주소창에 넣어주면 깃북이 올라온 것을 확인할 수 있습니다.

예) https://srj0.github.io/gb

문서를 수정할 때마다 build에서부터 여기까지의 과정을 모두 거쳐야 합니다.

몹시 귀찮기 때문에 쉘 스크립트 파일을 만들어줍니다.

vi publish.sh

<publish.sh>

$ gitbook build
$ cp -R _book/* .
$ git clean -fx _book
$ git add .
$ git commit -m "docs update"
$ git push origin master // 또는 main

이제 수정사항을 반영하고 싶으면

$ ./publish.sh

한 줄만 넣으면 됩니다.

단, 여전히 깃헙 사용자명과 토큰은 입력해주어야 합니다.

반응형

댓글