Netlifyで静的サイトのホスティングをする


[あら便利カレンダー2018](https://benri2018.rnd.cloudpack.jp/)というのをやってます。

去年のもあるようです。（[あら便利カレンダー2017](https://cloudpack.github.io/benri2017/)）
が、僕は最近joinしたので今年からの参加になります。

~~**あら＾〜便利カレ(ry**~~
...あら便利カレンダー2日目の記事です。

# 概要

「[あら便利カレンダー2018](https://benri2018.rnd.cloudpack.jp/)どうやって公開する？」
「GitHubPages?（思考停止）」
「[Netlify](https://www.netlify.com/)ちょっと使ってみたいな」
「じゃあそれで決定」

みたいな流れで、[あら便利カレンダー2018](https://benri2018.rnd.cloudpack.jp/)はNetlify上に載せることになりました。

基本的にAPI等の開発をするのがメインなのですが、そんな僕でも簡単にサイト公開までできました。

Netlifyでサイト公開するまでの流れを書き残しておこうと思います。

# Netlifyとは
静的コンテンツのホスティングサービス。
使い勝手の良いUIと、簡単な手順で公開までできるのがめっちゃよい。

GitHub / GitLab / Bitbucket のリポジトリと連携して、pushやmergeなどがあったらNetlifyCIがビルドやデプロイをしてくれる感じになっている。

## 無料の範囲でも結構盛りだくさん

- カスタムドメイン運用
- SSL
    - Let's encryptで証明書を発行してる
    - もちろん自前で証明書があればそれも使える
- アドオン
    - lambda関数
    - フォーム

などなどがあります。

webhookやCLI、APIなどもあるようでかなり高機能っぽい感じしてる。


# 早速使ってみる

## 事前準備

公開したいサイトのリポジトリを作っておく。

<img width="1005" alt="スクリーンショット 2018-07-03 17.22.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/5d2b7210-a91e-53ce-2d02-76d006009f89.png">

ちなみにHTMLファイルの中身。

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test site</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>
```


## Netlifyでデプロイするまで

[Netlify](https://www.netlify.com/)にアクセスし、`Get started for free`から始める。

<img width="1186" alt="スクリーンショット 2018-07-03 12.34.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/546c089d-3116-e0d5-07fc-a9cdcf8d8906.png">



今回はGitHubに作成したので、GitHubアカウントでログインする。

<img width="810" alt="スクリーンショット 2018-07-03 12.34.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/7cdc4b8a-717e-d934-14f7-280af59021ca.png">


`New site from Git`から新規作成。

<img width="1244" alt="スクリーンショット 2018-07-03 13.16.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/aab62982-eb5c-b63d-cec5-813c5590935b.png">


`GitHub`をポチッとする。
初めてだと、**「NetlifyがGitHubにアクセスしても良いかな？」**的な権限の承認みたいなのを求められた気がする。

<img width="752" alt="スクリーンショット 2018-07-03 12.36.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/92003a4d-264f-58f8-d6b1-c8bf38703778.png">

GitHubリポジトリの一覧が出てくるので、公開するものを選択。

<img width="724" alt="スクリーンショット 2018-07-03 17.23.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/dd739ef8-a67c-80e4-128a-1732ec453ef4.png">

デプロイの設定。
masterブランチをデプロイするようにしている。
また、静的サイトジェネレーター（Jekyllとか）を使う場合はビルドコマンドが必要だが、そのコマンドもここで設定できる。

[ Deploy site ]をクリック。

<img width="712" alt="スクリーンショット 2018-07-03 17.23.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/f201a3fe-1d6b-4e6a-44df-18d0bb897059.png">

もうこれでおしまい。

これでサイトの公開までできたってんだからすごい。

<img width="1211" alt="スクリーンショット 2018-07-03 17.58.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/872ad0e3-c4b5-c038-db7c-1f63ed582184.png">


デフォルトでHTTPSになっていて、ちゃんと公開されてる。すごい。

<img width="463" alt="スクリーンショット 2018-07-03 18.00.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/66cf6627-9c72-1562-3497-678d87aaba9a.png">



## サイトの更新

サイトに変更を加えてみる。

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>テスト サイト</title>
</head>
<body>
    <p>こんにちは 世界</p>
</body>
</html>
```

変更をGitHubにpush

```
$ git add .
$ git commit -m "日本語に変更"
$ git push
```

**自動で更新される！**


<img width="463" alt="ss.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/602e37c1-d4e2-e721-6600-ed7ab6f2a99b.png">



## サイトの設定

自動生成されたURLのままだとさすがにひどすぎるので、変更しておく。
ダッシュボードから`Site settings`をクリック。

<img width="924" alt="スクリーンショット 2018-07-03 18.02.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/06d06605-8069-6b81-5d6c-ec0555be51b7.png">

[Change site name]から `.netlify.com` より前の部分を任意に変更できる。




### カスタムドメイン

ダッシュボードから `Domain settings`をクリック。

`Add custom domain`からカスタムドメインをあてることができる。

カスタムドメイン適用後に、https化やhttpへのアクセスをリダイレクトするなど細かい設定をしていく。

<img width="697" alt="スクリーンショット 2018-07-03 18.22.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/213486/324b8db9-fdee-d027-8116-3dc07530d6c5.png">

詳細な設定なんかはこちらを参考にさせていただきました。
https://www.d4af.com/post/2017/10/netlify2/
http://magcho.hatenablog.jp/entry/2017/10/15/023440

ちなみにDNSに関して、今回僕はAWSのRoute53を使いました。

# まとめ

促されるままに設定していくとサイトの公開や設定が終わってた印象。
英語があまり得意でなくても、かなり簡単に公開までたどり着けるかと思います。

みなさんも一度お試しあれ！

無料のサービス使うたびに、いつかお布施的にお金落とさなきゃなという使命感にかられる僕でした。