Posted at

100円でバンドのWebサイトを作ってみた

More than 1 year has passed since last update.

バンドのWebサイトが欲しかったのですが、

・お金はかけたくない

・ 広告出てほしくない

・ いろいろ勝手にカスタマイズしたい

という状況でうまくやった話。

作ってから1年ぐらい経っています。

(大したことはしていないのですが、宣伝も兼ねて…笑)


作ったもの

こちら↓

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サイトは、公開から1年が経ちました :congratulations:

そういえば、ドメインの有効期限、1年だったよな…

と、思っていたら、ドメインは自動更新してくれたのですが、がっつり1000円近く取られていました。 :angel:

image.png