Edited at
ElmDay 18

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

でローカルにクローンしたリポジトリを新規リポジトリにpushしてください。フォークした場合、必要に応じてリポジトリのSettingsからリポジトリ名を変更してください。


CircleCIでの設定

CircleCIがビルド成果物をコミットしてプッシュするためにリポジトリへの権限が必要になります。

秘密鍵をCircleCIに登録してこれを行っても良いのですが、より手軽なアクセストークンを使った方法を紹介します。

GitHubの右上のユーザーアイコン > Settings > Personal settingsカラムの下にあるDeveloper settings > Personal access tokensの順でリンクをたどると、GitHub APIを使うためのアクセストークンを管理するページにたどり着きます。

image.png

Generate new tokenをクリックするとトークンのスコープを指定する画面が開くので、repoをチェックします。

image.png

生成されたトークンをコピーしてCircleCIへ戻ります。

左下のSettings > Projectsと辿り、初期化したプロジェクトの右端にある設定編集ボタンを押します。

Environment VariablesAdd Variableをクリックし、NameGITHUB_PERSONAL_TOKENValueに先ほどコピーしたトークンを張り付け、トークンを追加します。

image.png

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ブランチでのビルドを必ず成功させるように修正しました。