FooBar

note to self

Netlifyで静的サイトを公開する

こんにちは。本日はホスティングサービスのNetlifyを使って静的サイトを公開する方法です。
自分のサイトを公開するのにGitHub PagesやHeroku、firebaseなどを使っていましたが、Netlifyを使ったことがなかったので、今回備忘録として手順を残しておきます。英語のサイトなので手助けになれば...

Netlifyとは

静的コンテンツのホスティングサービス。
同じジャンルだとGitHub Pagesや最近だとGoogleのFirebaseが有名ですかね。

UIが優れていて誰でも簡単に操作できます。ユーザー目線に立っているのが伝わってきますね。(こうゆうサービスは応援したい)

わずか3ステップでサイトを公開できて、コマンドラインを使わなくても公開できます。
またコマンドラインを使う方法だと、リポジトリと連携して指定したブランチにPushすると自動でビルドやデプロイまでしてくれます。

Netlifyでアカウント登録

Netlify (https://www.netlify.com/) は無料で登録可能です。
サイトに行ってGet started for freeから登録します。

f:id:otsukasatoshi:20190929132159p:plain

メールや各リポジトリホスティングサービスで登録できます。
今回はGitHubで登録してみます。

f:id:otsukasatoshi:20190929132228p:plain

GitHubと認証します。ここは書いてある通りに進めればOKです。

f:id:otsukasatoshi:20190929132906p:plain

認証が通るとプロジェクト作成画面に移ります。
これで登録は完了です。

GitHubと連携とデプロイ

認証が終わると以下のような画面になるのでNew site from Gitのボタンを押してプロジェクトを作成します。

f:id:otsukasatoshi:20190929132955p:plain

NetlifyはGitHubやBitbucketなどのサービスと連携して、指定したリポジトリを簡単にデプロイできます。

f:id:otsukasatoshi:20190929131724p:plain

今回はGitHubの既存のリポジトリでデプロイするので、上の画像でいうGitHubのボタンを押します。

すると既存のリポジトリ一覧が表示されるので、デプロイしたいものを選択します。(privateリポジトリも選択できます)

f:id:otsukasatoshi:20190929144103p:plain

どのブランチをデプロイ対象にするか選択します。

f:id:otsukasatoshi:20190929143805p:plain

デプロイ時にビルドする設定もできます。
(今回は特に設定はしません)

f:id:otsukasatoshi:20190929143830p:plain

すると以下のようなデプロイ完了画面が出てきます。
なんとこれで終わりです!

f:id:otsukasatoshi:20190929143852p:plain

払い出せれたURL******.netlify.comにアクセスすると自分のサイトが公開されているはずです。

独自ドメインを設定する

Netlifyは簡単に独自ドメインも設定できます。

プロジェクト管理画面からDomain managementという項目があるので、そこから追加します。

f:id:otsukasatoshi:20190929143921p:plain

指定したいドメインを入れてセットするボタンを押すだけです。

f:id:otsukasatoshi:20190929143943p:plain

するとDNSを設定する部分があるので、クリックして情報をみます。

f:id:otsukasatoshi:20190929151119p:plain

クリックするとドメインにAレコードやCNAMEを設定する値が書かれているので、ドメイン管理をしているサービスで設定します。

以上でNetlifyで静的サイトの公開と独自ドメインの設定は完了です。

かなり簡単にサイトを公開することができました。

本日は以上です。