100엔으로 밴드의 웹사이트를 만들어 보았다

밴드의 웹 사이트를 원했지만,
· 돈을 쓰고 싶지 않다.
· 광고를 원하지 않는다.
・ 여러가지 마음대로 커스터마이즈하고 싶다
라는 상황에서 잘 했던 이야기.

만들고 나서 1년 정도 지나고 있습니다.

(대단한 일은 하고 있지 않습니다만, 선전도 겸해…웃음)

만든 것

여기↓
htps : // drmt 리오. 토키 /

걸린 돈

・도메인 비용 99엔(세금 별도)

만드는 법

1. 열심히 HTML을 결합

bootstrap으로 고리 고리 만들었습니다. agency라는 template를 조금 사용했다.
htps : // s rt 보오 tst 등 p. 코 m / mp ぁ 테 - 오 ょ r ゔ ぃ ws / 아겐 cy /

2. Github로 푸시합니다.

밴드용 GitHub 계정도 만들었다.
organization 계정으로 만들어야 했다…
htps : // 기주 b. 코 m / DRMt 리오

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에서 직접 설정하는 방법이 없었기 때문에, 열심히 구구해 했습니다만,
지금은 직접 설정할 수 있다는 것. 이 기사 참조.

이번이야말로 완성. 하지만 운영이 어렵습니다.

할 수 있었습니다. (재게재)
htps // drmt 리오. 토키 /
그러나 모두 귀찮아서 관리가 번거롭다.
Live 스케줄을 업데이트하고 싶을 때 HTML을 다시 쓰는 것이 꽤 힘들다.
그리고 또한 회원에게 불평을 받았기 때문에 Google Spreadsheets에서 관리하자! 라는 것에.

8. Google Spreadsheets에서 Live 스케줄 업데이트

먼저 라이브 스케줄을 작성한 스프레드 시트를 준비합니다.

처음에는 GAS에서 Spreadsheets의 내용을 반환하는 API를 구현하려고했습니다. 왠지 인증? 하지만 귀찮아.
Spreadsheets 자체에 API가 있기 때문에 그쪽을 사용하기로 결정했습니다.

Spreadsheets의 "파일"→ "웹에 공개"→ "csv 형식"→ 나온 URL을 복사
이것만으로 전체 파일의 정보를 반환하는 API를 만들 수 있습니다.

API를 호출하는 JavaScript를 준비합니다.
CSV의 취급은 이것이 편리.
htps : // 기주 b. 코 m / 에ゔ ぁ ぁ 이세 / j 쿠 ry-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을 포함시키는 것은 공식적인 것을 사용하는 것이 편리.

그 후

이렇게 만든 웹사이트는 공개로부터 1년이 지났습니다
그러고 보니 도메인의 유효기간, 1년이었지…
라고 생각하고 있으면, 도메인은 자동 갱신해 주었습니다만, 확실히 1000엔 근처 잡혀 있었습니다.