Github Pages 란 무엇인가? :: 마이구미

이 글은 Github Pages 에 대해 다뤄본다.

중심 주제는 Github Pages에 vue-cli 프로젝트를 적용한다.

하지만 전체적인 내용과 연결되어있기 때문에, Github Pages 를 사용하는 법을 숙지할 수 있다.

중심 주제에 앞서, Github Pages 는 무엇인지부터 알아보자.

Github Pages 란 무엇인가?

Github Pages 는 Github 저장소의 내용을 웹페이지로 만들어 주는 서비스이다.

Github 저장소의 내용을 직접 웹페이지를 통해서 보여줄 수 있다는 것이다.

간단하게 말하자면, 무료로 웹 서버를 구축할 수 있다.

아래와 같은 URL 형태를 경험해봤을 것이다.

https://username.github.io

대표적인 사용 사례는 블로그로 이용된다.

즉, 티스토리, 워드프레스, 브런치 등과 같은 용도로 사용할 수 있다.

카카오의 기술 블로그는 자체 블로그 서비스를 사용하지 않고, Github Pages 를 사용한다.

그것만 보더라도 얼마나 유용한 서비스인 것을 알 수 있다.

Github Pages 는 어떻게 구축할 수 있는가?

설명할 필요도 없을만큼 공식 사이트를 통해 충분히 이해가 가능하다. 

username.github.io 의 이름을 가진 저장소를 만들면 끝이다. (공식 사이트)

위와 같이 만들어진 저장소가 웹사이트의 기본 도메인이 된다.

즉, https://username.github.io 을 접속하면 저장소의 루트에 있는 README.md 또는 index.html 내용이 출력된다.

Github Pages 의 대한 저장소가 만들어진다면, 다음과 같은 형태로 다른 저장소들의 대해서도 접근할 수 있다.

https://[username].github.io/[projectName]

위와 같은 형태로 Github Pages 를 이용하기 위해서는 약간의 설정이 필요하다.

다음 예시를 통해 확인해보자.

위와 같이 특정 저장소에 대해 루트 경로에 docs 라는 디렉토리를 생성하여 웹사이트를 관리할 수 있다.

그로인해, 관리 및 가독성에 피해가 가지 않게 된다.

Github Pages 에 대한 소스는 master, gh-pages, master/docs 브랜치(branch)를 통해 설정할 수 있다.

자세한 건 공식 문서를 참고바란다. (Github Pages Basics)

결론적으로는, 저장소의 루트 경로에서 /docs 디렉토리를 통해 저장소의 내용을 /docs 디렉토리를 통해 관리하는 것이다.

물론, 필수가 아니라 본인의 선택이다.

위처럼 사용하기 위해서는 각 저장소의 Setting 메뉴에서 설정을 해주면 된다.

그림처럼 https://username.github.io/projectName 경로를 통해 웹사이트를 보여줄 수 있게 된다.

각 저장소의 source 에 대한 기본 설정은 None 이기 때문에 Github Pages 가 활성화 되어있지 않다.

반드시 위처럼 select source 를 통해 활성화해줘야한다.

위 내용을 이해했다면, 본인이 원하는 대로 설정하여 사용할 수 있다.

그 중 하나의 예로, vue-cli 를 적용하는 것이다.

Github Pages 에 vue-cli 를 어떻게 적용하는가?

vue-cli 프로젝트를 생성한 후, 경로에 대해 2가지를 수정해야한다.

첫번째는 기본적으론 vue-cli 프로젝트의 빌드는 dist 디렉토리를 바라보고 있기 때문에, docs 로 수정해야한다.

두번째는 리소스 접근 경로를 위한 작업이 필요하다.

config/index.js 파일을 통해 수정할 수 있다.

build: {
    index: path.resolve(__dirname, '../docs/index.html'), // dist -> docs
    assetsRoot: path.resolve(__dirname, '../docs'), // dist -> docs
    assetsSubDirectory: 'static',
    assetsPublicPath: '', // '/' -> ''
    ...............
}

수정한 후, 빌드를 통해 생성된 파일(docs/*) 들과 함께 push 한 후, 소스에 대해 master/docs 설정을 해주면 원하는 결과를 확인할 수 있다.

vue-cli 적용에 대한 전체적인 흐름은 다음 링크를 참고하길 바란다.

https://stackoverflow.com/questions/47615863/problems-deploying-to-github-pages-with-vue-project