作ったもの

こちら↓
https://drmtrio.tokyo/

かかったお金

・ドメイン費用 99円（税抜）

作り方

1. 頑張ってHTMLを組みます

bootstrapでゴリゴリ作りました。agencyっていうtemplateをちょっと使った。
https://startbootstrap.com/template-overviews/agency/

2. Githubにpushします。

バンド用のGitHubアカウントも作った。
organizationアカウントとして作るべきだったな…。
https://github.com/DRMtrio

3. GitHub Pagesとして公開します。

GitHubのSettings→GitHub Pagesから簡単に公開できます。

4. ドメインを取得します。

本当は「DRMtrio」というバンド名なので「drmtr.io」にしたかったのですが、
「.io」は4000円ぐらいしたので、貧乏なバンドには取得できませんでした。
お名前.comで「.tokyo」が1年間99円だったので取得。

5. DNSの設定。

こちらの記事を参照

6. CNAMEの作成。

「CNAME」というファイル名のファイルを作って、そこに取得したドメインを書き込んで、GitHubのレポジトリに置く。

完成！

完成したのでバンドメンバーに見せたところ、
「前（広告が出てしまうサイト作成サービスを使っていたとき）はHTTPSやったのに、なんでHTTPなん？ブラウザから警告出るよ？」
と言われ、キレそうになりながらHTTPS化。

7. HTTPS化

このサイト作成当時はGitHub Pagesで直接設定する方法がなかったので、頑張ってググってやったのですが、
今は直接設定できるとのこと。こちらの記事を参照。

今度こそ完成。でも運用が大変

できました。（再掲）
https://drmtrio.tokyo/
しかし、みんなめんどくさがりなので、管理が面倒。
Liveスケジュールの更新をしたいときに、HTMLを書き換えるのかなりしんどい。
と、またメンバーに文句を言われたため、Google Spreadsheetsで管理しよう！ということに。

8. Google SpreadsheetsからLiveスケジュールを更新する

まずはLiveスケジュールを書いたSpreadsheetsを用意します。

当初は、GASでSpreadsheetsの内容を返すAPIを実装しようとしていたのですが、なんだか認証？が面倒。
Spreadsheets自体にAPIがあるので、そちらを使うことにしました。

Spreadsheetsの「ファイル」→「ウェブに公開」→「csv形式」→出てきたURLをコピー
これだけでファイル全体の情報を返すAPIが作れます。

APIを呼ぶJavaScriptを用意します。
CSVの扱いはこれが便利。
https://github.com/evanplaice/jquery-csv

var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTVKf_Rkxg-ytKIFxdNyXudY_Kp0EcMA09HXqaSdpOutV1_joZWIZYJ9KLIejRPdKIPAE1wFoqVyz6y/pub?gid=0&single=true&output=csv";
$.ajax({
  url: url
  ,success: function(data) {
    var list = $.csv.toObjects(data);
    var htmls = [];
    for (var i=0,len=list.length;i<=len;i++) {
      var l = list[i];
      if (l) {
        htmls.push(`<div class="col-md-2">
                      <div class="text-center">
                        <h6>${l.date}</h6>
                        <p class="text-muted">Open ${l.open} Start ${l.start}</p>
                      </div>
                     </div>
                     <div class="col-md-10">
                       <h5>${l.name}</h5>
                       <p class="text-muted">@${l.place}<br>${l.act}<br>${l.price}<br><a href="${l.url}">more info</a></p><br>
                     </div>`);
      }
    }
    $("#schedule").html(htmls.join(""));
  }
})

あとはこんな感じ。template記法便利。

9. widgetをいろいろ足す

Twitter、YouTube、Instagramを埋め込むのは、公式のものを使うのが便利。

その後

こうやって作ったWebサイトは、公開から１年が経ちました
そういえば、ドメインの有効期限、１年だったよな…
と、思っていたら、ドメインは自動更新してくれたのですが、がっつり1000円近く取られていました。