はじめに
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
デプロイできた！！
以上です。
ここまで読んでいただきありがとうございました。