Elm 페이지를 GitHub Pages에 게시하기위한 템플릿

이전부터라면 자신이 사용할까라고 생각하고 있었다CI를 통해 GitHub Pages에 Elm 페이지를 자동 배포하는 템플릿를 만들어 보았습니다.

Elm Advent Calendar 2018 18일째의 기사입니다. 늦어서 죄송합니다 😢

사용법

전제

yarn이 로컬로 설치 있다고 가정하는 템플릿입니다.

리포지토리 초기화

GitHub에서 리포지토리을 포크하거나,

git clone https://github.com/kory33/elm-gh-pages-template <プロジェクト名>
cd <プロジェクト名>
git remote set-url origin <新規リポジトリURL>
git push -u

에서 로컬로 복제된 리포지토리를 새 리포지토리로 푸시합니다. 포크한 경우 필요에 따라 리포지토리의 Settings에서 리포지토리 이름을 변경합니다.

CircleCI에서 설정

CircleCI가 빌드 아티팩트를 커밋하고 푸시하려면 리포지토리에 대한 권한이 필요합니다.
개인 키를 CircleCI에 등록하고 이것을 할 수 있습니다. 하지만 보다 간편한 액세스 토큰을 사용한 방법을 소개합니다.

GitHub의 오른쪽 상단에있는 사용자 아이콘> Settings> Personal settings 열 아래의 Developer settings> Personal access tokens로 이동하여 GitHub API를 사용하는 액세스 토큰을 관리하는 페이지로 이동합니다. 합니다.

Generate new token를 클릭하면 토큰 범위를 지정하는 화면이 열리므로 repo를 선택합니다.


생성된 토큰을 복사하여 CircleCI으로 돌아갑니다.
왼쪽 하단의 Settings > Projects로 이동하여 초기화된 프로젝트의 오른쪽 끝에 있는 설정 편집 버튼을 누릅니다.Environment Variables에서 Add Variable를 클릭하고 Name에 GITHUB_PERSONAL_TOKEN, Value에 방금 복사 한 토큰을 붙여 토큰을 추가합니다.

ADD PROJECTS에서 복제된 프로젝트를 선택합니다. Start Building를 누르면 프로젝트 자체의 설정이 끝납니다. 그리고는 yarn start 로 세우는 개발용 서버로 디버그를 실시하면서 Elm등을 써 갑니다.

master 에 push

게시가 가능한 상태가 되면master에 push를 하는 것으로 gh-pages 브랜치에 커밋이 추가됩니다. master 로의 푸시로만 CircleCI 가 반응합니다만, 이 거동은 변경할 수 있습니다. (참조 : ./circleci/config.yml)

TODO

일단 gh-pages 브랜치에서 빌드가 실행되면 ./circleci/config.yml가 존재하지 않더라도 빌드가 계속 실행되지 않습니다. 결과 내 Gmail이 실패 알림으로 채워졌습니다. 수정이 필요할 것 같습니다.

EDIT: gh-pages 브랜치에서 빌드가 항상 성공하도록수정 했습니다.