はじめに

netlifyとは？

Netlifyは静的コンテンツを超高速で提供するWebサービスです。

netlifyの特徴

ビルド、デプロイを自動で行ってくれる
完全無料のSSL/HTTPS
無料枠でも利用できて、独自ドメインも設定できる
GitHub、GitLab、Bitbucketアカウントでログインできる

本書について

本書では、netlify-cliを利用してローカルファイルをデプロイして動作確認まで行います

netlifyにログインして、静的コンテンツをデプロイする場合は下記を参考にしてもらえたらと思います。

https://cross-bench.com/blog/design/1454/
http://dojineko.hateblo.jp/entry/2017/09/17/205259

ここから本題

まずnpmからnetlify-cliをインストールします

$ npm install -g netlify-cli

netlifyと叩いてみる

$ netlify

⬥ Netlify CLI
Read the docs: https://www.netlify.com/docs/cli
Support and bugs: https://github.com/netlify/cli/issues

Netlify command line tool

VERSION
  netlify-cli/2.2.1 darwin-x64 node-v10.2.1

USAGE
  $ netlify [COMMAND]

COMMANDS
  deploy  Create a new deploy from the contents of a folder
  init    Configure continuous deployment for a new or existing site
  link    Link a local repo or project folder to an existing site on Netlify
  login   Login to your Netlify account
  open    Open settings for the site linked to the current folder
  sites   Handle various site operations
  status  Print status information
  unlink  Unlink a local folder from a Netlify site
  watch   Watch for site deploy to finish

version確認

$ netlify -v
netlify-cli/2.2.1 darwin-x64 node-v10.2.1

プロジェクトを作成する

$ netlify init

No git remote found. (╯°□°）╯︵ ┻━┻

It is recommended that you initialize a site that has a remote repository in Github.

This will allow for Netlify Continuous deployment to build branch & PR previews.

For more details on Netlify CI checkout the docs: http://bit.ly/2N0Jhy5

Unable to find a remote origin url. Please add a git remote.

git remote add origin https://github.com/YourUserName/RepoName.git

? Do you want to create a netlify site without a git repository? Yes, create manually deploy site
Choose a site name or leave blank for a random name. You can update later.
? Site name (optional): simple-sample-site
? Account: mollgula  (personal)

Site Created

Admin URL: https://app.netlify.com/sites/simple-sample-site
URL:       https://simple-sample-site.netlify.com
Site ID:   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"simple-sample-site" site was created

To deploy to this site. Run your site build and then netlify deploy

URL:https://simple-sample-site.netlify.com
作成した上記のURLにはアクセスできないですが、デプロイ時に表示されるURLにはアクセスできます。

デプロイするフォルダの作成

$ mkdir sample
$ cd sample
$ touch index.html
$ vim index.html

index.htmlの中身はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My-homepage</title>
</head>
<body>
    <h1>My-simple-site</h1>
</body>
</html>

デプロイしてみる

$ netlify deploy
Please provide a deploy path relative to:
/Users/XXXXXX/Desktop
? deploy path /Users/XXXXXX/Desktop/sample
Deploy path: /Users/XXXXXX/Desktop/sample
Deploying to draft URL...
✔ Finished hashing 1 files
✔ CDN requesting 1 files
✔ Finished uploading 1 assets
✔ Draft deploy is live!

Logs:           https://app.netlify.com/sites/simple-sample-site/deploys/XXXXXXXXXXXXXXXXXXX
Live Draft URL: https://XXXXXXXXXXXXXXXXXXX--simple-sample-site.netlify.com

If everything looks good on your draft URL, take it live with the --prod flag.
netlify deploy --prod

アクセスする

Live Draft URL: https://XXXXXXXXXXXXXXXXXXX--simple-sample-site.netlify.com

デプロイできた！！

以上です。
ここまで読んでいただきありがとうございました。