1.2 無料のホスティングサービスを使う

<!-- https://qiita.com/sugo/items/2ee64887d682b0dae635 -->

# 1. ホスティングとは

ホスティングとは**<font color="red">「サーバを借りること」</font>**です。
**<font color="red">レンタルサーバー</font>**とも言います。

ホスティング先（レンタルサーバ）によって、料金プランや表示速度、オプションが違います。

# 2. ホスティング先の種類

[FC2レンタルサーバー](https://fc2-rentalserver.com/)
[ロリポップ](https://lolipop.jp/)
[さくらのレンタルサーバ](https://rs.sakura.ad.jp/)
[エックスサーバー](https://www.xserver.ne.jp/)
[カゴヤ・ジャパン]()

などがあります。

# 3. Netlifyで静的サイトをホスティングしてみよう

今回は、htmlやcss、javascriptを触りながら実際にどのようにインターネットで表示、動作する確認するため、

- GitHub
- Netlify

というサービスを使用することにします。


## 3.1 GitHubにアカウントを登録する

[GitHub](https://github.co.jp/)にアクセスし、`GitHubに登録する`ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/4254763c-0c25-a424-597c-42636365c988.png)

UseName, EmailAddress, passwordを入力後、検証ボタンを実行し、`Create account`ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/a7ad6557-f74a-48dd-ba0c-58600a869ec7.png)

その後、学生なのかどうかの選択や、Eメールによる認証などありますので進めてください。

## 3.2 リポジトリの作成
`Create repository`ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/b4cd66bf-6836-dc80-62d9-feab36fb71dc.png)

下記のように入力し`Create repository`をクリック。※リポジトリ名はそれらしい名前にしておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/e29cef92-0c8c-ad5b-9abd-08b0bc3452ae.png)

index.htmlを作成しておきます。

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test site</title>
</head>
<body>
    <p>これをインターネットで表示します。</p>
</body>
</html>
```

`Add file`⇒`Upload files`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/730554a2-d559-b9b0-9231-10d0bc1d6a16.png)

赤枠内にファイルをドラッグアンドドロップするか`choose your files`をクリックし、ファイルを選択する。（背景が黒になっていますが、表示設定の違いですので気にしないで下さい。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/ac0f2498-3daf-41e4-1aad-c5e24192be1d.png)

指定したファイルが表示されていることを確認。下にスクロールして、`Commit changes`をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/8f058e7d-dca0-30c9-7177-fdd79dd15149.png)


以下のようにREADME.mdファイルと同じ階層にindex.htmlがアップロードされていることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/da8cb9a0-f583-db67-c443-1ae145e1ec69.png)

# 4. Netlifyにアクセスし登録

[Netlify](https://www.netlify.com/)にアクセスし、`Get started for free`をクリックします。

GitHubボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/1fd94695-32ba-2e9c-bcec-1dd54051d998.png)

適当な値を入力し`Set up and continue`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/c00c3c95-6921-23b1-84f1-68d0357713a7.png)

`New site from git`ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/07a0a469-1830-0402-6e2b-fcb5ebd0ea74.png)

Githubボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/b29218b8-3c63-2e5b-39c8-b7210234b2df.png)

途中Autholize Netlifyのような画面が出てくるが、Autholizeボタンをクリックし認証しておきます。

公開するリポジトリを選択しinstallボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/6ca739e0-5760-615e-e34c-4ef8cc89f46f.png)

そのままDeploy siteをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/1fd756d4-89a7-beb0-5b28-a5d978546468.png)

以下のNetlify画面でdeployedとなっているかと思います。また、アクセスするURLがあるのでクリックしブラウザで表示できるか確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/a4018d42-25dc-079f-4b0d-4d7b935c6221.png)

index.htmlに変更を加え、Githubにコミットしてみてください。

再度URLにアクセスすると自動的に更新されているかと思います。

便利ですね。