Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

あら便利カレンダー2018というのをやってます。

去年のもあるようです。(あら便利カレンダー2017
が、僕は最近joinしたので今年からの参加になります。

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

概要

あら便利カレンダー2018どうやって公開する?」
「GitHubPages?(思考停止)」
Netlifyちょっと使ってみたいな」
「じゃあそれで決定」

みたいな流れで、あら便利カレンダー2018はNetlify上に載せることになりました。

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

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

Netlifyとは

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

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

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

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

などなどがあります。

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

早速使ってみる

事前準備

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

スクリーンショット 2018-07-03 17.22.57.png

ちなみに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にアクセスし、Get started for freeから始める。

スクリーンショット 2018-07-03 12.34.08.png

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

スクリーンショット 2018-07-03 12.34.22.png

New site from Gitから新規作成。

スクリーンショット 2018-07-03 13.16.27.png

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

スクリーンショット 2018-07-03 12.36.31.png

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

スクリーンショット 2018-07-03 17.23.37.png

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

[ Deploy site ]をクリック。

スクリーンショット 2018-07-03 17.23.51.png

もうこれでおしまい。

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

スクリーンショット 2018-07-03 17.58.54.png

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

スクリーンショット 2018-07-03 18.00.39.png

サイトの更新

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

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

自動で更新される!

ss.png

サイトの設定

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

スクリーンショット 2018-07-03 18.02.39.png

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

カスタムドメイン

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

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

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

スクリーンショット 2018-07-03 18.22.30.png

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

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

まとめ

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

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

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

sugo
バックエンドエンジニアです。 awsでのインフラ構築とtypescriptでのAPI開発をよくやります。 技術に関する調査や検証の備忘録としてqiitaを利用。
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away