Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ElmのページをGitHub Pagesに公開するだけのテンプレート

More than 1 year has passed since last update.

以前からあったら自分が使うかなと思っていた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ブランチでのビルドを必ず成功させるように修正しました。

Kory__3
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away