バンドのWebサイトが欲しかったのですが、
・お金はかけたくない
・ 広告出てほしくない
・ いろいろ勝手にカスタマイズしたい
という状況でうまくやった話。
作ってから１年ぐらい経っています。
（大したことはしていないのですが、宣伝も兼ねて…笑）
作ったもの
かかったお金
・ドメイン費用 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円近く取られていました。 
