こんにちは!
東京都 新型コロナウイルス感染症対策サイトのコードがGitHubに載っているのはご存知でしょうか?ここからGithubでコードの確認ができるのでまだみたことがない方は、一度見てみてください。
また、Issueは誰でも参加できるので、できそうなものがあれば行ってみるのも良いかもしれません。(私は、簡単なIssueをいつもやっています。)ここに貢献方法が書いてあるので参考にしながらやってみてはいかがでしょうか?
今回、私の住んでいる市の新型コロナウイルス感染症対策サイトを作るにあたっていろいろあったので書いていこうと思う。
作ったサイト
今回、私は東京都の新型コロナウイルス感染症対策サイトを編集(?)していて自分の住んでいる市にもこんなにきれいにグラフと書かれているサイトがあったら良いのになと思いました。作り始めたときは、本当に完成するのかと少し悩んだのですが時間もあったので作ってしまいました。
私の住んでいる市は、神奈川県相模原市です。なので、今回作成したサイトは、相模原市の新型コロナウイルス感染症対策サイトとなっています。
下記にリンクを貼っておきます。見ていただけるとありがたいです👍
Netlify
サイトのホスティング
今回、サイトのホスティングを行ったサービスにNetlifyを利用しました。他にもいろいろありますが、東京都のGitHubでもNetlifyを利用して作成しているようでしたので今回は、Netlifyを利用しました。
今回、GitHubに更新があると自動的にNetlifyでも更新されるようにデプロイしました。そのため、Build Command には、yarn install; yarn run generate;echo -e “User-agent: *\nDisallow: /” > ./dist/robots.txtと入力することにより自動的にビルドし始めます。(この方法では、robots.txtのファイルが"User-Agent: *\nDisallow: / "となりSEOで巡回するさいDisallowとなります。)これは、とても便利なのですが困ったことに無償版ではビルド時間が300分までと指定されています、なのでこんなビルドコマンドを利用していると何回も更新しているうちに時間がなくなってしまいます...解決方法として以下の方法があります。
Covid19-Support
なんとNetlifyでは、コロナに関連するサイトを作成しているチームに時間制限を無くしてくれる(他にもいくつか特典がありますが...)というサポートを行ってくれています。このサポートは、自分的にはとてもありがたかったです。もし、サポートを受けたいという方は、ここにリンクを貼っておくので是非参加してみてはいかがでしょうか?(コロナ関連以外のサイトをホスティングしてはいけません 笑)
私は、申請をしてから翌日には審査に通ってメールでサポートつけといたよみたいなのがメールできました。
Google Analytics
自分的にはかなり悩みました。つけても良いのですが、自分のコードがGitHubでクローンされたときその人がそのまま私のIDを利用されてしまうかもしれないと思いました。東京都の方を見ると.envに書いているようで.gitnoreで.envはアップロードされないようになっていました。(初期でそうなりますが...)
自分のサイトは、NetlifyでGitHubのコードをそのままホスティングするので、仕方なくmasterブランチ(公開用)で.gitnoreから.envを消去して、.envにトラッキングIDを書き込み、今のところは動作させています。(どなたか解決方法をご存知の方は教えてください)
Google Search Console に気づかれるまで
この内容は新しく作成しました。(2020年12月30日)
サイトを作ったのは良いもののGoogleの検索結果に載らなくては、見てもらえません。
なので、自分の作っているブログに記事を書いたりQiitaに記事を書いたりしました。(リクエストもしました)
で、Qiitaに記事を書いてから半日ぐらいですぐにサイトがGoogleに登録されました!(Qitaすご〜い!!)実は、過去にも自分のブログで、最初のころは、Googleに載らなかったのですがQiitaにサイトのドメインを貼ったところすぐにGoogleに登録されました。なんか、すごいなと思いました。最初のころはGoogle検索に載らなくてとてつもなく頑張っていたのがなんか懐かしいです笑
もし、自分のサイトをGoogle検索に載っけたいという方は、自分サイトの仕様を紹介した記事を、サイトのドメインを貼り付けながらQiitaで紹介するのが良いかもしれないです。
ちなみに、自分のブログはこちらから是非みてください笑(似たような内容を違った視点から来ています)
ドメインを購入しました
この内容は新しく作成しました。(2021年1月2日)
あけましておめでとうございます!笑
netlify.appというドメインは少しダサいなと思いましたのでドメインを購入しました。(お名前.comさんで購入させていただきました。(comドメインがとても安かったので...))
本当は、GitHub Student Pack で.techとか.meドメインが無料だからそれで良いかなと思っていたのですが.comドメインの安さに購入してしまいました。この記事のURLは、全て更新しました。
ドメインを購入したのでnetlify.appの旧ドメインでアクセスをするとAnalyticsの結果がばらついてめんどくさいのでリダイレクトさせました。Netlifyのリダイレクト方法は、_redirects
を書いて、staticフォルダの中に入れるだけです。
http://sagamihara-stopcovid19.netlify.app/* https://sagamihara-stopcovid19.com/:splat 301!
https://sagamihara-stopcovid19.netlify.app/* https://sagamihara-stopcovid19.com/:splat 301!
_redirectsは、このように書くだけです。とても楽です。あと、お名前.comのNSのままだとSSL通信にならないのでNetlifyのNSに変更すると自動的にAレコード(CNAMEだったかも)を設定してくれます。Let's Encryptも利用できます。Let's Encrypt について、一つ気になったのですが、中間認証局名がR3に変わっていました。
相模原市新型コロナウイルス感染症対策サイト(Cloudflare) | 自分の運営しているブログ(Netlify) |
---|---|
最後に
こんな感じで私は、自分の住んでいる市の新型コロナウイルス感染症対策サイトをデプロイしました。まだ、私の作ったサイトをみていない方は、下記からみてください!
コロナの感染者数は増えているので、今から新しく自分の住んでいる市のサイトを作っても遅くないのではないでしょうか?作ってみようと思われた方は、この記事を参考にしていただけると幸いです。
コロナに注意しながら、良いお年を〜〜〜 😊