【Netlify】手元の index.html を 10 分で一般公開する方法

こんにちは！今回は，手元のエディタで作成した（マークアップされた） HTML ファイル等を簡単に Web サイトとして公開する方法について解説したいと思います！

[Netlify](https://www.netlify.com/) を用いてデプロイ（公開）する方法について解説します．
本記事では，
> 「GitHub ってなに?」

という人でもお手軽にできる方法になっております！

## なぜこの記事を書こうと思ったのか
友人が，
> 「制作会社への転職活動でポートフォリオとして静的サイトを作成したけどうまく公開できなくて困っている．」

と言っていました．
`index.html` や `all.css` のようなファイルを zip ファイルとして提出していたりしてたので，Netlify を激推してきた．というのが背景にあります．

そのときに行った手順を今回は，解説しようと思っています．

## 初手
手元で `index.html` を作成しましょう．[VSCode](https://code.visualstudio.com/) なり [Atom](https://atom.io/) のエディタを使って「`test` というフォルダの中に」`index.html` を作りましょう．

👇こんな感じで作成します．

```test/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
```

`index.html` を，
`Chrome` なり`Safari` などのブラウザにドラッグアンドドロップすると

[![Image from Gyazo](https://i.gyazo.com/4db0e3c8710e80b6de57b41bf5b22bb9.png)](https://gyazo.com/4db0e3c8710e80b6de57b41bf5b22bb9)

こんな感じで表示されると思います．

あとは，自分なりにお洒落にマークアップを施してください！

これを Netlify を使って実際に Web サイトとして公開していきます．

## Netlify に登録する
公開する前にまずは [Netlify](https://www.netlify.com/) に登録をしましょう．GitHub のアカウントを持っている人はGitHub でサインアップすることを勧めますが，メールアドレスでもアカウントを作成できます．

- [Netlify](https://www.netlify.com/) 👈ここにアクセスします
- サインアップします
[![Image from Gyazo](https://i.gyazo.com/83b7935479cc34f540785718fb9a1fc0.jpg)](https://gyazo.com/83b7935479cc34f540785718fb9a1fc0)

- アカウントを作成します 🚀
[![Image from Gyazo](https://i.gyazo.com/75c73ee455f36e546e724f733394220f.png)](https://gyazo.com/75c73ee455f36e546e724f733394220f)
[![Image from Gyazo](https://i.gyazo.com/cd4e0a1075262b4969e89b84b359e66c.png)](https://gyazo.com/cd4e0a1075262b4969e89b84b359e66c)

- メールアドレスの認証を終え，ログインすると下記のような画面になるはずです 🤗
[![Image from Gyazo](https://i.gyazo.com/b198c68bb728af936a2e5b1b98dc0616.png)](https://gyazo.com/b198c68bb728af936a2e5b1b98dc0616)

## Netlify で公開する
あとは超簡単です．
チュートリアルをスキップして現れたサイトの真ん中の方にある点線の部分に先ほど作成した，`test/index.html` をドラックアンドドロップするだけです．
[![Image from Gyazo](https://i.gyazo.com/8c21ed6213f689b48230f066cb808236.png)](https://gyazo.com/8c21ed6213f689b48230f066cb808236)

👇こういう感じです！
[![Image from Gyazo](https://i.gyazo.com/0e1295c30b9fd82668a415e4027fc031.gif)](https://gyazo.com/0e1295c30b9fd82668a415e4027fc031)

あとは，Netlify 側で作成された URL にアクセスするだけで公開されたことが確認できます．
[![Image from Gyazo](https://i.gyazo.com/908e04d9714de44550b8347c33e235bf.png)](https://gyazo.com/908e04d9714de44550b8347c33e235bf)

🌟実際にできたサイトはこちら！
[![Image from Gyazo](https://i.gyazo.com/4521804e654ef901dcdd2b498ce30f32.png)](https://gyazo.com/4521804e654ef901dcdd2b498ce30f32)

超簡単ではないでしょうか！
この URL にアクセスしさえすればどこからでも誰からでも静的サイトを閲覧することが可能になります！

## おまけ

### 🌊 更新した際にデプロイ（公開）しなおす
今回解説している方法は，GitHub 等を使って自動でデプロイする手法ではなくマニュアルでデプロイする方法になります．なので，作成したサイトに変更がある際は随時自分でデプロイしなおさないといけません．GitHub 等をしようして自動でデプロイを行いたい場合は他の記事を参考にしてみてください．

- Deploys に移動する
[![Image from Gyazo](https://i.gyazo.com/ae8acc6de25af2d922040fdd858e3b43.png)](https://gyazo.com/ae8acc6de25af2d922040fdd858e3b43)

- 最初の方法と同じように点線部分にドラックアンドドロップする
[![Image from Gyazo](https://i.gyazo.com/a27adb4d14da7824c92869646fb9bc25.png)](https://gyazo.com/a27adb4d14da7824c92869646fb9bc25)


### 😈 サイトの名前を変更する
URL が変だと少しテンションが下がりますよね．．
なので，名前を変更する手順も紹介します．

- Site settings をクリックする
[![Image from Gyazo](https://i.gyazo.com/2033f99ef94727ddcb346e530448208e.png)](https://gyazo.com/2033f99ef94727ddcb346e530448208e)

- General に入っている Site Details > Site information の Change site name をクリックする
[![Image from Gyazo](https://i.gyazo.com/25a4e5ec366bf434f96794144051d000.png)](https://gyazo.com/25a4e5ec366bf434f96794144051d000)

- 立ち上がってきたモーダル内で自分が設定したいサイトの名前を入力するだけ！
[![Image from Gyazo](https://i.gyazo.com/03bfe8338a782011195da5a005a05f42.gif)](https://gyazo.com/03bfe8338a782011195da5a005a05f42)

他と被ってなければ設定することが可能です！そして，元のページに戻れば変更を確認できます．
[![Image from Gyazo](https://i.gyazo.com/ae4598f86787768ee10928dceab9501b.png)](https://gyazo.com/ae4598f86787768ee10928dceab9501b)

## 終わりに
以上が今回の Netlify を用いて**お手軽に**静的サイトを公開する方法になります．
ぜひ試してみてください〜！