以前からあったら自分が使うかなと思っていた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を使うためのアクセストークンを管理するページにたどり着きます。
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ブランチでのビルドを必ず成功させるように修正しました。